Apollo client v3 no está almacenando en caché los resultados de la consulta con useQuery.
Estoy usando apollo v3 con una create-react app. Hago una consulta con useQuery y espero que los resultados se almacenen en caché, pero no lo están.
En mi archivo App.jsx, tengo:
const client = new ApolloClient({
uri: `${api}/graphql`,
cache: new InMemoryCache()
})
Envuelvo mi aplicación con ApolloProvider.
Tengo un proveedor que utiliza esta consulta graphql para obtener una lista de usuarios:
const USERS_QUERY = gql`
query GetUsers {
users {
id
email
fullName
}
}
`
La consulta funciona, cuando inspecciono la pestaña “apollo” en las herramientas de desarrollo de Chrome, no veo nada en la sección de caché.
Mis preguntas:
1) ¿Por qué los resultados no se almacenan en caché si estoy usando useQuery de @apollo/client?
const { loading, error, data } = useQuery(USERS_QUERY)
Pensé que los resultados se almacenarían en caché automáticamente.
2) También intenté agregar una directiva de tipo:
cache: new InMemoryCache({
typePolicies: {
Users: {
keyFields: ['id']
}
}
})
Pero creo que uso esto si quiero normalizar la caché con una clave diferente, o si quiero decidir cómo combinar los nuevos datos por mí mismo. Pero primero necesito tener los datos en mi caché.
davy.ai
Podría haber varias razones por las cuales los resultados no se están almacenando en caché:
ApolloClientpara almacenar en caché los datos. En su caso, puede agregar el campoiden su consultaUSERS_QUERYy configurarlo comokeyFieldsen su configuración de caché.También puede intentar agregar
fetchPolicy: 'cache-first'en su hookuseQuery. Esto le indica aApolloClientque intente obtener los datos primero desde la caché y los devuelva si existen. Si no hay datos en la caché, entonces se realizará una solicitud a la red.Finalmente, asegúrese de que los datos realmente estén siendo devueltos por el servidor con encabezados de
cache-control. Si el servidor no envía estos encabezados, entoncesApolloClientno almacenará en caché los datos.Con respecto a su segunda pregunta, tiene razón en que
typePoliciesse utiliza para la normalización de la caché y para decidir cómo fusionar nuevos datos. Pero también se puede utilizar para configurar loskeyFieldsde tipos específicos. En su caso, puede definir loskeyFieldspara el tipoUsuariospara asegurarse de que los datos se almacenen en caché correctamente.