React Query：更改查询参数时如何处理条件重新渲染答案

【问题标题】：ReactQuery: how to deal with conditional re-rendering when changing parameters of a queryReact Query：更改查询参数时如何处理条件重新渲染
【发布时间】：2021-07-20 16:01:21
【问题描述】：

我想在组件中实现 无限滚动，但我的后端没有“当前”端点，这意味着无限查询的实际版本是不可能的（如据我了解）。

在我的组件中，我使用有状态变量作为 queryKey 参数创建了一个查询：

useQuery([`posts_paginated`, { page }] {
    // request to  http://.../posts?_sort=createdAt&_order=desc&_page=${page}&_limit=10
}

我的问题是 修改查询键会创建一个新的查询实例，触发响应对象中的 isLoading 布尔值，并且组件的呈现值取决于：

return (IsLoading) ? <LoadingComponent /> : <ViewComponent />

这意味着当设置页面变量时，ViewComponent 被卸载，结果我失去了滚动条的当前位置。

我尝试使查询无效，以便仅触发 isFetching，但我认为由于查询的回调闭包已经设置，因此无法以这种方式更改参数值（我无法让它运行除了初始值）。

我可以使用 isLoading 停止渲染，或者我可以开始在某种状态下显式管理我的滚动条位置，但是 我想知道是否有一种明显的方法可以使用 react-query 来实现我所需要的强>。

【问题讨论】：

标签： reactjs pagination scrollbar react-query

【解决方案1】：

这样的分页可以通过设置keepPreviousData 属性来实现。当键更改时，它将保留返回为data 的前一个查询键的数据以及isPreviousData 布尔标志，以便您可以禁用下一个按钮或根据它显示背景加载指示器。然后查询将始终保持success 状态，数据到达时将直接转换为新数据。

这在pagination docs中也有描述

另外，我认为您可以获得一个“真正的”无限查询，即使后端是分页的。 getNextPageParam 只需要 something 从函数返回，然后可以“注入”到 queryFn 中。如果您只想返回缓存中当前页面的count 并每次将其增加一 - 我认为这没有什么不好:)

【讨论】：

使用我的代码并在 true 上插入 keepPreviousData 即可立即工作。我无法使infiniteQuery 工作。我怀疑我的文档的散列 ID 与游标逻辑不兼容。