使用 Apollo 实现 GraphQL 游标基础分页

GraphQL 允许我们从数据图中精确检索所需的字段，也允许我们查询所需的字段。虽然大多数情况下，这能提供我们想要的简短答案，但在某些情况下，数据图包含大量数据，查询返回的数据会远远超出我们的实际需要。

GraphQL 现在可以对查询结果进行分页，并将其限制在特定部分。获取分页数据的方法有两种：编号页面和游标。显示分页数据的方式也有两种：离散页面和无限滚动。

在下面的示例中，我们使用 Apollo 通过GraphQL API实现具有无限滚动方法的光标分页。

import React from "react";
import {useQuery,gql,ApolloProvider} from "@apollo/client";
import {ApolloClient,InMemoryCache} from "@apollo/client";

const client = new ApolloClient({
    cache: new InMemoryCache(),
    uri: "https://api.github.com/graphql",
    headers: {        
        "Authorization"`bearer {process.env.REACT_APP_GITHUB_KEY}`           
    }
});

const REPOS_QUERY = gql`
  query repoQuery($after: String,$before:String) {
    repository(owner: "reactjs", name: "reactjs.org") {
    issues(first: 30,before: $before,after: $after) {
      edges {
        node {
          title
          url
          state
        }
      }
      pageInfo {
        endCursor
        hasNextPage
        hasPreviousPage
        startCursor
      }
    }
  }   
}`;

function Issues() {  
  const { data, error, loading, fetchMore } = useQuery(REPOS_QUERY);
  if (error) return <div>errors</div>;
  if (loading || !data) return <div>loading</div>;

  return (
    <>
      <ul>
        {data.repository.issues.edges.map(({ node }) => (
          <li key={node.id}>{node.title}</li>
        ))}
      </ul>

      <button
        onClick={() => {
          const { endCursor } = data.repository.issues.pageInfo;

          fetchMore({
            variables: { after: endCursor },
            updateQuery: (prevResult, { fetchMoreResult }) => {
              fetchMoreResult.repository.issues.edges = [
                ...prevResult.repository.issues.edges,
                ...fetchMoreResult.repository.issues.edges
              ];
              return fetchMoreResult;
            }
          });

        }}
      >
        more
      </button>

    </>
  );
}

function App() {
  return (
    <ApolloProvider client={client}>
      <Issues />
    </ApolloProvider>
  );
}


export default App;

使用 fetchMore

在 Apollo 中，最简单的分页方法是使用fetchMore 函数，该函数包含在 useQuery 钩子返回的结果对象中。这实际上允许你运行一个新的 GraphQL 查询，并将结果与前一个查询合并。

您可以定义新查询要使用的查询和变量，以及如何将新查询结果与客户端现有数据合并。您使用的具体方法将决定您使用的分页类型。
源代码

鏂囩珷鏉ユ簮锛�https://dev.to/fpaghar/graphql-cursor-base-pagination-with-apollo-3fjg