react-query - 在 React-Query 中登录后将状态分配给不同的组件

Question

一旦用户发送登录请求，他就会通过 Graphql 响应接收数据，包括他的设置、通知和其他一些分布在某些组件中的东西。目前，我将用户的登录状态存储在布尔值中，一旦这是真的，我将在每个需要服务器状态的组件中发送请求。这似乎非常低效。有没有办法通过简单地使用最初输入的数据来实现这一点？

标签： react-query

Answer 1

我假设登录是一个返回登录数据的突变。我会对 /user/settings 和 /user/notifications 进行关联查询，或者可能只是一个通用的 /user/data，它可以为您提供有关用户的所需信息。

然后，登录后的突变可以通过简单地写入 queryCache 来更新该查询（请参阅官方文档）。然后，只要您需要，我就会在该查询上调用 useQuery，它会为您提供数据。如果您不想进行后台重新获取，请设置staleTime: 0，您将始终从缓存中获取数据，这些数据是您在突变后放在那里的。将 useQuery 调用提取到自定义挂钩将使其变得简单，就像说：

const userData = useUserData()

无论您需要它。

至于登录状态，一些应用程序更喜欢在顶部进行登录/未登录切换以避免这种情况，例如：

isLoggedIn ? <MyAppForLoggedInUsers /> : <MyPublicApp />