React Query持久化Mutation登录数据后查询呈inactive状态问题求助

你的代码存在三处关键错误，导致持久化登录数据无法正常读取：

1. 持久化逻辑完全写反 #

在main.jsx的shouldDehydrateQuery配置中，你设置了排除需要持久化的USER查询，导致登录数据根本没被存入localStorage：

// 原错误代码
shouldDehydrateQuery: ({ queryKey }) =>
  findIndex(values(PERSISTED_QUERY_KEYS), (v) => isEqual(v, queryKey)) === -1

这个条件的意思是：只有当queryKey不在PERSISTED_QUERY_KEYS里时，才会持久化该查询。而我们需要的是只持久化USER查询，所以要把判断条件反过来：

// 修复后
shouldDehydrateQuery: ({ queryKey }) =>
  findIndex(values(PERSISTED_QUERY_KEYS), (v) => isEqual(v, queryKey)) !== -1

2. useQuery缺少必填的queryFn #

useAuthenticatedUser.js中的useQuery没有提供queryFn，这会导致查询始终处于inactive/idle状态——React Query无法识别这是一个有效查询，即使缓存中有数据，也无法正确读取或维持激活状态。

你需要添加queryFn，如果后端有获取当前用户信息的接口，直接写请求逻辑；如果不需要后台验证，也可以返回缓存中的数据：

// useAuthenticatedUser.js 修复后
const useAuthenticatedUser = () => {
  const queryClient = useQueryClient();
  const { data, status } = useQuery({
    queryKey: PERSISTED_QUERY_KEYS.USER,
    // 添加queryFn，示例为返回缓存数据（根据实际业务替换为真实接口请求）
    queryFn: () => Promise.resolve(queryClient.getQueryData(PERSISTED_QUERY_KEYS.USER)),
    // 设置staleTime为无穷大，避免自动触发无效请求
    staleTime: Infinity,
  });

  useEffect(() => {
    console.log("useAuthenticatedUser data: ", data);
  }, [data]);

  return {
    authenticatedUserData: data,
    status, // 返回状态用于判断数据是否加载完成
  };
};

3. SignIn中多余的invalidateQueries #

在SignIn.jsx的onSuccess里，你先调用了invalidateQueries，这会尝试重新执行USER查询，但因为缺少queryFn，这一步不仅无效，还可能清空缓存数据。直接去掉即可：

// SignIn.jsx onSuccess修复后
onSuccess: ({ data }) => {
  console.log("Sign in data: ", data);
  // 移除invalidateQueries，直接设置缓存数据
  queryClient.setQueryData(PERSISTED_QUERY_KEYS.USER, data);
  navigate("/home", { replace: true });
},

额外优化：处理持久化异步恢复 #

因为PersistQueryClientProvider从localStorage恢复数据是异步的，初始加载时authenticatedUserData会是undefined，可能导致错误跳转。在Root.jsx中加入状态判断，等待数据恢复完成：

// Root.jsx 修复后
const navigate = useNavigate();
const { authenticatedUserData, status } = useAuthenticatedUser();

useEffect(() => {
  // 等待持久化数据加载完成，避免初始状态错误跳转
  if (status === 'loading') return;
  navigate(authenticatedUserData ? "/home" : "/signIn", { replace: true });
}, [authenticatedUserData, status]);

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