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;

Hokum

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

Invitatory

It doesn't work for me. Can you help me? codesandbox.io/s/nostalgic-glitter-y7350?file=/src/index.js – Residency

@DarynK. It does work. typePolicies are options of InMemoryCache instance. Also using index for iterating react components is anti-pattern. codesandbox.io/s/stoic-haze-ispw2 – Invitatory

So many confusing elements. One, my backend takes the variable "skip" instead of offset. Is there a way to configure this to use skip instead? Also, I'm implementing infinite scroll. Without fetchmore, how do we grab the next log? – Chaeta

@ThomasLester the current recommendation seems to be to copy the utility function and adapt it to your needs: github.com/apollographql/apollo-client/blob/main/src/utilities/… – Evy

Answer 2

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.

Lisalisabet

,When querying new data, custom merge function is not rerendering UI. How to rerender UI automatically. Is some method i need to call other than i have called useQuery hook to rerender ui ? – Hartmunn

Not sure how your did query setup but, one think which I thought worth mentioning is if you are also passing variables in you query you need to pass them in the keyArgs like I did it above (keyArgs: ["searchString", "type"]). – Lisalisabet