redux-toolkit
redux-toolkit copied to clipboard
isSuccess always false when i use onQueryStarted and updateQueryData in an optimistic update
Hello
I have the below mutation and am trying to do an optimistic update. (i am using the latest version of RTK) When i remove the onQueryStarted code then isSuccess is true in my component. As soon as i add the onQueryStarted and the updateQueryData is successful then isSuccess is never true in my component. Has anyone seen this behaviour? Anything i have to do in the onQueryStarted to make isSuccess true? i can see that the api call succeeds on the network tab. i can also see the data updated in redux devtools. i am using lodash merge to update the data. Any tips would be greatly appreciated. Thank you Fabian
editLocationDetailUnitNumber: builder.mutation({
query: ({ id, locationDetail }) => {
return {
url: `/${TABLE_NAME}/UnitNumber/${id}`,
method: "PATCH",
body: locationDetail
};
},
onQueryStarted: async ({ id, ...patch }, { dispatch, queryFulfilled }) => {
const patchResult = dispatch(
baseApi.util.updateQueryData("fetchLocationDetail", `${id}`, (draft) => {
merge(draft, {
address: patch.locationDetail.address,
location: patch.locationDetail.location
});
})
);
try {
await queryFulfilled;
} catch (error) {
patchResult.undo();
}
}
})
here are parts of the code in my component
const [
editLocationDetailUnitNumber,
{
isLoading: isEditingLocationDetailUnitNumber,
isSuccess: isSuccessLocationDetailUnitNumber,
isError: isErrorLocationDetailUnitNumber
}
] = useEditLocationDetailUnitNumberMutation();
//i call this in an event
editLocationDetailUnitNumber({ id: newLocationDetail.location.id, locationDetail: newLocationDetail })
//i have this in the component for now just to see if isSuccess is ever true.
if (isSuccessLocationDetailUnitNumber) {
return <div>Saved!</div>;
}