RTK 查询支持 `isLoading` 以在缓存失效后自动重新获取

Question

很难为这个问题找到好的答案/解决方案。

我有一个 POSTS 列表组件，允许删除单个 POST 行。

我正在使用工厂 queryMutation 的运行进行删除：

实施

deletePostById: build.mutation<{ success: boolean; id: number }, number>({
  query(id) {
    return {
      url: `post/${id}`,
      method: 'DELETE',
    }
  },
  invalidatesTags: (result, error, id) => [{ type: 'Posts', id }],
})

用法

  const [deletePost, { isLoading: isDeleting, error: deletionError }] = useDeletePostByIdMutation();

问题描述
在列表组件中，单个行有一个删除 Post 的图标 - 而 isDeleting 我正在显示一个微调器，它也显示得很好 - 但是，当 Post 被删除时RTKQ 的自动重新获取开始从服务器获取现在更新的 Posts - 但是 isDeleting 不再正确。这留下了一小段时间 window，其中 Post 行没有显示任何微调器，但也没有从 Posts 列表中删除。

一旦所有 Post 的重新获取数据成功返回，删除的 Post 行将从列表中删除。

我如何维持微调动画从删除个体Post到RTKQ自动重新获取完成后的移除？

谢谢

Answer 1

您可以在列表查询中使用 isFetching 而不是 isLoading，这仅适用于初始请求，不适用于重新获取。

RTK 查询支持 `isLoading` 以在缓存失效后自动重新获取

RTK Query sustain `isLoading` for auto-refetching after cache invalidation

reactjs

rtk-query