Antd Table 跳过页面：无数据

Question

我叫一个offset-based paginated GraphQL endpoint. The data then gets displayed in an 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 它尝试访问超出范围的数据并显示 "No Data"。

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

Answer 1

哦。我的。上帝。我自己找到了答案。

问题是我自己合并了数据：

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

然后用这个来展示

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

所以现在我在 Apollo fetchMore 中做的是这样的：

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

现在，一切正常。

Antd Table 跳过页面：无数据

Antd Table Skip page: No Data

pagination

apollo

reactjs

react-apollo

antd