有没有办法获取存储在 api slice [RTK Query] 中的所有响应？

Posted 2023-02-22

【中文标题】有没有办法获取存储在 api slice [RTK Query] 中的所有响应？

【英文标题】：Is there any way to fetch all the responses stored in api slice [RTK Query]?

【发布时间】：2021-08-26 18:22:03

【问题描述】：

这是根据页面返回数据的钩子

    const 
        data,
        isFetching,
        isLoading,
        isError,
     = useGetResourceQuery(page, perPage );

这里是 api

    export const api = createApi(
        baseQuery: fetchBaseQuery(
            baseUrl: "http://localhost:3001",
        
        ),
        tagTypes: ["resource"],
        endpoints: (build) => (
            getResource: build.query(
            query: (page = 1, perPage = 20) =>
                `resource?spage=$page&limit=$perPage`,
            ),
        ),
    );
    export const useGetResourceQuery = api

有什么方法可以提取所有查询的状态？ 我想实现基于滚动的分页（无限滚动） 我们需要更新中间件吗？或者有什么方法可以访问状态并将其作为上面的函数公开， 我浏览了文档，但找不到解决方案

我可以使用本地状态并将它们连接起来，但想知道是否可以使用 RTK

谢谢

【问题讨论】：

createApi 方法是我们在本周刚刚发布的 Redux Toolkit 1.6 中新的“RTK 查询”API 的一部分：redux-toolkit.js.org/rtk-query/overview

@Avinash ：你能再举一些你想要完成的例子吗？您希望获得哪些具体数据？具体来说，“所有查询的状态”是什么意思？

@markerikson 我正在尝试实现基于滚动的分页，所以一旦用户滚动到底部，我们需要获取下一页，仍然保持上一页数据，使用生成的钩子，我们只获取当前页面的数据，所以想知道是否有办法访问之前查询的数据。

@markerikson 哇，好的，很酷，我已经纠正了。会重新认识自己。谢谢。

在我脑海中，我不确定这是我们支持 atm 的用例。每个端点+参数组合都被分别获取和缓存，所以如果你从useResourceQuery(1) 转到useResourceQuery(2)，那就是两个独立的响应数据集。可能值得提交功能请求问题。

【参考方案1】：

我认为大多数实现都将“无限滚动”的问题复杂化了很多。 你可以通过退后一步想想你真正需要什么来实现这一点：

当前视图中的数据 向我们滚动到的方向添加一些额外数据

由于我们很懒，不想跟踪我们滚动到哪个方向，所以假设

当前视图中的数据 两个方向都有一点额外的数据。

另外让我们假设查询返回一个类似的响应

  
    offset: 50,
    items: [...]
  

所以假设一页大到足以包含一个屏幕的所有数据，我们最终会得到类似

const currentPage = // something calculated from ScrollPosition

const lastResult = usePageQuery(currentPage - 1,  skip: currentPage === 1 ) // don't fetch pages before 0
const currentResult = usePageQuery(currentPage)
const nextResult = usePageQuery(currentPage + 1)

const combined = useMemo(() => 
  const arr = new Array(pageSize * (currentPage + 1))
  for (const data of [lastResult.data, currentResult.data, nextResult.data]) 
    if (data) 
      arr.splice(data.offset, data.items.length, ...data.items)
    
  
  return arr
, [pageSize, currentPage, lastResult.data, currentResult.data, nextResult.data])

// work with `combined` here

由于组件未引用的请求将在存储中保留 60 秒，因此用户无需进一步请求即可快速向上滚动许多页面 - 而且，可能永远不会再次滚动到的数据将从缓存并在必要时简单地重新获取。