4

我对阿波罗fetchMore方法的理解有疑问。我是这个工具的新手，文档中的示例对我来说太复杂了。我在互联网上搜索，但找不到更多（当前）示例。你能帮我写一个无限加载数据的最简单的例子吗？我有这个代码：

const productInfo = gql`
  query {
    allProducts { 
      id
      name
      price
      category {
        name
      }
    }
  }`

const ProductsListData = graphql(productInfo)(ProductsList)

每次点击“加载更多”按钮后，我想获取 5 个产品和 5 个更多产品。我理解这个的想法 - 光标等，但我不知道如何实现它。（我正在使用反应）

4

2 回答 2

5

对于无限加载，您将使用光标。参考 Apollo 文档中的示例，http://dev.apollodata.com/react/pagination.html#cursor-pages

根据您提供的架构定制它，它看起来像这样（未经测试）

const ProductsListData = graphql(productInfo, {
  props({ data: { loading, cursor, allProducts, fetchMore } }) {
    return {
      loading,
      allProducts,
      loadMoreEntries: () => {
        return fetchMore({
          variables: {
            cursor: cursor,
          },
          updateQuery: (previousResult, { fetchMoreResult }) => {
            const previousEntry = previousResult.entry;
            const newProducts = fetchMoreResult.allProducts;
            return {
              cursor: fetchMoreResult.cursor,
              entry: {
                allProducts: [...previousEntry.entry.allProducts, ...newProducts],
              },
            };
          },
        });
      },
    };
  },
})(ProductsList);

您可能不得不玩弄对象的路径，因为这看起来应该与您的架构相似。但在大多数情况下，这就是您的无限滚动分页实现应该是什么样子。

于 2017-08-04T01:44:45.873 回答
-1

通过 graphql.college 查看本教程https://www.graphql.college/building-a-github-client-with-react-apollo/

另外，你可以看看我在 Github上的实现。具体来说，./src/views/profile检查query-mutation-with-hoc分支

于 2019-09-09T15:12:40.427 回答