How to cache in Vue-Apollo for different pages that use same query but different filters

[inaki-ibarra]

I'm new to GraphQL and still trying to wrap my head around it.
I don't know if it's the right way. I have the V4 version.

I have 2 pages for Orders. Both are using the Orders GraphQL query and the only difference is the params for filtering.

# Page A
orders(category: "A") {
  id
}

# Page B
orders(category: "B") {
  id
}

They are displaying the same result unless I refresh the page. It seems they are using the same cache. For example, when I visit the Orders Page A, it will do the query and cache the result, then Orders Page B won't do the query anymore because it fetches from the cache first and does not care about the filters in the query params.

Is it possible to have a separate cache for each one? I'm thinking of using a different GraphQL name for Orders Page B as a workaround.