CODEWITHSUNDEEP
reactjsrtk-query
flaky
flaky

Reputation: 7404

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

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

Upvotes: 7

Views: 1598

Answers (1)

phry
phry

Reputation: 44186

You can use isFetching on the list query instead of isLoading, which is only true for the initial request, not refetches.

Upvotes: 4

Related Questions