How do you perform optimistic updates in RTK Query?

Question

Accepted Answer

Optimistic updates in RTK Query allow you to immediately reflect a change in the UI before the server confirms it. This provides a smoother user experience by making the app feel more responsive. **1. Use `onQueryStarted`:** Handle side effects when a mutation is triggered. **2. Apply Temporary Cache Updates:** Use `updateQueryData` to optimistically update cached data. **3. Revert on Failure:** If the mutation fails, use the rollback function to undo changes. import { api } from './services/api';

export const extendedApi = api.injectEndpoints({
  endpoints: (build) => ({
    updatePost: build.mutation({
      query: (post) => ({
        url: `/posts/${post.id}`,
        method: 'PUT',
        body: post,
      }),
      async onQueryStarted(post, { dispatch, queryFulfilled }) {
        // Apply optimistic update
        const patchResult = dispatch(
          api.util.updateQueryData('getPosts', undefined, (draft) => {
            const existing = draft.find((p) => p.id === post.id);
            if (existing) Object.assign(existing, post);
          })
        );

try {
          await queryFulfilled;
        } catch {
          // Revert if the mutation fails
          patchResult.undo();
        }
      },
    }),
  }),
});

export const { useUpdatePostMutation } = extendedApi; In this example, the UI is immediately updated when a post is modified. If the server responds with an error, RTK Query automatically rolls back to the previous state. **- Enhanced User Experience:** Changes appear instantaneously in the UI. **- Reduced Perceived Latency:** The app feels faster and more responsive. **- Built-in Rollback:** Safe recovery from failed updates with minimal effort. Optimistic updates make your RTK Query app more interactive while maintaining consistency between client and server data.

How do you perform optimistic updates in RTK Query?

Scenario Questions

Follow-up Questions