reactjs - 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 根据调用它的参数分别缓存结果中的每个字段。如果你用不同的参数调用同一个字段两次，它将有两个缓存条目。

使用 Apollo Devtools，您可以查看缓存的确切内容。如果您确定使用不同参数调用查询会覆盖初始缓存内容，则应考虑在 Apollo Client GitHub 存储库上提交问题并进行复制。