reactjsgraphqlapollo-clientreact-apollo

Apollo client v3 not caching query results with useQuery


I am using apollo v3 with a create-react app. I fire a query with useQuery and expect results to be cached, but they are not.

In my App.jsx, I have:

const client = new ApolloClient({
    uri: `${api}/graphql`,
    cache: new InMemoryCache()
  })

I wrap my app with the ApolloProvider.

I have a provider that uses this graphql query to fetch a list of users:

const USERS_QUERY = gql`
  query GetUsers {
    users {
      id
      email
      fullName
    }
  }
`

The query works, when I inspect the apollo tab in chrome devtools, I see nothing in the cache section.

My questions:

  1. Why are the results not cached if I am using the useQuery from @apollo/client?

const { loading, error, data } = useQuery(USERS_QUERY)

I thought results should be cached automatically.

  1. I also tried to add a type policy:

    cache: new InMemoryCache({
       typePolicies: {
         Users: {
           keyFields: ['id']
         }
       }
     })
    

But I think I use this if I want to normalise with a different key the cache, or if I want to decide how to merge new data by myself. But first I need to have the data in my cache


Solution

  • As far as I know, this is because your query does not have any input arguments / variables, so the cache does not know which item to get from the cache when the query is called again. From what I understand, the cache is only used when a specific piece of data is looked for with an ID; otherwise, if it is a generic query, the data might have changed and so is not cached.