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 ??
