Configurar Apollo Client en React

Instale @apollo/client y graphql. El paquete graphql es una dependencia entre pares que Apollo Client necesita para analizar documentos de consulta con la etiqueta de plantilla gql.

En proyectos de TypeScript, ambos paquetes incluyen sus propias definiciones de tipos, por lo que no se necesitan paquetes @types.

Instancie ApolloClient con una caché y un link. La configuración más sencilla es: new ApolloClient({ cache: new InMemoryCache(), uri: '/graphql' }). La abreviatura uri crea internamente un HttpLink.

Para tener más control, cree manualmente la cadena de links y pásela a la opción link en lugar de usar uri.

Envuelva su aplicación React en ApolloProvider con la prop client: ApolloProvider client={client}. Esto hace que la instancia de Apollo Client esté disponible para todos los componentes descendientes mediante el contexto de React.

Cada llamada a useQuery y useMutation en el árbol de componentes utiliza automáticamente este cliente, sin necesidad de pasar props por componentes intermedios.

InMemoryCache es la caché predeterminada de Apollo Client. Normaliza los datos obtenidos por tipo e ID y almacena cada entidad con una clave de caché única (por ejemplo, User:1). Cuando cualquier consulta obtiene User:1, todas las lecturas posteriores de esa entidad reciben los datos actualizados.

Esta normalización significa que actualizar un usuario en una mutación actualiza automáticamente todos los resultados de consulta que incluyen a ese usuario, sin necesidad de código adicional.

HttpLink gestiona el transporte HTTP entre Apollo Client y su servidor de GraphQL. Configúrelo con uri y, opcionalmente, fetch, headers y credentials.

En casos de uso avanzados, los links divididos dirigen distintas operaciones a diferentes endpoints: las suscripciones se transmiten mediante WebSocket (WebSocketLink), mientras que las consultas y mutaciones se transmiten mediante HTTP (HttpLink).

Importe setContext desde @apollo/client/link/context. Cree un link de autenticación: const authLink = setContext((_, { headers }) => ({ headers: { ...headers, authorization: 'Bearer ' + getToken() } })). Encadénelo antes de HttpLink: authLink.concat(httpLink).

El link setContext se ejecuta antes de cada solicitud y añade dinámicamente encabezados de autenticación a cada operación.

Componga los links mediante ApolloLink.from([authLink, errorLink, httpLink]) o authLink.concat(httpLink). Los links actúan como middleware: cada uno procesa la operación y la pasa a next(). El último link de la cadena envía la solicitud HTTP real.

Cadenas habituales: link de autenticación (añade encabezados) + link de errores (gestiona errores) + link HTTP (envía la solicitud).

Importe onError desde @apollo/client/link/error. El link de errores intercepta globalmente los errores de GraphQL y los errores de red. Úselo para redirigir a una página de inicio de sesión en caso de errores UNAUTHENTICATED o para mostrar una notificación de error global cuando fallen las conexiones de red.

El link de errores debe aparecer antes del link HTTP en la cadena, pero puede llamar a forward(operation) para reintentar la solicitud.

cache-first (predeterminada): devuelve inmediatamente los datos almacenados en la caché; vuelve a obtenerlos en segundo plano si están obsoletos. network-only: siempre obtiene los datos del servidor y actualiza la caché. cache-and-network: devuelve la caché inmediatamente y también obtiene los datos; actualiza la interfaz cuando llega la respuesta. cache-only: solo lee de la caché y genera un error si los datos no están almacenados. no-cache: siempre obtiene los datos y nunca los escribe en la caché.

Elija según los requisitos de actualización de los datos: los paneles suelen usar cache-and-network; los formularios de perfil de usuario suelen usar network-only.

Establezca la fetchPolicy predeterminada en defaultOptions de InMemoryCache: new ApolloClient({ defaultOptions: { watchQuery: { fetchPolicy: 'cache-and-network' } } }). Las llamadas individuales a useQuery pueden sobrescribir esta configuración para cada consulta.

Establecer una configuración global adecuada reduce el código repetitivo de especificar fetchPolicy en cada llamada a un hook.

La extensión de navegador Apollo Client DevTools añade un panel de Apollo a Chrome DevTools. Muestra todas las consultas almacenadas en la caché y sus datos actuales, permite explorar la caché normalizada y volver a ejecutar consultas desde el panel de DevTools.

Instálela desde Chrome Web Store e inicialice el cliente con devtools: { enabled: true } (valor predeterminado en el modo de desarrollo).

En la cadena de links de Apollo Client, ¿dónde debe colocarse errorLink con respecto a httpLink?

Instale @apollo/client y graphql, cree un ApolloClient con InMemoryCache y una cadena de links, y envuelva la aplicación en ApolloProvider. La cadena de links combina authLink (añade tokens), errorLink (gestiona errores globalmente) y httpLink (transporte HTTP). La fetch policy controla la prioridad entre la caché y la red; InMemoryCache normaliza las entidades por tipo e id.

La extensión de navegador Apollo DevTools facilita la inspección de la caché y la depuración.