4️⃣POST mutation

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

https://redux.js.org/tutorials/essentials/part-7-rtk-query-basics#creating-posts-with-mutations

⚡1.1) Подготовим апишку к запросу

cards.api.ts

cards.api.ts

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
import { baseURL } from "common/api";
import { ArgCreateCardType, FetchCardsResponseType } from "features/cards/services/cards.api.types";

export const cardsApi = createApi({
  reducerPath: "cardsApi",
  baseQuery: fetchBaseQuery({ baseUrl: baseURL, credentials: "include" }),
  endpoints: (build) => {
    return {
      // ...
      addCard: build.mutation<any, ArgCreateCardType>({
        query: (card) => {
          return {
            method: "POST",
            url: "cards/card",
            body: {
              card,
            },
          };
        },
      }),
    };
  },
});

export const { useGetCardsQuery, useAddCardMutation } = cardsApi;

cards.api.types.ts

⚡1.2) Сделаем запрос в компоненте

Cards.tsx

import { useAddCardMutation, useGetCardsQuery } from "features/cards/services/cards.api";
import LinearProgress from "@mui/material/LinearProgress";
import { useParams } from "react-router-dom";
import { ArgCreateCardType } from "features/cards/services/cards.api.types";

export const Cards = () => {
  let { packId } = useParams<{ packId: string }>();

  const { data } = useGetCardsQuery(packId ?? "");

  const [addCard] = useAddCardMutation();

  const addCardHandler = () => {
    if (packId) {
      const newCard: ArgCreateCardType = {
        cardsPack_id: packId,
        question: "🐱 question " + nanoid(),
        answer: "🐙 answer " + nanoid(),
      };
      addCard(newCard);
    }
  };

  return (
    <div>
      <h1>Cards</h1>
      <button onClick={addCardHandler}>add card</button>
      <div>{JSON.stringify(data)}</div>
    </div>
  );
};

❗ Хук, который мы создаем для мутация, в нашем случае useAddCardMutation возвращает массив.

const [addCard, { data, erorr, isLoading }] = useAddCardMutation(); Первый параметр - функция, c помощью которой мы собственно будем делать запрос Второй параметр - объект, в в котором находятся вспомогательные свойства (data, errror, loading и прочее)

Теперь давайте сделаем запрос и убедимся что новая карточка добавилась в колоду 🚀

Обновив страницу вы можете убедиться, что карточка добавлена. Но нам бы хотелось видеть карточку не после обновления страница, а сразу же. Про автобновление после мутаций поговорим позже

⚡ 1.3) Типизация

cards.api.types.ts

cards.api.types.ts

type CardType = {
  _id: string;
  cardsPack_id: string;
  user_id: string;
  answer: string;
  question: string;
  grade: number;
  shots: number;
  comments: string;
  type: string;
  rating: number;
  more_id: string;
  created: string;
  updated: string;
  __v: number;
};

// response
export type FetchCardsResponseType = {
  cards: CardType[];
  packUserId: string;
  packName: string;
  packPrivate: boolean;
  packCreated: string;
  packUpdated: string;
  page: number;
  pageCount: number;
  cardsTotalCount: number;
  minGrade: number;
  maxGrade: number;
  token: string;
  tokenDeathTime: number;
};

export type AddCardResponseType = {
  newCard: CardType;
  token: string;
  tokenDeathTime: number;
};

// arguments
type CardGradeType = 0 | 1 | 2 | 3 | 4 | 5;

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

cards.api.ts

⚡1.4) Unwrap / toast

Если мы просто добавили что то и не хотим дождаться ответа от сервера, то можно так и оставлять. Но если после того как мы сделали запрос, нам нужно показать нотификацию об успешном выполнении или зачитсить стейт с данными и прочее, тогда нужно сделать следующее

Cards.tsx

  const addCardHandler = () => {
    if (packId) {
      const newCard: ArgCreateCardType = {
        // ✅ положительный сценарий
        cardsPack_id: packId,
        // ❗чтобы получить ошибку
        // cardsPack_id: nanoid(),
        question: "🐱 question " + nanoid(),
        answer: "🐙 answer " + nanoid(),
      };
      addCard(newCard)
        .unwrap()
        .then((res) => {
          const cardQuestion = res.newCard.question;
          toast.success(`Карточка ${cardQuestion} успешно добавлена`);
        })
        .catch((err) => {
          toast.error(err.data.error);
        });
    }
  };

⚡ 1.5) Cards UI

• теперь отрисуем нормально карточки (отмапим данные)

• добавим стили чтобы хоть чуточку смотрелось красивее добавим стили. Но для для этого создадим в фиче cards папку components, а в ней папку Cards

• прикрутим пагинацию. Она нам чуть позже понадобится

Cards.tsx

Cards.tsx

export const Cards = () => {
  
  const changePageHandler = (event: ChangeEvent<unknown>, page: number) => {
    console.log("page: ", page);
  };

  return (
    <div>
      <h1>Cards</h1>
      <button onClick={addCardHandler}>add card</button>
      <div>
        {data &&
          data.cards.map((card) => {
            return (
              <div className={s.container} key={card._id}>
                <div>
                  <b>Question: </b>
                  <p>{card.question}</p>{" "}
                </div>
                <div>
                  <b>Answer: </b>
                  <p>{card.answer}</p>{" "}
                </div>
              </div>
            );
          })}
      </div>
      <Pagination count={data && data.cardsTotalCount} onChange={changePageHandler} />
    </div>
  );
};

styles.module.css

☝ Подведем промежуточные итоги. Мы научились:

• делать query запросы

• делать мутации

• типизировать данные

• реагировать на крутилки

При этом не используем axios, не работает с санками, не храним данные которые пришли с сервера в стейте