How can you manually update the cache using updateQueryData?

Question

Accepted Answer

`updateQueryData` is a powerful RTK Query utility that allows you to manually modify cached query results without refetching data from the server. It’s useful for keeping the UI in sync with user actions such as adding, editing, or deleting items locally. **1. Import `api.util.updateQueryData`:** Access the utility from your RTK Query API slice. **2. Dispatch the Update:** Call `dispatch(api.util.updateQueryData(endpointName, args, updateCallback))`. **3. Modify the Draft Data:** The callback receives an Immer-powered draft of the cached data, allowing safe direct mutations. import { api } from './services/api';

export const extendedApi = api.injectEndpoints({
  endpoints: (build) => ({
    addPost: build.mutation({
      query: (newPost) => ({
        url: '/posts',
        method: 'POST',
        body: newPost,
      }),
      async onQueryStarted(newPost, { dispatch, queryFulfilled }) {
        try {
          const { data: addedPost } = await queryFulfilled;

// Manually update the cache for getPosts
          dispatch(
            api.util.updateQueryData('getPosts', undefined, (draft) => {
              draft.push(addedPost);
            })
          );
        } catch (error) {
          console.error('Failed to update cache:', error);
        }
      },
    }),
  }),
});

export const { useAddPostMutation } = extendedApi; In this example, after successfully adding a new post, `updateQueryData` appends it directly to the `getPosts` cache. This eliminates the need to refetch data from the server, keeping the UI instantly updated. **- Instant UI Updates:** Reflects local changes immediately without waiting for a new query response. **- Reduced API Load:** Avoids redundant network calls for small updates. **- Fine-Grained Control:** Enables precise cache manipulation for complex state updates. By using `updateQueryData`, you can efficiently manage cached state in RTK Query and maintain a smooth, real-time user experience without unnecessary refetching.

How can you manually update the cache using updateQueryData?

How can you manually update the cache using updateQueryData?

Scenario Questions

Follow-up Questions