使用 React Query 时，我如何确保跨数据集查询对数据进行规范化？

Question

我正在编写一种项目管理应用程序，它将包含大量“任务”，其中包含许多属性，这些属性将在整个应用程序中呈现。我正在考虑使用 React Query 预取、在本地缓存并从服务器更新此数据。

我想做对的一个关键架构事情是，当我查询或改变 Tasks[123] 时，我会影响状态中的单个底层对象，而不会陷入到处都是重复数据的困境。乍一看，如果 Query Keys 设置正确，React Query 似乎非常适合这项工作。但是在他们的示例中，他们似乎没有这样做（或者我不明白）。

在他们的 Basic Example 中，他们在开始时获取一些 Posts 并使用 queryClient.getQueryData(["post", post.id]) 进行查询。据我所知，如果我查看示例中提供的 ReactQueryDevtools window，这会导致数据重复。

我认为应该重写示例以使用 queryClient.getQueryData(["posts", {id: post.id} ]) 之类的内容是否正确？

Answer 1

这确实是我设置查询键的方式，所以我可以这样做：queryClient.invalidateQueries(['posts']) 并且它会使所有查询键无效。但有时，您需要更精细的控制。如果是这样的话，我会这样做：

["posts", "list", { filter: "all" }]
["posts", "list", { filter: "published" }]
["posts", "detail", 1]
["posts", "detail", 2]

这样，我仍然可以用 ["posts"] 处理一切，用 ["posts", "list"] 处理所有列表，用 ["posts", "detail"] 处理所有细节和特定的详细信息 ["posts", "detail", id] 等

使用 queryKeyFactory 来创建这些键也是一种很好的做法，例如：

const postKeys = {
  prefix: "posts",
  lists: [postKeys.prefix, "list"],
  list: (filter) => [...postKeys.lists, { filter }],
  details: [postKeys.prefix, "detail"],
  detail: (id) => [...postKeys.details, id]
}

当然，我这里说的是“大规模”。 None 一个待办事项应用程序确实需要它 :)

使用 React Query 时，我如何确保跨数据集查询对数据进行规范化？

When using React Query how do I make sure data is normalized across queries of a dataset?

reactjs

react-query