React Apollo: One query, multiple arguments - How to cache?

Question

I am puzzled by this.

Suppose I currently have a the following query:

export const getPokemon = gql`
  query getPokemon($filters: AssetFilters) {
    pokemon(filters: $filters) {
      name,
      generation,
      exp
    }
  }`;

By default no filters are passed in so everything is returned.

Now, I would like to refetch with a filter as such:

this.props.refetch({
  filters: {
    generation: '3rd'
  }
});

The above seems to override the local cache of the original query!

I am writing an offline-first app and I would like these different filtering permutations to be cached separately rather than override the original cache.

How can I overcome this caching difficulty and have Apollo cache these queries with different arguments separately?

Answer 1

Apollo caches each field in the result separately based on the arguments that it was called with. If you call the same field twice with different arguments, it will have two cache entries.

Using the Apollo Devtools you can see the exact contents of the cache. If you determine that calling the query with different arguments overwrites the initial cache contents, you should consider filing an issue on the Apollo Client GitHub repository with a reproduction.