Apollo 3 pagination with Field Policies Apollo 3 pagination with Field Policies reactjs reactjs

Apollo 3 pagination with Field Policies


Remove updateQuery callback function completely:

fetchMore({ variables: { offset: data.users.length } });

And change your cache to:

import { offsetLimitPagination } from "@apollo/client/utilities";const cache = new InMemoryCache({  typePolicies: {    Query: {      fields: {        users: offsetLimitPagination(),      },    },  },});

So your query in qraphql must have offset and limit arguments.

Other options are: concatPagination and relayStylePagination

If you need to distinguish different request to same field users ex. put keyArg: offsetLimitPagination(["filters"]) and query your users with filters arg. Cache will store it separately.

More info in official release


For future users. You can achieve cache update in Apllo > 3.0.0 with the following way.

const cache = new InMemoryCache({  typePolicies: {    Query: {      fields: {        users: {          keyArgs: ["searchString", "type"],          // Concatenate the incoming list items with          // the existing list items.          merge(existing = [], incoming) {            return [...existing, ...incoming];          },        }      }    }  }})

searchString and type could be your other arguments other than limit & offset.

This way you don't need to do any updating logic inside the updateQuery callback.