DEV Community

Cover image for Consumindo API GraphQL usando React e Apollo Client
Emerson Vieira
Emerson Vieira

Posted on

Consumindo API GraphQL usando React e Apollo Client

#react #graphql

No tutorial de hoje, iremos consumir uma API GraphQL usando React e Apollo Client.

A API GraphQL será a seguinte: https://rickandmortyapi.com/graphql

Vou deixar abaixo dois links que falam sobre GraphQL e Apollo para quem quiser entender melhor antes de prosseguir com o tutorial

https://adrianolisboa.com/o-minimo-que-voce-precisa-saber-sobre-graphql-para-nao-passar-vergonha-em-uma-conversa/

https://www.redhat.com/pt-br/topics/api/what-is-graphql

Vamos à prática!

Crie um projeto usando CRA(Create React App) e após isso, adicione a dependência abaixo

yarn add graphql @apollo/client
Enter fullscreen mode Exit fullscreen mode

Estrutura do projeto

Alt Text

src/service/index.js 

import { ApolloClient, InMemoryCache } from "@apollo/client";

const client = new ApolloClient({
  uri: "https://rickandmortyapi.com/graphql",
  cache: new InMemoryCache(),
});

export default client;
Enter fullscreen mode Exit fullscreen mode

src/querys/index.js 

import { gql } from "@apollo/client";

const INFO_PERSON = gql`
  query {
    characters {
      results {
        name
        species
        gender
        image
      }
    }
  }
`;

export default INFO_PERSON;
Enter fullscreen mode Exit fullscreen mode

src/App.js 

import { useQuery } from "@apollo/client";

import INFO_PERSON from "./querys/index";

import "./App.css";

function App() {
  const { loading, error, data } = useQuery(INFO_PERSON);

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>an error occurred...</p>;
  }

  return (
    <section className="parent">
      {data.characters.results.map((person, index) => (
        <div className="card" key={person.name}>
          <img src={person.image} alt="Avatar" style={{ width: "100%" }} />
          <div className="container">
            <h4>
              <b>{person.name}</b>
            </h4>
            <p>
              <b>GENDER:</b> {person.gender}
            </p>
            <p>
              <b>SPECIE:</b> {person.species}
            </p>
          </div>
        </div>
      ))}
    </section>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

/src/index.js 

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { ApolloProvider } from "@apollo/client";

import client from "./service/index";

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
Enter fullscreen mode Exit fullscreen mode

src/App.css 

.parent {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
}
 .card {
     margin: 5%;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     transition: 0.3s;
     width: 20%;
}
 .card:hover {
     box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
 .container {
     padding: 2px 16px;
}
Enter fullscreen mode Exit fullscreen mode

Resultado

Alt Text

É isso! Qualquer dúvida, sugestão ou crítica, basta comentar abaixo :)

Top comments (4)

Collapse
 
wlsf profile image
Willian Frantz •

Que bacana! obrigado por compartilhar o conteúdo!

Como funciona aquela opção cache na inicialização do ApolloClient ali em cima?

Collapse
 
mensonones profile image
Emerson Vieira •

armazena os resultados da(s) consulta(s) GraphQL. Se for feita a mesma consulta dos mesmos dados, não é feita uma solicitação de rede desnecessária.

Collapse
 
wlsf profile image
Willian Frantz •

E como funciona o gerenciamento desse Cache? O que acontece se por ventura os dados mudarem e a requisição fosse retornar algo diferente, como você sabe quando ignorar o cache e refazer a request?

Collapse
 
bianonato_ profile image
Beatriz Nonato •

Excelente tutorial! Tem o link do projeto?

Read next

itswillt profile image

⚛️ Demystifying React's Types: Component types

Will T. -

serifcolakel profile image

Shared UI Setup For Micro Frontend Application (Module Federation with React) with Nx Workspace

Serif COLAKEL -

sebastienlorber profile image

This Week In React #180 : Drag & Drop, React name, Next.js Auth, New Architecture, Gesture Handler, Privacy Manifest...

Sebastien Lorber -

sarwarasik profile image

Easy access form value in Nextjs/React with TS

Sarwar Hossain -