如何修复 Apollo 客户端不执行任何操作中的分页？

Question

我的所有代码都在这里：https://github.com/henryboisdequin/swimmingly。我有一个显示所有 public 锻炼的地方（浏览）。我一次渲染 3 个（用于测试），用户可以选择加载更多。当我点击加载更多时，查询成功，返回所需的锻炼但它没有呈现在屏幕上。我获取更多代码在这里：

// PS: this uses Chakra-UI
{data && data.allPublicWorkouts.hasMore ? (
        <Flex>
          <Button
            onClick={() => {
              fetchMore({
                variables: {
                  limit: variables.limit,
                  cursor:
                    data.allPublicWorkouts.workouts[
                      data.allPublicWorkouts.workouts.length - 1
                    ].createdAt,
                },
              });
            }}
            isLoading={loading}
            m="auto"
            my={8}
          >
            Load More
          </Button>
        </Flex>
      ) : null}

如何解决这个问题并让负载正常工作？

Answer 1

您可能需要为 fetchMore 实现与 updateQuery 选项等效的选项，以将 newly-retrieved 结果与这些缓存合并。这是 Apollo 文档中的一个片段，演示了如何使用 updateQuery 作为提要：

    ...
        onLoadMore={() =>
          fetchMore({
            variables: {
              offset: data.feed.length
            },
            updateQuery: (prev, { fetchMoreResult }) => {
              if (!fetchMoreResult) return prev;
              return Object.assign({}, prev, {
                feed: [...prev.feed, ...fetchMoreResult.feed]
              });
            }
          })
   ...

我想你正在使用的框架有一个模拟（假设它不一样）。

如何修复 Apollo 客户端不执行任何操作中的分页？

How to fix Pagination in Apollo Client Not Doing Anything?

postgresql

apollo

reactjs

graphql