在 post 的无限列表中更新单个 post 创建者的详细信息时，React-Query/SWR 与全局状态（例如 Redux、Zustand）

Question

在我的应用程序中，我有一个分页提要，其中包含从 /feed 端点检索到的 post。

每个 Feed post 都有...

• postId
• postTitle
• postBody
• postCreator（对象）

每个 postCreator 对象都有...

• userId
• userName
• userBio
• userImageUrl

As suggested by Redux，我目前...

• 提取 postCreator 对象并将它们存储在它们自己的全局 usersStore 中（使用 Zustand）
• 用每个 post
中的相关 postCreatorId（引用全局 usersStore 中的用户）替换 postCreator 对象
• 将 post 存储在它们自己的 postsStore 中（使用 Zustand）

这样做的好处是...

• 如果用户更新了他们的信息（例如姓名或简介），我们只需更新他们在 userStore 中的记录，他们的信息将在整个应用程序中更新（他们的 post 创建者信息在feed posts UI，他们在标签栏中的个人资料图片等）
• 我们不必从 /feed 端点重新请求数据来获取包含更新的 postCreator 对象的 posts。特别是考虑到用户可能在那个时间点向下滚动提要，因此我们可能必须从 /feed 端点获取数百个 posts，给我们的后端带来压力。

React-Query/SWR

我最近发现了 React Query 和 SWR，并且听说过很多关于它们如何“消除对全局状态的大部分需求”的信息，但我对它们处理上述情况的方式感到有些困惑。在对 React-Query 做了一些研究之后，我的印象是有几种方法可以处理这个问题...

1. 还是使用全局usersStore和postStore在一个地方更新用户的信息，如上所述。

2. 废弃全局 usersStore，并使用 queryClient.setQueryData 直接在 React-Query 的缓存中为 /feed infiniteQuery 更新 postCreator 信息。但是我们还必须更新返回用户信息的其他查询缓存，如果缓存已过期怎么办？

3. 废弃全局 usersStore，并在用户更新信息时从 /feed 端点重新获取所有 post。但是，如果用户在那个时间点向下滚动提要，我们可能必须从 /feed 端点获取数百个 posts，给我们的后端带来压力。 React-Query infinite query refetch docs

使用 React-Query/SWR 处理此问题的最佳实践方法是什么？

Answer 1

react-query 没有规范化缓存。话虽这么说，但大多数情况下，不需要进行任何规范化 - 只需将 api 发送给你的内容作为你的状态，通过 useQuery 检索它，并摆脱所有 redux / zustand 全局存储否则会保留您的服务器状态。

在您的示例中，我看到两个查询：

• useQuery(['user', id]) 为用户数据
• useInfiniteQuery(['feed']) 用于帖子供稿

呈现您的 feed 时，您可能会为每个条目呈现一个 Post 组件，该组件又可以调用检索用户数据的 useQuery。如果您担心正在进行的 n+1 次查询，并且您实际上已经通过提要传送了用户数据，您可以在 onSuccess 的回调中手动填充用户缓存 feed 查询 - 只需获取用户数据并将其复制到用户缓存。

这样一来，用户缓存就成为了用户数据的唯一真实来源，用户数据也会根据提要查询进行更新。