rtk查询持续`iSloading`用于自动取回缓存无效后自动取回

发布于 2025-02-03 01:05:25 字数 902 浏览 0 评论 0原文

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

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

我正在使用Mill QUERYMOUNT用于删除目的：

实施

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不再是正确的。这留下了一个很小的时间窗口，其中帖子行未显示任何旋转器，但也没有从帖子列表中删除。

一旦所有帖子的补充数据成功返回，已删除的帖子行就将从列表中删除。

我如何维持旋转器动画，从删除单个帖子到自动取回RTKQ完成后删除？

Thanks

原文

Having a hard time finding a good answer/ solution for this problem.

I have a POSTS list component that allows to delete individual POST rows.

I'm using a run of the mill queryMutation for deletion purposes:

IMPLEMENTATION

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

USAGE

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

PROBLEM DESCRIPTION
Within the list component the individual row has an icon to delete that Post - while isDeleting I'm showing a spinner, which is also showing just fine - however, when the Post is deleted the auto-refetching of RTKQ kicks in to get the now updated Posts from the server - isDeleting is no longer true though.
This leaves a small time window in which the Post row is not showing any spinner but also is not removed yet from the Posts list.

Once the refetched data of all Posts has successfully returned the deleted Post row gets removed from the list.

How can I sustain the spinner animation from deleting the individual Post till the removal after the automatic refetching of RTKQ has finished?

Thanks

分享到QQ

分享到微博