Question

我叫offset-based paginated GraphQL endpoint。然后，数据将显示在Antd Table中。

现在，当单击页面中的所有内容时，一切都会按预期进行：数据将被获取并附加到先前获取的数据中。但是，如果跳过页面，则会触发相同的例程。

例如

const previousData = [10, 11, 12]; // we are on page 1
// fetchMore && updateQuery, going to page 3 directly
const updatedData = [10, 11, 12, 30, 31, 32];

// Antd Table tries to access data on page 3, therefore at index behind item 32,
// as the page 3 items are in the place of page 2 items

这是某种预期的行为，到目前为止，我只对第一页和第三页上的数据感兴趣，而不对第二页感兴趣。但是，Antd Table尝试通过跳过前两页来显示第三页上的数据，同时假设每页的页面大小为3。因此，pageSize * currentOffset = 3 * 1 = 6尝试访问超出范围的数据并说“无数据”。

有没有办法绕过它？我在做什么错了？

Answer 1

哦。我的神。我自己找到了答案。

问题是我自己像这样合并数据：

const mergedData = [...previousData, ...updatedData]

然后用于显示。

显然，这不是要走的路。宁可完全替换现有数据。

所以现在我在阿波罗fetchMore中正在做的是这样：

updateQuery: (previousResult, { fetchMoreResult }) => fetchMoreResult,

现在，一切正常。

Antd表格跳过页面：无数据

1 个答案: