时间戳

首页 > 解决方案 > 如何使用 zustand 存储查询结果

reactjs - 如何使用 zustand 存储查询结果

问题描述

我想将经过身份验证的用户放在 zustand 商店中。我使用 react-query 获得了经过身份验证的用户，这会导致一些问题。我不确定我为什么要这样做。我希望所有与身份验证相关的东西都可以在一个钩子中访问，所以我认为 zustand 是一个不错的选择。

这是获取身份验证用户的钩子：

const getAuthUser = async () => {
  const { data } = await axios.get<AuthUserResponse>(`/auth/me`, {
    withCredentials: true,
  });
  return data.user;
};

export const useAuthUserQuery = () => {
  return useQuery("auth-user", getAuthUser);
};

我想把 auth 用户放在这家商店：

export const useAuthStore = create(() => ({
  authUser: useAuthUserQuery(),
}));

这是我得到的错误：

错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能由于以下原因之一而发生。

您可以在反应文档中阅读它： https ://reactjs.org/warnings/invalid-hook-call-warning.html

在此处输入图像描述 （为了便于理解，我在这篇文章中更改了一些函数的名称。useMeQuery = useAuthUserQuery）

我理解错误，但我不知道如何修复它。

标签： reactjstypescriptreact-hooksreact-queryzustand

解决方案

这里的误解是您不需要将来自反应查询的数据放入任何其他状态管理解决方案中。React 查询本身就是一个全局状态管理器。你可以这样做：

const { data } = useAuthUserQuery()

在需要数据的每个组件中。React 查询将自动尝试通过后台重新获取来更新您的数据。如果您的资源不需要它，请考虑设置一个staleTime.

——

话虽这么说，如果您真的想将来自 react-query 的数据放入 zustand，请在 zustand 中创建一个 setter 并在查询的 onSuccess 回调中调用它：

useQuery(key, queryFn, { onSuccess: data => setToZustand(data) })

推荐阅读