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?

Did you found a solution to your problem? I'm currently facing a very similar issue and I'm struggling... — ClementParis016
I did actually. I ended up fetching from my local cache with the provided filters. Basically, apollo will store not only your query, but also the variables that accompanied the query as your cache key. This means that you will need to provide them when loading data. — dipole_moment
@dipole_moment can you elaborate a bit on that? i.e. can you point me to some documentation? I don't think I'm doing anything specific with caching - just default logic, so I'm trying to understand what extra code I need. — Paulius Liekis

helfer helfer · Accepted Answer · 2017-05-08T00:45:39

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.

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

1 Answers