RTK Query, manage spinner on a row of a table after an invalidate tag triggered by a mutation

Question

I have integrated RTK query in a project of mine and I'm trying to understand how to handle the UI for my tables. I already had read other StackOverflow questions (e.g. that one) but I wasn't able the find the answer to my use case.

My table rows have action on them so the user can edit or delete the row item directly from the table page.

I have the following RTK Query hooks that I'm using:

// To fetch the data that populates the table. 
// 'isLoading' is used to show the spinner all over the table
const {data, isLoading} = useGetItemsQuery()

// To trigger the edit of the item.
const [triggerEditItem] = useEditItemMutation({fixedCacheKey: 'edit-item-' + data.id})

// To get when the editing is happening 
const [, {isLoading: isEditing}] = useEditItemMutation({fixedCacheKey: 'edit-item-' + data.id})

Here blow is my slice:

serviceApi.injectEndpoints({
  endpoints: (builder) => ({
    getItems: builder.query({
      providesTags: [TAGS.ITEMS],
      query: // The query,
    }),

    editItem: builder.mutation({
      invalidatesTags: [TAGS.ITEMS],
      query: // The query,
    }),
})

The editItem invalidate the TAGS.ITEMS tag so the re-fetch of the getItems is done. I'm doing that way because I read from the documentation:

For most cases, in order to receive up to date data after a triggering a change in the backend, you can take advantage of cache tag invalidation to perform automated re-fetching, which will cause a query to re-fetch its data when it has been told that a mutation has occurred which would cause its data to become out of date. In most cases, we recommend using automated re-fetching as a preference over manual cache updates, unless you encounter the need to do so.

The component that implements the rows of my table use the third hook I wrote above so it can show and hide the spinner accordingly.

My problem is, I don't want to have the spinner all over the table when I re-fetch due to an invalidate tag (i.e. I don't want to use the isFetching boolean for the spinner of my table) but I want the spinner only on the modified row until the re-fetch is finished.

There is a way to do that with the automatic re-fetch or this is one of the scenarios where I have to manually update the cache to get the behaviour I want ?

Wiley

redux.js.org/tutorials/essentials/… – Mycostatin

@DemyanNetlyukh can you explain better please ? I read that document page but I still can't understand how leverage tag invalidations to fix my problem. I only have a getAll endpoint, I don't have a getByID endpoint. Invalid a specific tag doesn't allow me to keep the spinner running until the refetch is done. – Wiley

Answer 1

This should be your answer:

Redux RTK Query: Invalidating only single element from list

by phry himself:

No. RTK-Query is a document cache (full response = document), not a normalized cache. It does not know anything about the contents of the cached responses and their structure - and it will never try to "stitch" anything in there by itself.

You can do that manually with an optimistic update, but everything RTK-Q does automatically is refetch, which should be more than enough in most use cases.

Tortfeasor