Setup Apollo Client para requisições graphQL em React

Introdução

Nesse artigo será apresentado como configurar uma app React para requisições graphQL, para isso será usado a lib APolloClient. A ideia é apresentar como configurar a app e um exemplo de como realizar as requisições.

Libs

• @apollo/client: lib que permite gerenciar estado e fazer requisições com GraphQL
• graphql: lib que permite fazer o parse das queries GraphQL

Para adicionar as libs no projeto:

yarn add @apollo/client graphql --dev

Configuração

A seguir vou apresentar como fazer a configuração do ApolloClient para possibilitar requisições graphQL.
Primeiro será criado um context do ApolloClient, para tudo que estiver contido como children dele conseguir realizar requisições graphQL:

import {
  ApolloClient,
  ApolloProvider,
  HttpLink,
  InMemoryCache
} from '@apollo/client'

function ExampleApolloProvider({ children, token }) {
  const httpLink = new HttpLink({
    uri: 'https://www.example.com', // endpoint da sua api graphQL
    headers: {
      authorization: `Bearer ${token}`,
    },
  })

  const client = new ApolloClient({
    cache: new InMemoryCache(),
    link: httpLink,
  })

  return <ApolloProvider client={client}>{children}</ApolloProvider>
}

export { ExampleApolloProvider as ApolloProvider }

Em const client é inicializado o APolloClient passando as informações da onde vai bater a partir do link definido, e o cache a partir de uma instância de InMemoryCache, que o APolloClient usa para fazer cache dos resultados das queries.
Em httpLink é passada a uri da api graphQL e definido os headers necessários para as requisições, nesse caso está exemplificado um que usa Bearer token.
Por fim, é definido o retorno e o export para permitir usar dentro da aplicação.
Na prática, tendo diferentes ambientes para teste e produção, a uri poderia vir de uma env definida para cada ambiente.

Considerando que é uma app que após o login salva o token no localStorage, e que se quer permitir requisições graphQL para toda a app de forma geral, é usado o ApolloProvider que foi definido no arquivo acima:

import { ApolloProvider } from './contexts/ApolloContext'
import AppContent from './components/AppContent'

const token = localStorage.getItem('@tokenId')

const App = () => {
  return (
    <ApolloProvider token={token}>
      <AppContent />
    </ApolloProvider>
  )
}

Nesse caso do exemplo, está se pegando o token do localStorage (nesse exemplo, como se estivesse salvo com a chave @tokenId lá) e passando para o ApolloProvider. O AppContent está sendo passado como children do ApolloProvider, então tudo que está contido dentro dele, o que seria a app como um todo, vai conseguir realizar requisições graphQL.

Partindo de um query chamada user que a api possui, a qual retorna o nome do usuário e a profissão, vai ser definido o arquivo com a query a ser chamada:

import { gql } from '@apollo/client'

const GET_USER = gql`
  query GetUser {
    user {
      name
      occupation
    }
  }
`

export default GET_USER

GET_USER corresponde a como vai ser chamada a query pela app React e user o nome da query que se vai buscar na api.

No arquivo que define o AppContent, vai ser chamada a query GET_USER e usado o retorno dela:

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

import GET_USER from './query/UserQuery'

const AppContent = () => {
  const { loading, error, data } = useQuery(GET_USER)

  if (loading) return <p>Loading...</p>
  if (error) return <p>Falha na requisição</p>

  return (
    <>
      <h1>Welcome!</h1>
      <p>Name: {data.user.name}</p>
      <p>Occupation: {data.user.occupation}</p>
    </>
  )
}

O hook useQuery vai executar a query definida em GET_USER, retornando loading true enquanto a requisição não for finalizada, retornando error se a requisição falhar e retornando data quando a requisição for finalizada com sucesso. Enquanto não tiver retornado data, vai trazer a mensagem Loading... na tela. Caso finalize a requisição com erro, vai trazer a mensagem Falha na requisição. Caso finalize a requisição com sucesso, será populado na tela o nome do user e a profissão dele (name e occupation).
E dessa forma está configurado o ApolloClient para requisições graphQL e pronto para uso.

Conclusão

A ideia foi apresentar como configurar o APolloClient para possibilitar app React realizar chamadas graphQL, mostrando a definição do context, o uso desse context e a exemplificação de como executar uma query.
Segue o link da documentação do ApolloClient para quem quiser se aprofundar mais.