重新获取列表反应查询中的项目的最佳实践

Question

大家是怎么处理这个案子的：

• 查询帖子返回列表
• 然后编辑帖子，所以我只需要再次获取该帖子的详细信息

它可能在某种程度上与标准化有关，但我认为我们可以有一些最佳实践来处理这个问题。

也许我们可以有一把钥匙

• 列表：['post']
• 帖子项目：['post', {id: number}]

然后，当我们获取列表时，我们实际上为帖子项目设置了数据，并且只['list']保存了 id。

那有意义吗？或者任何人对此有更好的解决方案

Answer 1

您可以使用预取您的帖子QueryClient.prefetchQuery，然后通过按 id 从缓存中检索单个帖子来显示它们，也可以使用单个查询键执行乐观更新，如下所示：

const queryClient = useQueryClient();

const { mutate } = useMutation(someUpdateFn, {
  onMutate: async (post) => {
    await queryClient.cancelQueries(["posts"]);

    queryClient.setQueryData(["posts"], (posts) => {
      const previousPosts = posts.filter(({ id }) => post.id !== id);

      return [...previousPosts, post];
    });
  },
});

您可以在此处阅读有关乐观更新的更多信息