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

Posted 2023-03-10

【中文标题】在使用 graphql 缓存的基于游标的分页中跟踪页码

【英文标题】：Tracking page number in cursor based pagination with graphql cache in use

【发布时间】：2021-07-18 02:04:33

【问题描述】：

我有一个基于 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 条记录时，apollo 客户端不会请求服务器，而是从缓存中加载数据。这很好，因为缓存有助于避免额外的请求，但现在我不知道 74 属于哪个页面记录。

我追求的解决方案；

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

【参考方案1】：

因此，在深入研究了 apollo 和 graphql 游标之后，没有办法对“猜测”特定页面的开始游标做出反应，因此实际上不可能在缓存为游戏中。

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

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

这将确保查询始终从网络中获取并且不会被缓存。