Configurando o cliente Apollo no React

Instale @apollo/client e graphql. O pacote graphql é uma dependência de pares exigida pelo Apollo Client para analisar documentos de consulta com a tag de modelo gql.

Em projetos TypeScript, os dois pacotes fornecem suas próprias definições de tipos, portanto não são necessários pacotes @types.

Instancie ApolloClient com um cache e um elo. A configuração mais simples é: new ApolloClient({ cache: new InMemoryCache(), uri: '/graphql' }). A forma abreviada de uri cria internamente um HttpLink.

Para ter mais controle, construa manualmente a cadeia de elos e passe-a para a opção link em vez de uri.

Envolva sua aplicação React em ApolloProvider com a propriedade client: ApolloProvider client={client}. Isso disponibiliza a instância do Apollo Client para todos os componentes descendentes por meio do contexto do React.

Cada chamada de useQuery e useMutation na árvore de componentes usa automaticamente esse cliente, sem a necessidade de passar propriedades por todos os componentes.

InMemoryCache é o cache padrão do Apollo Client. Ele normaliza os dados obtidos por tipo e ID, armazenando cada entidade sob uma chave de cache exclusiva (por exemplo, User:1). Quando qualquer consulta obtém User:1, todas as leituras posteriores dessa entidade recebem os dados atualizados.

Essa normalização significa que atualizar um usuário em uma mutação atualiza automaticamente todos os resultados de consulta que incluem esse usuário, sem nenhum código adicional.

HttpLink gerencia o transporte HTTP do Apollo Client até o servidor GraphQL. Configure-o com uri e, opcionalmente, fetch, headers e credentials.

Em casos de uso avançados, elos divididos encaminham operações diferentes para pontos de extremidade diferentes: as assinaturas passam por WebSocket (WebSocketLink), enquanto as consultas e mutações passam por HTTP (HttpLink).

Importe setContext de @apollo/client/link/context. Crie um elo de autenticação: const authLink = setContext((_, { headers }) => ({ headers: { ...headers, authorization: 'Bearer ' + getToken() } })). Encadeie-o antes de HttpLink: authLink.concat(httpLink).

O elo setContext é executado antes de cada solicitação e adiciona dinamicamente cabeçalhos de autenticação a cada operação.

Componha elos usando ApolloLink.from([authLink, errorLink, httpLink]) ou authLink.concat(httpLink). Os elos são intermediários: cada elo processa a operação e a passa para next(). O último elo da cadeia envia a solicitação HTTP real.

Cadeias comuns: elo de autenticação (adicionar cabeçalhos) + elo de erros (tratar erros) + elo HTTP (enviar a solicitação).

Importe onError de @apollo/client/link/error. O elo de erros intercepta globalmente erros do GraphQL e erros de rede. Use-o para redirecionar para uma página de login em caso de erros UNAUTHENTICATED ou exibir uma notificação global de erro em falhas de rede.

O elo de erros deve aparecer antes do elo HTTP na cadeia, mas pode chamar forward(operation) para tentar a solicitação novamente.

cache-first (padrão): retorna os dados armazenados em cache imediatamente; faz uma nova busca em segundo plano se estiverem desatualizados. network-only: sempre busca no servidor e atualiza o cache. cache-and-network: retorna o cache imediatamente E faz a busca, atualizando a interface quando a resposta chega. cache-only: lê somente do cache e gera um erro se os dados não estiverem armazenados em cache. no-cache: sempre busca e nunca grava no cache.

Escolha com base nos requisitos de atualização dos dados: painéis geralmente usam cache-and-network; formulários de perfil de usuário usam network-only.

Defina a fetchPolicy padrão em defaultOptions do InMemoryCache: new ApolloClient({ defaultOptions: { watchQuery: { fetchPolicy: 'cache-and-network' } } }). Chamadas individuais de useQuery podem substituir essa configuração para cada consulta.

Definir um padrão global adequado reduz o código repetitivo de especificar fetchPolicy em cada chamada de gancho.

A extensão de navegador Apollo Client DevTools adiciona um painel do Apollo ao Chrome DevTools. Ela mostra todas as consultas armazenadas em cache e seus dados atuais, permite explorar o cache normalizado e possibilita executar novamente consultas no painel do DevTools.

Instale-a pela Chrome Web Store e inicialize o cliente com devtools: { enabled: true } (o padrão no modo de desenvolvimento).

Na cadeia de elos do Apollo Client, onde errorLink deve ser colocado em relação a httpLink?

Instale @apollo/client e graphql, crie um ApolloClient com InMemoryCache e uma cadeia de elos e envolva a aplicação em ApolloProvider. A cadeia de elos combina authLink (adicionar tokens), errorLink (tratamento global de erros) e httpLink (transporte HTTP). A política de busca controla a prioridade entre cache e rede; InMemoryCache normaliza entidades por tipo+id.

A extensão de navegador Apollo DevTools torna simples inspecionar o cache e depurar a aplicação.