1

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

每个饲料post都有...

  • postId
  • postTitle
  • postBody
  • postCreator（目的）

每个postCreator对象都有...

  • userId
  • userName
  • userBio
  • userImageUrl

正如 Redux 所建议的，我目前...

  • 提取postCreator对象并将它们存储在自己的全局中usersStore（使用 Zusand）
  • 在每篇文章中用相关的（在全局中引用用户）替换postCreator对象postCreatorIdusersStore
  • 将帖子存储在自己的位置postsStore（使用 Zusand）

这样做的好处是...

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

反应查询/SWR

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

  1. 如上所述，仍然使用全局usersStore和在单个位置更新用户信息。postStore

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

  3. 废弃 global usersStore，并在用户更新其信息时从 /feed 端点重新获取所有帖子。但是，如果用户在那个时间点向下滚动了提要，我们可能不得不从 /feed 端点获取数百个帖子，给我们的后端带来压力。React-Query 无限查询重新获取文档

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

4

1 回答 1

3

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

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

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

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

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

于 2021-04-05T18:04:17.667 回答