8️⃣PUT mutation

⚡ 1) Реализуем обновление карточки

Чтобы была полная картина CRUD операций реализуем заодно и редактирование карточки

⌚ Обязательно попробуйте проделать самостоятельно, по аналогии с добавлением карточки

❗ Еще раз показать применение Omit

cards.api.types.ts (Проблема)

cards.api.types.ts

// ❗Явное дублирование типов

export type ArgCreateCardType = {
  cardsPack_id: string;
  question?: string;
  answer?: string;
  grade?: CardGradeType;
  shots?: number;
  answerImg?: string;
  questionImg?: string;
  questionVideo?: string;
  answerVideo?: string;
};

export type ArgUpdateCardType = {
  _id: string;
  question?: string;
  answer?: string;
  grade?: CardGradeType;
  shots?: number;
  answerImg?: string;
  questionImg?: string;
  questionVideo?: string;
  answerVideo?: string;
};

cards.api.types.ts (Решение)

cards.api.ts

cards.api.ts

export const cardsApi = createApi({
  reducerPath: "cardsApi",
  baseQuery: fetchBaseQuery({ baseUrl: baseURL, credentials: "include" }),
  tagTypes: ["Card"],
  keepUnusedDataFor: 10,
  endpoints: (build) => {
    return {
   // code ...
      updateCard: build.mutation<UpdateCardResponseType, ArgUpdateCardType>({
        query: (card) => {
          return {
            method: "PUT",
            url: "cards/card",
            body: {
              card,
            },
          };
        },
        invalidatesTags: ["Card"],
      }),
    };
  },
});

export const { useGetCardsQuery, useAddCardMutation, useDeleteCardMutation, useUpdateCardMutation } = cardsApi;

Cards.tsx

По итогу карточка должна обновиться и на мы должны это видеть без перезагрузки страницы 🚀

Ну давайте допитизируем ответ с сервера, потому что тут нам backend приподнес сюрприз 🎁

⚡ 2) Разбираемся с типизацией cards.api.types.ts

⚡2.1) Обратите внимание на значения карточки которые пришли с бека при обновлении

Т.е. появились дополнительные необязательные поля. И в GET запросе мы увидим уже не соответствующие типизации карточки. Тут конечно вопросы к бекенду, почему так получается и в реальной жизни / в том числе на стажировке вы обязаны подойти к бэкендеру и обсудить с ним эти моменты. Но мы просто немного поправим типизацию CardType

cards.api.types.ts

export type CardType = {
  _id: string;
  cardsPack_id: string;
  user_id: string;
  answer: string;
  question: string;
  grade: CardGradeType;
  shots: number;
  comments: string;
  type: string;
  rating: number;
  more_id: string;
  created: string;
  updated: string;
  __v: number;
  answerImg?: string;
  answerVideo?: string;
  questionImg?: string;
  questionVideo?: string;
};

⚡2.2) Ну еще сделаем более универсальную типизацию ответа с сервера

cards.api.types.ts

type CommonCardResponseType = {
  newCard: CardType;
  deletedCard: CardType;
  updatedCard: CardType;
  token: string;
  tokenDeathTime: number;
};

export type AddCardResponseType = Omit<CommonCardResponseType, "deletedCard" | "updatedCard">;
export type DeleteCardResponseType = Omit<CommonCardResponseType, "newCard" | "updatedCard">;
export type UpdateCardResponseType = Omit<CommonCardResponseType, "newCard" | "deletedCard">;

☝По итогу немного уменьшили дублирование типов