How can I implement optimistic updates with Redux Toolkit Query?

How can I implement optimistic updates with Redux Toolkit Query?

To implement optimistic updates with Redux Toolkit Query, you can use the updateQueryData method in your mutation. This allows you to optimistically update the cache before the server response.

Can you give me a code example of that?

Sure! Here's a simple example:

const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    updatePost: builder.mutation({
      query: (post) => ({
        url: `posts/${post.id}`,
        method: 'PUT',
        body: post,
      }),
      async onQueryStarted(post, { dispatch, queryFulfilled }) {
        const patchResult = dispatch(
          api.util.updateQueryData('getPosts', undefined, (draft) => {
            const index = draft.findIndex(p => p.id === post.id);
            if (index !== -1) {
              draft[index] = post;
            }
          })
        );
        try {
          await queryFulfilled;
        } catch {
          patchResult.undo();
        }
      },
    }),
  }),
});

This code updates the post in the cache optimistically.

What happens if the server request fails?

If the server request fails, the patchResult.undo() method is called, which reverts the optimistic update, ensuring your UI reflects the actual state from the server.