reactjs - 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();

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

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

如何在 RTKQ 的自动重新获取完成后维持微调器动画从删除单个帖子到删除？

谢谢

Answer 1

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