apply the optimistic Update for whatever arg is provided

[samislam]

I have a table where I can delete users as shown in the image bellow:

The query I used to fetch this data looks as follows:

useGetManyUsersQuery(queryString.stringify({ role: 'client' })) // --->  role=market
// or just basically useGetManyUsersQuery('role=client')

And this is my redux-toolkit query API slice:

import mainApi from './index'
import authSlice from './authSlice'

const userSlice = mainApi.injectEndpoints({
  endpoints: (builder) => ({
    getManyUsers: builder.query({
      query: (APIFeatures = '') => ({
        url: `/users?${APIFeatures}`,
        credentials: 'include',
      }),
      transformResponse: (resBody) => resBody.data,
      providesTags: ['users'],
    }),
    deleteOneUserById: builder.mutation({
      query: (userId) => ({
        url: `/users/${userId}`,
        method: 'DELETE',
        credentials: 'include',
      }),
      onQueryStarted(userId, { dispatch, queryFulfilled }) {
        const patchResult = dispatch(
          mainApi.util.updateQueryData('getManyUsers', /./g, (draft) =>
            draft.filter((doc) => doc.id !== userId)
          )
        )
        queryFulfilled.catch(patchResult.undo)
      },
    }),
  }),
})

export const {
  useGetManyUsersQuery,
  useDeleteOneUserByIdMutation,
} = userSlice

export default userSlice

I want to see an optimistic Update immediately after I delete one of the clients (users) shown in the table, but how? do I have to pass the exact search filter everytime I want to emit an action like delete? Is there a way I can apply the optimistic update for whatever the search filter is used?

You may have noticed above in the code of userSlice --> deleteOneUserById endpoint --> onQueryStarted --> mainApi.util.updateQueryData that I'm writing a regular expression /./. Basically here's the point, I want this argument to match whatever the argument is provided in the query, I don't care.

Exactly here:

is there any way I can omit this argument or to let it match anything ??

[markerikson]

Ah... at least looking at updateQueryData specifically, no. The second argument is the exact cache key, because that's what RTKQ will use to look up a field like state.api.queries["getManyUsers('serializedCacheKeyGoesHere')"]. RTKQ has to have that actual arg value - you can't regex that part.

[markerikson]

Uh... I'm not sure what "new feature" you're asking for here :)

[samislam]

Like to allow a way to ignore the cache key and to update the value in the cache directly, to update the state

[samislam]

or to set the value of all the cache entries to the optimistic update result

[markerikson]

Afraid that's really not feasible, for the reasons I listed above.

You can't just update random pieces of state. RTKQ has to know which cache entry you're asking to update, and to do that it has to know the cache args so it can serialize them and look up the right field in state.

[samislam]

@markerikson , yes thanks to markerikson, I appreciate your attention to the community

[phryneas]

You can use invalidatedBy to get all the endpoints & arguments providing a specific tag. So just have all of those provide the same tag and then get them that way.

[samislam]

Yes that's right, but I want to apply an optimistic update.
To see the changes on the table immediately

[phryneas]

Yes, that's what api.util.selectInvalidatedBy is made for.

[phryneas]

And why exactly do you think you could not do that with the information returned from that approach? I added that api for that.

[samislam]

Ok, let me complete some refactoring stuff in my code then I'll come back to the caching and rtk stuff in just a few days. And I'll try that out