Help me do Optimistic Updates in better way:

[yaman3bd]

hey, I have a comments list, when the user adds a new comment I want to update the list immediately before I send the API request,
and when the API response with an error I just simply undo the update, but the thing that concerns me is that each comment has the user and its unique id which I won't have until the I get the API response so I am assuming that the comment user is already the auth user and the id is a TEMP_ID and update the list according to that and when I have the API response what I'm doing is that:

• find the comment index that has the same id as theTEMP_ID
• update it with the real API response

here is how I am doing it:

import { SubmitHandler } from "react-hook-form";

import { updateCommentQueryData } from "@/store/slices/api/commentSlice";
import { APIActionResponse, APIResponse, Comment } from "@/types";
import { randomUUID } from "@/utils";

const onSubmit: SubmitHandler<IFormInputs> = async (data) => {
  //store the id here to use after the API response
  const TEMP_ID = randomUUID();

  //do my update here
  const update = dispatch(
    updateCommentQueryData(
      "fetchComments",
      {
        slug: slug as string,
        chapterId: chapterId as string,
        contentId: contentId as string
      },
      (draft) => {
        (draft as APIResponse<Comment>).data.push({
          user: auth,
          content: data.content,
          created_at: new Date().toISOString(),
          updated_at: new Date().toISOString(),
          id: TEMP_ID
        });
      }
    )
  );

  //send the API call
  const submitComment = (await createComment({
    slug: query.slug as string,
    chapterId: query.chapterId as string,
    contentId: query.contentId as string,
    content: data.content
  })) as APIActionResponse<Comment>;

  //undo if there is an error
  if (displayErrors(submitComment)) {
    update.undo();

    return;
  }

  //update the comment with the real id
  dispatch(
    updateCommentQueryData(
      "fetchComments",
      {
        slug: slug as string,
        chapterId: chapterId as string,
        contentId: contentId as string
      },
      (draft) => {
        const index = (draft as APIResponse<Comment>).data.findIndex((c) => c.id === TEMP_ID);

        (draft as APIResponse<Comment>).data[index] = {
          ...submitComment.data.data
        };
      }
    )
  );

  displaySuccess(submitComment);

  reset({ content: "" });
};

so my question is: updating the list in this way is it right or there is something better I can do?

[Dovakeidy]

You can use a better approach directly in the definition of your endpoints.
Here's a simplified example of how I'd do it.

import { rootApi } from "../api";
import { nanoid } from "@reduxjs/toolkit";

export const commentApi = rootApi.injectEndpoints({
  tagTypes: ['Comments'],
  endpoints: (builder) => ({
    createComment: builder.mutation({
      query: (data) => ({
        url: `comments`,
        type: 'POST',
        data
      }),
      async onQueryStarted(data, { dispatch, queryFulfilled }) {
        // (Optionnal) RTK is re-exporting the nanoid() helper function. You can use this to generate an id
        const TEMP_ID = nanoid();

        // Update the query data with a temporary identifier
        const patchResult = dispatch(
          commentApi.util.updateQueryData('fetchComments', null, (draft) => {
            draft.push({
              id: TEMP_ID,
              user: auth,
              content: data.content,
              created_at: new Date().toISOString(),
              updated_at: new Date().toISOString(), 
            });
          })
        );

        try {
          // Wait for the API response
          const result = await queryFulfilled;

          // Update the query data with the correct id from the API success response
          dispatch(
            commentApi.util.updateQueryData('fetchComments', null, (draft) => {
              const index = draft.findIndex(item => item.id === TEMP_ID);

              if (index !== -1) {
                draft[index] = result.data;
              }
            })
          );
        } catch {
          // Undo the patch if the API call failed
          patchResult.undo();

          // (Optionnal) invalidate the cache
          dispatch(commentApi.util.invalidateTags(['Comments']));
        }
      },
    }),
    fetchComments: builder.query({
      providesTags: () => ['Comments'],
      query: () => `comments`,
    }),
  }),
});

[mstosio]

In rtk-query is there any more elegant way to update draft instead of
const index = draft.findIndex(item => item.id === TEMP_ID); if (index !== -1) { draft[index] = result.data; }
??

Without rtk-query there was:

• updateOne method when you were using entityAdapter
• in oldschool redux without toolit you could basically store elements by id and access it directly without loop
  resources[item.id] = result data

[EskiMojo14]

@mstosio if you want to, you can still make your array into a normalized state.

[mstosio]

@EskiMojo14 thank you for response.

I wonder if there is option to do this using queryFn. I couldn't find any examples.

[EskiMojo14]

queryFn doesn't use transformResponse, you would just transform the data before you return it.