web-dev-qa-db-fra.com

Apollo 3 pagination avec des politiques sur le terrain

Est-ce que quelqu'un pourrait fournir un exemple de pagination mises en œuvre avec les politiques sur le terrain du client Apollo 3.0. Je suis suivi de l'exemple des docs pour mettre en œuvre un défilement infini, mais dans ma console, je reçois l'avertissement suivant:

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.

Je suis assez nouveau à Apollo et je ne comprends pas vraiment comment faire cela de 3,0. J'apprécierais quelques exemples d'obtenir une meilleure compréhension.

Voici mon code actuel:

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;
reactjspaginationreact-apolloapollo-client
17
Aleksandr Fomin

Pour les futurs utilisateurs. Vous pouvez atteindre la mise à jour du cache dans APLLO> 3.0.0 avec la manière suivante.

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 et Type Pourriez être vos autres arguments autres que limite & décalage.

De cette façon, vous n'avez pas besoin de faire une mise à jour de la logique à l'intérieur du rappel updateQuery.

0
bir_ham