optimistic-update-rtk.ts

// endpoints
query,
transformResponse,
async onQueryStarted({ answerId, themeIds, blockUuid, themes = [] }, { dispatch, queryFulfilled, getState }) {
  // this is the way we can get the serialized cache query
  const [selectedCacheName] = unmoderatedResultsApi.util.selectInvalidatedBy(getState(), [
    {
      type: 'BlockAnswers',
      id: blockUuid,
    },
  ]);

  if (!selectedCacheName) {
    return;
  }

  const { originalArgs } = selectedCacheName;

  const patchResult = dispatch(
    unmoderatedResultsApi.util.updateQueryData(
      'getBlockAnswers',
      {
        blockUuid: originalArgs.blockUuid,
        blockType: originalArgs.blockType,
        filters: originalArgs.filters,
        offset: originalArgs.offset,
        limit: originalArgs.limit,
      },
      draft => {
        const selectedAnswer = draft.find(
          (answer: any) => answer.uuid === answerId,
        ) as unknown as AiInputBlockAnswerDto;

        if (!selectedAnswer || !selectedAnswer?.aiInputAnswer) {
          return;
        }

        const themesForOptimisticUpdate: Pick<AiInputThemeDto, 'color' | 'id' | 'title'>[] = themes.reduce(
          (formmatedThemes, theme) => {
            const currentTheme = themeIds.find(id => id === theme.id);

            if (!currentTheme) {
              return formmatedThemes;
            }

            return [
              ...formmatedThemes,
              {
                id: theme.id,
                title: theme.title,
                color: theme.color,
              },
            ];
          },
          [] as Pick<AiInputThemeDto, 'color' | 'id' | 'title'>[],
        );

        selectedAnswer.aiInputAnswer.themes = themesForOptimisticUpdate;
      },
    ),
  );
  try {
    await queryFulfilled;
  } catch {
    patchResult.undo();
  }
},