Optimistic Updates and Polling

Patch the cache, undo on failure

For instant feedback, a mutation's onQueryStarted(arg, { dispatch, queryFulfilled }) can patch cached data with api.util.updateQueryData(endpoint, args, draft => ...), which returns a patch result. If await queryFulfilled throws, call patchResult.undo() to roll back. For data that changes on the server without user action, pass { pollingInterval: ms } to a query hook; other options include refetchOnFocus and refetchOnReconnect (which need setupListeners(store.dispatch)) and skip to delay a query until its argument is ready.

Optimistic like and polling

An endpoint and its usage.

likePost: builder.mutation<void, number>({
  query: (id) => ({ url: `posts/${id}/like`, method: 'POST' }),
  async onQueryStarted(id, { dispatch, queryFulfilled }) {
    const patch = dispatch(
      api.util.updateQueryData('getPost', id, (draft) => {
        draft.likes += 1; // assumes Post has a likes: number field
      })
    );
    try {
      await queryFulfilled;
    } catch {
      patch.undo(); // roll back if the server rejected it
    }
  },
}),

// component: refresh every 30 seconds while mounted
const { data } = useGetPostQuery(id, { pollingInterval: 30_000, skip: !id });

Pessimistic is fine too

Optimistic updates add complexity. For actions that often fail or where correctness matters more than speed (payments), wait for the server and then update or invalidate.

त्वरित जाँच: How do you roll back an optimistic cache patch when the request fails?

• Reload the page
• Call undo() on the patch result returned by dispatching updateQueryData
• Dispatch api.util.resetApiState() always
• Throw from the reducer