7️⃣DELETE mutation

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

DELETE запрос - это тоже мутация, поэтому делаем все по аналогии с POST запросом

⌚ Обязательно попробуйте проделать самостоятельно.

cards.api.ts

export const cardsApi = createApi({
  reducerPath: "cardsApi",
  baseQuery: fetchBaseQuery({ baseUrl: baseURL, credentials: "include" }),
  tagTypes: ["Card"],
  keepUnusedDataFor: 10,
  endpoints: (build) => {
    return {
      // code ...
      deleteCard: build.mutation<DeleteCardResponseType, string>({
        query: (id) => {
          return {
            method: "DELETE",
            url: "cards/card",
            params: {
              id,
            },
          };
        },
        invalidatesTags: ["Card"],
      }),
    };
  },
});

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

Cards.tsx

export const Cards = () => {

  const [deleteCard] = useDeleteCardMutation();

  const removeCardHandler = (cardId: string) => {
    deleteCard(cardId);
  };

  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>
                <button onClick={() => removeCardHandler(card._id)}>delete card</button>
              </div>
            );
          })}
      </div>
      <Pagination count={data && data.cardsTotalCount} onChange={changePageHandler} />
    </div>
  );
};

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

PreviousКеширование NextPUT mutation

Last updated 2 years ago

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

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