Usando Apollo Client en un proyecto real

Si has estado usando Apollo Client en tus proyectos, probablemente empezaste con su paquete “apollo-boost”. Y para comenzar, este es el enfoque correcto, pero las limitaciones de esa configuración aparecen muy rápido cuando trabajas en una aplicación de producción. Algo tan simple como usar un servidor GraphQL que requiere autenticación causa una curva de aprendizaje pronunciada hacia el funcionamiento interno de Apollo Client. Mi objetivo es señalar algunos de los obstáculos que he encontrado y los enlaces a las soluciones o artículos que me ayudaron.

La Migración: Si deseas usar suscripciones, cambiar la caché de Apollo o añadir un Apollo Link existente a tu stack de red que no esté incluido, tendrás que configurar Apollo Client manualmente. Su guía (https://www.apollographql.com/docs/react/migrating/boost-migration/) está muy bien escrita. Esto te ayudará a instalar los paquetes correctos en tu proyecto. Sin embargo…

Esta configuración para la autenticación puede no funcionar o no darte la flexibilidad necesaria para vincularte con tu servidor de backend. Es necesario crear una función de middleware (https://www.apollographql.com/docs/react/networking/network-layer/#middleware). Una combinación de esos enlaces te ayudará a realizar una migración adecuada de boost a una configuración de Apollo Client para el mundo real. A continuación presento cómo se ve una configuración completada.

import { ApolloClient } from 'apollo-client';
import { ApolloLink } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { onError } from 'apollo-link-error';
import LogRocket from 'logrocket';
import { RetryLink } from 'apollo-link-retry';
import { getConfig } from './helpers/config-util';
import { getStore } from './helpers/store-util';

const authMiddleware = new ApolloLink((operation, forward) => {
	// añadir la autorización a los encabezados
	// https://www.apollographql.com/docs/react/networking/network-layer/#middleware
	const token = getStore()?.getState()?.auth0?.token;
	operation.setContext(({ headers = {} }) => ({
		headers: {
			...headers,
			authorization: `Bearer ${token}`,
		},
	}));
	return forward(operation);
});
// Añadiendo solución para mejorar la grabación de LogRocket
// https://docs.logrocket.com/docs/troubleshooting-sessions#apollo-client

const fetcher = (...args) => {
	return window.fetch(...args);
};

const client = new ApolloClient({
	link: ApolloLink.from([
		onError(({ graphQLErrors, networkError }) => {
			if (graphQLErrors) {
				LogRocket.captureException(graphQLErrors);
				graphQLErrors.forEach(({ message, locations, path }) =>
					console.error(
						`[Error de GraphQL]: Mensaje: ${message}, Ubicación: ${locations}, Ruta: ${path}`
					)
				);
			}
			if (networkError) {
				LogRocket.captureException(networkError);
				console.error(`[Error de red]:`, networkError);
			}
		}),
		authMiddleware,
		new RetryLink(),
		new HttpLink({
			uri: `${getConfig().apiUrl}`,
			fetch: fetcher,
		}),
	]),
	cache: new InMemoryCache(),
});

export default client;

P.D. - Si el backend tiene una configuración básica, el encabezado authorization no es un encabezado estándar, lo que puede arrojar un error de CORS. Asegúrate de tener el servidor configurado para permitir ese encabezado.

Este middleware toca los conceptos de Apollo Links. Este será el tema del próximo post de esta serie, ya que son una funcionalidad compleja pero poderosa de Apollo Client.