9️⃣transformResponse / selectFromResult

⚡ 1) transformResponse

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

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

Давайте ради примера уберем неиспользуемые свойства и изменим название поля

cards.api.ts

cards.api.ts

export const cardsApi = createApi({
  reducerPath: "cardsApi",
  baseQuery: retry(fetchBaseQuery({ baseUrl: baseURL, credentials: "include" }), { maxRetries: 3 }),
  tagTypes: ["Card"],
  endpoints: (build) => {
    return {
      getCards: build.query<TransformFetchCardsResponseType, ArgGetCardsType>({
        query: ({ packId, page, pageCount }) => {
          return {
            method: "GET",
            url: "cards/card",
            params: {
              cardsPack_id: packId,
              page,
              pageCount,
            },
          };
        },
        providesTags: ["Card"],
        transformResponse: (res: FetchCardsResponseType) => {
          return {
            cards: res.cards,
            cardsTotalCount: res.cardsTotalCount,
            isPrivatePack: res.packPrivate,
            packUserId: res.packUserId,
            packName: res.packName,
            packCreated: res.packCreated,
            packUpdated: res.packUpdated,
            page: res.page,
            pageCount: res.pageCount,
            minGrade: res.minGrade,
            maxGrade: res.maxGrade,
          };
        },
      }),
    // code ...
  },
});

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

cards.api.types.ts

И вот такой результат получим в компоненте

⚡ 2) selectFromResult

Довольно часто с севера нам приходит структура данных довольно объемная / вложенная. А в компоненте нам не нужны все эти данные. И вот для того чтобы не загромождать компонент вложенными полями типа data.user.answers, мы можем сделать это в селекторе

Конкретно в нашем случае нам в компоненте требуются cards и cardsTotalCount.

export const Cards = () => {
  const { cards = [], cardsTotalCount } = useGetCardsQuery(
    { packId: packId ?? '', page, pageCount },
    {
      selectFromResult: ({ data }) => {
        return {
          cards: data?.cards,
          cardsTotalCount: data?.cardsTotalCount,
        };
      },
    }
  );

  return (
    <div>
      <h1>Cards</h1>
      <button onClick={addCardHandler}>add card</button>
      <div>
        {cards.map((card) => {
          return (
            // ...
        })}
      </div>
      <Pagination count={cardsTotalCount} onChange={changePageHandler} />
    </div>
  );
};