6️⃣Кеширование

Документация

⚡1) Intro

Ранее мы уже настроили пагинацию. Теперь давайте будем переходить по страницам и делать запрос за новыми карточками.

// Параметры в пагинации будут следующие.
// На одной странице, мы будем показывать 2 карточки.
&page=1 2 3 4 5 .... (будем менять по клику)
&pageCount=2 (захардкодим)

cards.api.ts

cards.api.ts

export const cardsApi = createApi({
  reducerPath: "cardsApi",
  baseQuery: fetchBaseQuery({ baseUrl: baseURL, credentials: "include" }),
  tagTypes: ["Card"],
  endpoints: (build) => {
    return {
      getCards: build.query<FetchCardsResponseType, ArgGetCardsType>({
        query: ({ packId, page, pageCount }) => {
          return {
            method: "GET",
            url: "cards/card",
            params: {
              cardsPack_id: packId,
              page,
              pageCount,
            },
          };
        },
        providesTags: ["Card"],
      }),
      // ...
    };
  },
});

export const { useGetCardsQuery, useAddCardMutation } = cardsApi;

cards.api.types.ts

Cards.tsx

Откройте network и теперь внимательно посмотрим на запросы. Перейдите на 1, 2, 5 страницы и потом вернитесь на 1 страницу

⚡2) keepUnusedDataFor - время хранения кеша

Время кеша по умолчанию 60 секунд, но это время очень легко и гибко можно контролировать. Если мы хотим например уменьшить время кеша для все что нужно сделать

cards.api.ts

export const cardsApi = createApi({
  reducerPath: "cardsApi",
  baseQuery: fetchBaseQuery({ baseUrl: baseURL, credentials: "include" }),
  tagTypes: ["Card"],
  keepUnusedDataFor: 5,
  endpoints: (build) => {
    // code...
}

• также keepUnusedDataFor можно задавать для конкретного эндпоинта

⚡3)refetchOnFocus

refetchOnFocus используется для быстро меняющихся данных. Пользователь ушёл со страницы, вернулся, данные обновились.

cards.api.ts

export const cardsApi = createApi({
  reducerPath: "cardsApi",
  baseQuery: fetchBaseQuery({ baseUrl: baseURL, credentials: "include" }),
  tagTypes: ["Card"],
  refetchOnFocus: true,
  endpoints: (build) => {
  // code ...
}

Откройте network, перейдите в соседнюю вкладку и посмотрите запрос. Если 2 экрана, кликните по второму экрану и опять вернитесь в приложени. В общем как только вы теряете фокус и возвращаетесь к приложению идет запрос

⚡4)refetchOnReconnect

Опция refetchOnReconnect в методе createApi позволяет вам контролировать, будет ли RTK Query пытаться повторно выполнить все подписанные запросы после восстановления сетевого подключения.

Таким образом, при установке значения refetchOnReconnect: true, RTK Query автоматически выполнит повторный запрос для всех активных подписок после восстановления сетевого соединения. Это позволяет обновить данные, которые могли измениться во время отсутствия связи. Когда сетевое соединение восстанавливается после потери связи, RTK Query автоматически повторно выполнит все активные запросы и обновит данные в соответствии с новыми значениями из API.

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

cards.api.ts

export const cardsApi = createApi({
  reducerPath: "cardsApi",
  baseQuery: fetchBaseQuery({ baseUrl: baseURL, credentials: "include" }),
  tagTypes: ["Card"],
  refetchOnReconnect: true,
  endpoints: (build) => {
  // code ...
}

⚡5)refetchOnMountOrArgChange

Опция refetchOnMountOrArgChange в методе createApi позволяет контролировать поведение RTK Query при монтировании компонента или изменении аргументов запроса. Она определяет, будет ли выполнен повторный запрос при каждом монтировании компонента или при изменении аргументов запроса.

Когда установлено значение refetchOnMountOrArgChange: true, RTK Query будет автоматически выполнять повторные запросы при каждом монтировании компонента, а также при изменении аргументов запроса, передаваемых в хук useQuery или useLazyQuery. refetchOnMountOrArgChange особенно полезна в ситуациях, когда вам нужно гарантировать актуальность данных при каждом монтировании компонента или при изменении аргументов запроса, например, когда аргументы зависят от состояния компонента или от действий пользователя.

⚡6) pooling interval

Polling (опрос) в RTK Query относится к механизму, при котором запросы регулярно отправляются на сервер с целью получения обновленных данных. Это полезный инструмент, когда вам нужно поддерживать актуальность данных в реальном времени или регулярно обновлять информацию.

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

//  Запрос за карточками будет уходить каждые 3 секунды

const { data, isLoading, refetch } = useGetCardsQuery(
    { packId: packId ?? "", page, pageCount: 2 },
    { pollingInterval: 3000 }
  );

⚡7) retry

Опция retry в RTK Query используется для управления повторными попытками выполнения запроса в случае возникновения ошибки. Это позволяет приложению автоматически повторять запросы при временных сетевых проблемах или других ошибочных ситуациях.

При использовании опции retry в конфигурации запроса, RTK Query будет автоматически повторять запросы в случае возникновения ошибки сети или сервера, пока не будет достигнуто максимальное количество попыток или пока запрос не выполнится успешно.

// Данная запись означает, что в случае ошибки мы будем дергать бэкенд 3 раза 

export const cardsApi = createApi({
  reducerPath: "cardsApi",
  baseQuery: retry(fetchBaseQuery({ baseUrl: baseURL, credentials: "include" }), { maxRetries: 3 }),
  tagTypes: ["Card"],
  endpoints: (build) => {

Допустите ошибку packId и проверьте как отрабатывает код