Question

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

const productInfo = gql`
  query {
    allProducts { 
      id
      name
      price
      category {
        name
      }
    }
  }`

const ProductsListData = graphql(productInfo)(ProductsList)

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

Answer 1

对于无限加载，您将使用游标。参考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);

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

Answer 2

通过graphql.college https://www.graphql.college/building-a-github-client-with-react-apollo/

查看本教程

此外，您还可以查看我的实现on Github。具体来说，请检查./src/views/profile分支上的query-mutation-with-hoc

使用Apollo的GraphQL - 如何使用fetchMore

2 个答案: