Apollo client v3 not caching query results with useQuery

Question

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.

2. 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

Answer 1

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.