title: Apollo 3 pagination with Field Policies
body: <p>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:</p>
  <pre><code>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.
  </code></pre>
  <p>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.</p>
  <p>Here is my current code:</p>
  <pre><code>import React from &quot;react&quot;;
  import { useGetUsersQuery } from &quot;./generated/graphql&quot;;
  import { Waypoint } from &quot;react-waypoint&quot;;
  
  const App = () =&gt; {
    const { data, loading, error, fetchMore } = useGetUsersQuery({
      variables: { limit: 20, offset: 0 },
    });
  
    if (loading) return &lt;div&gt;Loading...&lt;/div&gt;;
    if (error) return &lt;div&gt;Error&lt;/div&gt;;
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        {data &amp;&amp; data.users &amp;&amp; (
          &lt;div&gt;
            {data.users.map((user, i) =&gt; {
              return (
                &lt;div key={i} style={{ margin: &quot;20px 0&quot; }}&gt;
                  &lt;div&gt;{user.id}&lt;/div&gt;
                  &lt;div&gt;{user.name}&lt;/div&gt;
                &lt;/div&gt;
              );
            })}
            &lt;Waypoint
              onEnter={() =&gt; {
                fetchMore({
                  variables: { offset: data.users.length },
                  updateQuery: (prev, { fetchMoreResult }) =&gt; {
                    console.log(&quot;called&quot;);
                    if (!fetchMoreResult) return prev;
                    return Object.assign({}, prev, {
                      users: [...prev.users, fetchMoreResult.users],
                    });
                  },
                });
              }}
            /&gt;
          &lt;/div&gt;
        )}
      &lt;/div&gt;
    );
  };
  
  export default App;
  </code></pre>