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é:
ApolloClient
para almacenar en caché los datos. En su caso, puede agregar el campoid
en su consultaUSERS_QUERY
y configurarlo comokeyFields
en su configuración de caché.También puede intentar agregar
fetchPolicy: 'cache-first'
en su hookuseQuery
. Esto le indica aApolloClient
que 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, entoncesApolloClient
no almacenará en caché los datos.Con respecto a su segunda pregunta, tiene razón en que
typePolicies
se utiliza para la normalización de la caché y para decidir cómo fusionar nuevos datos. Pero también se puede utilizar para configurar loskeyFields
de tipos específicos. En su caso, puede definir loskeyFields
para el tipoUsuarios
para asegurarse de que los datos se almacenen en caché correctamente.