如何在组件卸载后持久化保留react-query的分页筛选参数与查询状态

React Query本身完全支持这个需求，不需要额外引入全局状态管理库，常用的实现方案有两种：

方案1：复用已有查询缓存的参数 #

你所有的用户查询的queryKey都携带了完整的筛选参数，组件初始化时可以直接从React Query的缓存中提取最近一次成功查询的参数作为state初始值：

import { useQuery, useQueryClient } from '@tanstack/react-query'

const UserList = () => {
  const queryClient = useQueryClient()
  const [filters, setFilters] = useState(() => {
    // 提取所有前缀为['users']的缓存查询
    const cachedUserQueries = queryClient.getQueriesData({ queryKey: ['users'] })
    // 倒序查找最近一次有有效数据的查询
    for (let i = cachedUserQueries.length - 1; i >= 0; i--) {
      const [queryKey, cachedData] = cachedUserQueries[i]
      if (cachedData && queryKey[1]?.filters) {
        return queryKey[1].filters
      }
    }
    // 无缓存时返回默认值
    return {
      search_text: undefined,
      page_size: 10,
      page: 1,
    }
  })

  return useQuery({
    queryKey: ['users', { filters }],
    queryFn: () => /* 你的请求逻辑 */,
    keepPreviousData: true,
  })
}

• 优势：完全复用现有缓存逻辑，不需要额外存储数据，只要查询缓存未过期，恢复参数的同时还能直接复用缓存的查询结果，无需重发请求。
• 适用场景：查询缓存保留时间符合你的业务需求，不需要在清理用户查询缓存后仍保留筛选参数。

方案2：单独存储最近使用的筛选参数 #

如果你需要在清理用户查询缓存后仍保留筛选参数，可以用React Query的缓存能力单独存储一份配置项，和业务查询缓存隔离：

import { useQuery, useQueryClient } from '@tanstack/react-query'
import { useEffect } from 'react'

const UserList = () => {
  const queryClient = useQueryClient()
  const [filters, setFilters] = useState(() => {
    // 读取单独存储的筛选参数
    return queryClient.getQueryData(['users', 'last-used-filters']) ?? {
      search_text: undefined,
      page_size: 10,
      page: 1,
    }
  })

  // 筛选参数变化时自动更新存储的配置
  useEffect(() => {
    queryClient.setQueryData(['users', 'last-used-filters'], filters)
  }, [filters, queryClient])

  return useQuery({
    queryKey: ['users', { filters }],
    queryFn: () => /* 你的请求逻辑 */,
    keepPreviousData: true,
  })
}

• 优势：参数存储和业务查询缓存完全隔离，可以单独配置该配置项的缓存过期时间，支持设置为永久保留。
• 适用场景：需要在清理业务查询缓存后仍保留用户的筛选习惯。

注意事项 #

以上两种方案都是基于内存缓存实现，仅支持页面不刷新的前提下组件卸载后重新挂载的参数恢复。如果需要支持页面刷新后仍保留参数，需要额外配合localStorage/sessionStorage实现持久化存储。

内容的提问来源于stack exchange，提问作者Adam Jenkins