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, uri }) {

  const httpLink = new HttpLink({

    uri: uri,

    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.

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')

// endpoint da sua api graphQL

const graphqlURI = 'https://www.example.com'



const App = () => {

  return (

    <ApolloProvider token={token} uri={graphqlURI}>

      <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 a uri está definida no próprio arquivo, sendo passados 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.

Na prática, tendo diferentes ambientes para teste e produção, o graphqlURI poderia vir de uma env definida com a uri de cada ambiente.

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.