Caché de Apollo: normalización y actualizaciones

InMemoryCache almacena cada objeto mediante una clave de caché compuesta por __typename e id: User:1, Post:42. Cuando una consulta devuelve un User con id "1", se almacena una sola vez con esta clave, independientemente de cuántas consultas diferentes lo incluyan.

Cualquier consulta posterior que obtenga el mismo User:1 lee la única entrada de caché, lo que garantiza que todos los componentes vean los mismos datos.

Cuando una mutación devuelve un objeto User:1 actualizado, Apollo lo escribe en la entrada de caché User:1. Todas las consultas activas que incluyan User:1 reflejan automáticamente los campos actualizados en la interfaz, sin necesidad de código adicional.

Esta propagación automática es la principal ventaja de una caché normalizada frente a una caché basada en documentos (basada en claves de consulta).

Lee el resultado actual de una consulta almacenado en la caché: cache.readQuery({ query: GET_USERS }) devuelve el objeto de datos como si lo hubiera devuelto useQuery. Devuelve null si la consulta no está en la caché.

Use readQuery dentro de las funciones de actualización de mutaciones para leer la lista actual antes de modificarla.

cache.writeQuery({ query: GET_USERS, data: { users: updatedUsers } }) escribe directamente en la caché y activa nuevos renderizados en todos los componentes que leen GET_USERS. No se realiza ninguna solicitud de red.

Combine readQuery y writeQuery para implementar actualizaciones inmutables de la caché: lea, genere un nuevo array y vuelva a escribirlo.

cache.modify({ id: cache.identify(user), fields: { name: () => 'New Name' } }) modifica directamente los campos de una entidad específica almacenada en la caché. No es necesario leer primero una consulta cuando conoce el ID de caché de la entidad.

El objeto fields asigna nombres de campos a funciones modificadoras que reciben el valor actual y devuelven el nuevo valor.

Pase una función de actualización a useMutation: useMutation(ADD_POST, { update(cache, { data: { addPost } }) { cache.modify({ id: cache.identify(user), fields: { posts: existingPosts => [...existingPosts, addPost] } }); } }).

Esto añade la nueva publicación al array de publicaciones almacenado en la caché del usuario y actualiza todos los componentes que muestran su lista de publicaciones.

cache.evict({ id: 'User:1' }) elimina la entrada User:1 de la caché. Cualquier consulta activa que incluyera User:1 volverá a renderizarse sin esa entidad en el resultado.

Después de expulsar entradas, llame a cache.gc() para eliminar los objetos que ya no sean accesibles desde las consultas raíz. Esto evita fugas de memoria en aplicaciones de larga duración.

cache.gc() recorre el grafo de la caché empezando por todas las consultas activas y elimina las entidades que ya no sean accesibles. Puede llamarlo periódicamente o después de mutaciones por lotes que eliminen muchas entidades.

Las entidades a las que hacen referencia hooks useQuery activos nunca se eliminan mediante la recogida de basura; solo se eliminan las entidades huérfanas que ya no forman parte de ningún resultado de consulta.

Si consulta una entidad individual (GET_USER por id) que ya está almacenada en la caché como parte de una consulta de lista, Apollo puede leerla de la caché sin realizar un viaje de ida y vuelta a la red mediante políticas de campos: keyArgs y funciones read en la política de tipos.

La función read devuelve una referencia de caché: return toReference({ __typename: 'User', id: args.id }), indicando a Apollo que lea de la entrada de caché User:id existente.

Si sus entidades usan un campo distinto de id como clave única (por ejemplo, slug o uuid), configúrelo en la política de tipos: new InMemoryCache({ typePolicies: { Post: { keyFields: ['slug'] } } }).

Así, Apollo usa Post:my-post-slug como clave de caché en lugar de exigir un campo id, preservando la normalización en esquemas no estándar.

refetchQueries: [{ query: GET_USERS }] en las opciones de useMutation activa una nueva solicitud de red después de que se complete la mutación. Es más sencillo, pero siempre realiza una solicitud de red.

La función update modifica la caché localmente y evita el viaje de ida y vuelta a la red. Use refetchQueries cuando la lógica de actualización de la caché sea demasiado compleja para escribirla o cuando los campos calculados por el servidor hagan que las actualizaciones locales de la caché no sean fiables.

¿Cuál es el formato de clave de caché predeterminado que utiliza InMemoryCache para almacenar entidades?

InMemoryCache normaliza las entidades mediante __typename+id, lo que permite actualizaciones automáticas entre consultas. Lea y escriba en la caché con cache.readQuery, cache.writeQuery y cache.modify. Elimine entidades con cache.evict seguido de cache.gc. Configure campos de clave personalizados mediante typePolicies para claves principales que no sean id.

Use funciones de actualización de mutaciones para lograr eficiencia con la caché local; use refetchQueries cuando los campos calculados por el servidor hagan que las actualizaciones locales no sean fiables.