redux-toolkit icon indicating copy to clipboard operation
redux-toolkit copied to clipboard

isSuccess always false when i use onQueryStarted and updateQueryData in an optimistic update

Open fhanggi opened this issue 7 months ago • 0 comments

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>;
  }

fhanggi avatar Jun 28 '24 02:06 fhanggi