Skip to content

Pessimistic Updates: isSuccess is always false #5093

@anotheri

Description

@anotheri

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    RTK-QueryIssues related to Redux-Toolkit-Query

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions