2️⃣GET. Query запрос

⚡ 1) Сделаем первый запрос согласно документации

В папке cards создайте папку services, а в ней файл cards.api.ts

cards.api.ts

//❗1) Обязательно импорт должен быть таким, иначе будут ошибки
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

// ✅ 2) createApi - это функция, предоставляемая RTK Query,
// которая позволяет создать объект API для взаимодействия с внешними API и управления состоянием приложения
export const cardsApi = createApi({
  // ✅ 3)reducerPath - имя среза (slice) Redux, куда будут сохранены состояние и экшены для этого API.
  reducerPath: "cardsApi",  
  // ✅ 4) baseQuery - конфигурация для HTTP клиента, который будет использоваться для отправки запросов.
  baseQuery: fetchBaseQuery({
    baseUrl: "http://localhost:7542/2.0/",
  }),
  // ✅ 5) endpoints - объект, содержащий эндпоинты для этого API, описанные с помощью функций, которые будут вызываться при вызове соответствующих методов API (например, get, post, put, patch, delete). Обязательный параметр.
  endpoints: (build) => { 
    return {
    // 1 параметр - тип того, что возвращает сервер (ResultType)
    // 2 параметр - тип query аргументов (QueryArg)
      getCards: build.query<any, string>({
        query: (packId) => {
          return {
            method: "GET",
            url: "cards/card",
            params: {
              cardsPack_id: packId,
            },
          };
        },
      }),
    };
  },
});

// ✅ 6) createApi возвращает объект API, который содержит все эндпоинты, определенные в параметре endpoints, а также набор вспомогательных функций, таких как useLazyQuery и usePrefetch. 
export const { useGetCardsQuery } = cardsApi;

• для того чтобы не дублировать baseUrl, давайте в common.api.ts вынесем baseURL отдельную переменную, экспортируем ее и импортируем вместо хардкода "http://localhost:7542/2.0/"

common.api.ts

import axios from "axios";

export const baseURL =
  process.env.NODE_ENV === "development" ? "http://localhost:7542/2.0/" : "https://neko-back.herokuapp.com/2.0/";

export const instance = axios.create({
  baseURL,
  withCredentials: true,
});

⚡2) Подключим cardsApi к store

store.ts

export const store = configureStore({
  reducer: {
    app: appReducer,
    auth: authReducer,
    packs: packsReducer,
    counter: counterReducer,
    [cardsApi.reducerPath]: cardsApi.reducer
  },
  // Добавляем middleware для использования дополнительных функций rtk-query, таких как кэширование, инвалидация и pooling.
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(cardsApi.middleware),
});

// Метод setupListeners, подключает слушатели событий фокуса (refetchOnFocus) и повторного подключения (refetchOnReconnect ), чтобы автоматически перезагружать данные при возвращении на страницу или восстановлении подключения
setupListeners(store.dispatch)

⚡3) Воспользуемся cardsApi в компоненте

Cards.tsx

import { useParams } from "react-router-dom";
import { useGetCardsQuery } from "features/cards/services/cards";

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

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

  return (
    <div>
      <h1>Cards</h1>
      <div>{JSON.stringify(data)}</div>
    </div>
  );
};

Давайте теперь наконец сделаем запрос. Но опять ошибка 👿

Ошибка говорит нам о том, что мы не авторизованы. Но почему тогда колоды подгружаются... Чтобы понять эту проблемы нужно вспомнить что такое withCredentials

Вот так можно решить эту проблему

cards.api.ts

baseQuery: fetchBaseQuery({ baseUrl: baseURL, credentials: "include" }),

И теперь запрос наконец то должен пройти 🚀

⚡4) Посмотрим подробнее на хук который создал RTK query (useGetCardsQuery)

⚡4.1 ) Для начала давайте протипизируем ответ с сервера.

❗Чтобы не городить типы в одном месте давайте типы будем складывать в отдельный файл cards.api.types.ts

❗CardType протипизируем после того как создадим первую карточку

cards.api.types.ts

cards.api.types.ts

type CardType = {};

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;
};

cards.api.ts

⚡4.2 ) Loading

• isLoading - первая загрузка, когда нет данных

• isFetching - обновление данных, например при возвращении на вкладку

Иными словами isLoading === true только при изначальной загрузке, а isFetching - при любом запросе

При isLoading мы показываем крутилки/скелетоны, при isFetching дизейблим пагинацию, как пример

Поставим debugger и посмотрим как меняется isLoading

Теперь мы понимаем что нам не обязательно хранить отдельную переменную isLoading для каждого редьюсера или глобально. Крутилку покажем следующим образом

if (isLoading) return <LinearProgress color={"secondary"} />;

Крутилка должна появиться 🚀 ❓Но у нас в некоторый момент будет 2 крутилки. Кто скажет почему и как решить эту проблему?

• Давайте зайдем в redux devtools и посмотрим, что у нас появилось

• По итогу у нас есть 2 варианта решения: 1) Оставить глобальную крутилку и при этом ничего не менять 2) Делать какие то исключения в addMatcher pending.

.addMatcher(
  (action) => {
    if (action.type === "cardsApi/executeQuery/pending") return false;
    return action.type.endsWith("/pending");
  },
  (state) => {
    state.isLoading = true;
  }
)

Чтобы не усложнять код, остановимся на первом варианте

⚡ 4.3.) Обработка ошибок - это тяжелая и мутная тема, поэтому рассмотрим ее в конце

⚡4.4) Query hook возвращает нам объект с двумя параметрами:

• queryArg - объект, содержащий свойства, такие как последние данные для запроса, а также логические значения статуса для текущего состояния жизненного цикла запроса

• queryOptions. Объект queryOptions принимает несколько дополнительных параметров, которые можно использовать для управления процессом получения данных.