使用 React Query 时，如何确保数据在数据集的查询中规范化?

Question

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

我想做正确的一件关键的架构事情是，当我查询或改变Tasks[123]时，我会影响状态中的单个基础对象，而不会到处都遇到重复数据。乍一看，如果查询键设置正确，React Query 似乎非常适合这项工作。然而，在他们的例子中，他们似乎没有这样做(或者我无法理解)。

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

我认为应该重写示例以使用类似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]处理特定细节等。

最好使用查询密钥工厂来创建这些键，如下所示：

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

当然，我在这里谈论的是"大规模"。对于待办事项应用程序来说，这些都不是真正需要的:)