React Query如何在浏览器刷新、页面离开时保留查询与userData

1. 刷新后保留React Query的inactive查询数据 #

React Query默认缓存存储在运行内存中，页面刷新时内存会被清空，且inactive状态的缓存默认会在5分钟后被回收，要持久化缓存直接用官方持久化方案即可：

• 安装React Query对应的持久化依赖包
• 初始化QueryClient时调大cacheTime，保证缓存留存时长符合业务需求，默认5分钟的时长过短，不适合持久化场景
• 基于本地存储创建持久化器，用持久化Provider包裹应用根组件

参考配置代码：

import { QueryClient } from '@tanstack/react-query'
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'

// 初始化QueryClient
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      cacheTime: 1000 * 60 * 60 * 24, // 缓存留存24小时，可按需调整
      staleTime: 5 * 60 * 1000, // 数据5分钟内视为新鲜，不重复发起请求，可按需调整
      refetchOnWindowFocus: false, // 按需配置窗口聚焦时是否重拉
    },
  },
})

// 基于localStorage创建持久化存储器
const localStoragePersister = createSyncStoragePersister({
  storage: window.localStorage,
  key: 'RQ_CACHE', // 本地存储的key名，可自定义
})

// 根组件替换原有的QueryClientProvider
root.render(
  <PersistQueryClientProvider 
    client={queryClient} 
    persistOptions={{ persister: localStoragePersister }}
  >
    <App />
  </PersistQueryClientProvider>
)

配置完成后，所有未超过cacheTime的查询缓存（无论active/inactive状态）都会在页面刷新后从本地存储自动恢复，不会丢失。
注意：你现有代码中useQuery的queryKey只写了'user'，必须带上动态参数userId，调整为['user', userId]，否则不同userId对应的用户数据会互相覆盖；同时加上enabled: !!userId配置，在userId不存在时不发起请求，匹配getUser函数的判空逻辑。

2. 页面跳转、刷新时保留Zustand中的userData #

单页应用内部路由跳转时Zustand状态本来就不会丢失，只有页面刷新时内存清空才会导致状态消失，直接用Zustand官方提供的persist中间件做状态持久化即可：
在定义store时引入persist中间件，指定要持久化的字段和存储介质：

import { create } from 'zustand'
import { persist, createJSONStorage } from 'zustand/middleware'

export const useStore = create(
  persist(
    (set) => ({
      userData: null,
      // 其余store状态、方法按原有逻辑写
    }),
    {
      name: 'APP_GLOBAL_STORE', // 本地存储的key名，可自定义
      storage: createJSONStorage(() => localStorage),
      // 只持久化userData字段，避免冗余存储
      partialize: (state) => ({ userData: state.userData }),
    }
  )
)

配置完成后，userData的变更会自动同步到localStorage，页面刷新时会自动恢复存储值，无需额外编写读取逻辑。

额外优化建议 #

如果已经对React Query做了持久化，其实不需要再把userData同步到Zustand存储：所有组件只要用相同的queryKey['user', userId]调用useQuery，就能直接拿到缓存的用户数据，React Query会自动处理缓存、重拉、状态同步逻辑，减少重复维护两份状态带来的一致性问题。

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