5. How would you implement optimistic UI updates for POST/DELETE using RTK Query or Thunk?

Question

Accepted Answer

Optimistic UI updates make the application feel faster by updating the UI immediately before the server confirms the change. If the request fails, the state is rolled back to its previous value. Both RTK Query and createAsyncThunk can handle optimistic updates, though RTK Query simplifies the process through its built-in `onQueryStarted` lifecycle method. **1. Use onQueryStarted:** Inside a mutation endpoint, perform temporary cache updates before the server response. **2. Update Query Data:** Use `api.util.updateQueryData()` to modify the cache for the relevant query. **3. Rollback on Error:** Use the `patchResult.undo()` method if the mutation fails to revert the UI state. import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const postsApi = createApi({
  reducerPath: 'postsApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  tagTypes: ['Posts'],
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => '/posts',
      providesTags: ['Posts']
    }),
    deletePost: builder.mutation({
      query: (id) => ({ url: `/posts/${id}`, method: 'DELETE' }),
      async onQueryStarted(id, { dispatch, queryFulfilled }) {
        const patchResult = dispatch(
          postsApi.util.updateQueryData('getPosts', undefined, (draft) => {
            return draft.filter((post) => post.id !== id);
          })
        );
        try {
          await queryFulfilled;
        } catch {
          patchResult.undo(); // rollback on failure
        }
      }
    })
  })
}); **1. Dispatch an Immediate State Change:** Update the local slice before the API call resolves. **2. Handle Errors Gracefully:** Revert to the old state in the `rejected` reducer case if the request fails. import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

export const deletePost = createAsyncThunk('posts/deletePost', async (id) => {
  const res = await fetch(`/api/posts/${id}`, { method: 'DELETE' });
  if (!res.ok) throw new Error('Delete failed');
  return id;
});

5. How would you implement optimistic UI updates for POST/DELETE using RTK Query or Thunk?

Implementing Optimistic UI Updates in RTK Query and Thunks

5. How would you implement optimistic UI updates for POST/DELETE using RTK Query or Thunk?

Implementing Optimistic UI Updates in RTK Query and Thunks

Scenario Questions

Follow-up Questions