Apollo fetchMore updates data globally

I have two TaskList components that use the same query GET_TASKS.

Both use a different filter query variable which is passed down to them in props as queryVars.

I defined a standard merge function in type policies to merge the incoming and existing data together.

The TaskList component uses

const { data, fetchMore } = useQuery<Response, Variables>(GET_TASKS, { variables: queryVars })

to retrieve the data.

A Fetch more button has () => fetchMore({ variables: queryVars }) in the onClick attribute.

When I click on the Fetch more button on the left, the tasks on the right get updated as well, however, without its filter applied, so the data that come with Assigned to me filter are also put to the Assigned by me task list and vice versa.

The merge function basically rewrites every data object that uses the given query.

How do I tell Apollo to only update the data that is bound to the component where fetchMore is defined?

Answer

You should be able to add filter to the keyArgs property. This should create different cache results based on the filter.

const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        tasks: {
          keyArgs: ["filter"],
          merge(existing, incoming, { args: { offset = 0 }}) {
            //Custom merge
          },
        },
      },
    },
  },
});