如何使用 zustand 存储查询结果

Question

我想将经过身份验证的用户放入 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(),
}));

这是我得到的错误：

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons.

you can read about it in the react documentation: https://reactjs.org/warnings/invalid-hook-call-warning.html

（为了便于理解，我在这个 post 中更改了一些函数的名称。useMeQuery = useAuthUserQuery）

我明白这个错误，但我不知道如何解决它。

Answer 1

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

const { data } = useAuthUserQuery()

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

——

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

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

如何使用 zustand 存储查询结果

How to use zustand to store the result of a query

reactjs

typescript

react-hooks

react-query

zustand