Apollo 3 pagination with Field Policies

Question

Could someone provide an example of pagination implemented with Apollo Client 3.0 Field Policies. I've been following the example from the docs to implement infinite scroll but in my console I'm getting the following warning:

The updateQuery callback for fetchMore is deprecated, and will be removed in the next major version of Apollo Client.  Please convert updateQuery functions to field policies with appropriate read and merge functions, or use/adapt a helper function (such as concatPagination, offsetLimitPagination, or relayStylePagination) from @apollo/client/utilities.  The field policy system handles pagination more effectively than a hand-written updateQuery function, and you only need to define the policy once, rather than every time you call fetchMore. 

I'm fairly new to Apollo and I don't really get how to do that the 3.0 way. I would appreciate some examples to get better understanding.

Here is my current code:

import React from "react"; import { useGetUsersQuery } from "./generated/graphql"; import { Waypoint } from "react-waypoint";  const App = () => {   const { data, loading, error, fetchMore } = useGetUsersQuery({     variables: { limit: 20, offset: 0 },   });    if (loading) return <div>Loading...</div>;   if (error) return <div>Error</div>;    return (     <div className="App">       {data && data.users && (         <div>           {data.users.map((user, i) => {             return (               <div key={i} style={{ margin: "20px 0" }}>                 <div>{user.id}</div>                 <div>{user.name}</div>               </div>             );           })}           <Waypoint             onEnter={() => {               fetchMore({                 variables: { offset: data.users.length },                 updateQuery: (prev, { fetchMoreResult }) => {                   console.log("called");                   if (!fetchMoreResult) return prev;                   return Object.assign({}, prev, {                     users: [...prev.users, fetchMoreResult.users],                   });                 },               });             }}           />         </div>       )}     </div>   ); };  export default App; 

Answer 1

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