-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Description
I'm using "@reduxjs/toolkit": "^2.9.0"
and following the pessimistic updates example.
That's how my updateItem
function defined in api:
updateItem: build.mutation<ItemResponse, ItemUpdatePayload>({
query: (payload) => {
const { id, ...body } = payload;
return {
url: `/items/${id}`
method: 'PUT',
body,
};
},
async onQueryStarted ({ id }, { dispatch, queryFulfilled }) {
try {
const result = await queryFulfilled;
// pessimistic update
dispatch(
api.util.updateQueryData('getItem', id, (draft) => {
Object.assign(draft, result.data);
}),
);
} catch (error) {
console.error('Update Item error:', error);
}
},
invalidatesTags: ['Items'], // i've tried do disable this but it doesn't matter, this instruction invalidates the cache of the item list
}),
That's how i use the mutation hook in react component:
const [updateItem, { isLoading, isSuccess }] = useUpdateItemMutation();
console.debug('isSuccess:', isSuccess); // ← this always logs `false` value
The cache of getItem
is getting updated correctly, but the isSuccess
flag doesn't change with pessimistic updates at all, it's always false
, so I unfortunately can't rely on it to show visual feedback on successful update. The workaround is to track it manually in local component state after the await updateItem(values).unwrap();
call, but i'd obviously prefer to avoid it.
On other hand, isSuccess
changes as expected when i use optimistic updates with code from another documentation example like this:
updateItem: build.mutation<ItemResponse, ItemUpdatePayload>({
query: (payload) => {
const { id, ...body } = payload;
return {
url: `/items/${id}`
method: 'PUT',
body,
};
},
async onQueryStarted ({ id, ...patch }, { dispatch, queryFulfilled }) {
// Optimistic update
const patchResult = dispatch(
api.util.updateQueryData('getItem', id, (draft) => {
Object.assign(draft, patch);
}),
);
try {
await queryFulfilled;
} catch (error) {
patchResult.undo();
console.error('Update Item error:', error);
}
},
invalidatesTags: ['Items'],
}),
FWIW, i've tried to switch versions down to 2.1.0 but the issue is still there. So i'm wondering if something wrong with example in documentation? or anything else i can try to make it work?