卸载后保持反应查询分页答案

【问题标题】：Persist react-query pagination after unmount卸载后保持反应查询分页
【发布时间】：2022-01-06 19:05:27
【问题描述】：

所以我有一个如下所示的分页查询：

  const [filters, setFilters] = useState({
    search_text: undefined,
    page_size: 10,
    page: 1,
  });

  return useQuery({
    queryKey: ['users', { filters }],
    queryFn: () => /* some fetch */,
    keepPreviousData: true,
  });

我的问题是我想知道最后使用的过滤器，所以当我卸载我的组件时，我可以返回到它并拥有完全相同的数据和过滤器。显然，如果我将过滤器保持为状态，我会在组件卸载时失去此状态。我想知道 react-query 是否能以某种方式帮助我解决这个问题？

【问题讨论】：

标签： react-query

【解决方案1】：

因为这是一个客户端状态问题，react-query 在这里帮不上忙。您需要将该客户端状态向上移动到父组件、像 zustand 这样的全局客户端状态管理器，或者最终是 url - 这对于搜索查询和分页非常有效，因为它还免费为您提供可共享的 url。

【讨论】：

从不考虑将状态移动到 URL，这是个好主意。