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

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

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

每个提要 post 都有...

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

每个 postCreator 对象都有...

• userId
• userName
• userBio
• userImageUrl

As suggested by Redux，我目前...

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

这样做的好处是...

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

反应查询/SWR

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

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

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

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

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

解决方法

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

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

• useQuery(['user',id]) 用于用户数据
• useInfiniteQuery(['feed']) 用于帖子的提要

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

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