使用graphql缓存跟踪基于光标的分页中的页码

问题描述

我有一个基于 GQL 游标的分页，并使用 apollo 客户端库在 react 中实现了前端。这是我当前的服务器响应，在请求下一页或上一页时一切正常。

{
  "data": {
    "users": {
      "pageInfo": {
        "hasNextPage": true,"hasPrevIoUsPage": false,"startCursor": "1","endCursor": "6"
      },"edges": [
        {
          "node": {
            "id": "1"
          }
        },{
          "node": {
            "id": "6"
          }
        }
      ]
    }
  }
}

我遇到的问题是；

我有一个页面计数下拉列表，20、50 和 100，它决定了要在页面上显示的记录数。所以，如果我从每页 50 条记录开始，假设第 74 条记录在第 2 页，当我切换到每页 20 条记录时，阿波罗客户端不会请求服务器，而是从缓存加载数据。这很好，因为缓存有助于避免额外的请求，但现在我不知道 74 属于哪个页面记录。

我想要的解决方案；

我正在寻找一个可以在 react 中处理分页的解决方案/库，这也考虑到了服务器不会总是被联系的事实，因此应该跟踪页面。

解决方法

因此，在深入研究 apollo 和 graphql 游标之后，没有一种方法可以“猜测”特定页面的起始游标，因此当缓存处于空闲状态时，分页实际上不可能放置得很好正在播放中。

出于这个原因，我不得不使用以下内容禁用此特定查询的缓存

const { loading,error,data } = useQuery(GET_GREETING,{
    variables: { ... },fetchPolicy: "network-only"
});

这将确保查询总是从网络中获取并且不被缓存。