相关疑难解决方法(0)

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

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

我正在使用常规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但不再正确。这会留下一个小时间窗口，其中“帖子”行不显示任何微调器，但也尚未从“帖子”列表中删除。

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

如何维持旋转动画从删除单个帖子到 RTKQ 自动重新获取完成后删除为止？

我为 RTK 查询定义了以下 API：

export const postsApi = createApi({
  reducerPath: "postsApi",
  baseQuery: fetchBaseQuery({ baseUrl: 'https://myservice.co/api/v2/' }),
  tagTypes: ["Posts"],
  endpoints: (builder) => ({
    getAllPosts: builder.query({
      query: () => ({ method: "GET", url: "/posts" }),
      transformResponse: (response) => response.posts,
      providesTags: (result) =>
        result
          ? [
              ...result.map(({ id }) => ({ type: "Posts", id })),
              { type: "Posts", id: "LIST" },
            ]
          : [{ type: "Posts", id: "LIST" }],
    }),
    updatePost: builder.mutation({
      query: ({ postId, ...body }) => ({
        url: `/posts/${postId}`,
        method: "POST", …