5️⃣Обновление данных

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

⚡1) Ручное обновление данных

После того как мы добавили новую карточку, мы ее не видим на UI, пока руками не перегрузим страницу. И это согласитесь не самое лучшее поведение.

Хук, который мы создаем с помощью RTK query возвращает нам функцию refectch

Функция refetchиспользуется для принудительного обновления данныx (и кэша)

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

// code...
 <button onClick={refetch}>получить свежие данные</button>

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

⚡2) Автоматическое обновление данных

Мы знаем, что наш "сервер" имеет полный список всех карточек, включая ту, которую мы только что добавили. Идеально было бы получать обновленный список карточек сразу после завершения запроса мутации. Таким образом, мы будем знать, что наши кэшированные данные на клиентской стороне синхронизированы с тем, что есть на сервере.

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

⚡3) tagTypes

Основное использование тегов требует добавления трех элементов информации в наш объект среза API:

1. Поле tagTypes в API slice, объявляющее массив имен тегов для типов данных, таких как "Card".

2. Массив providesTags в query эндпоинтах, перечисляющий набор тегов, описывающих данные в этом запросе.

3. Массив invalidatesTags в эндпоинтах с мутациями, перечисляющий набор тегов, которые инвалидируются каждый раз при выполнении этой мутации.

Мы можем добавить единственный тег с именем "Card" в наш объект среза API, который позволит нам автоматически получать обновленный эндпоинт getCards каждый раз, когда мы добавляем новую карточку

cards.api.ts

export const cardsApi = createApi({
  reducerPath: "cardsApi",
  baseQuery: fetchBaseQuery({ baseUrl: baseURL, credentials: "include" }),
  tagTypes: ["Card"],
  endpoints: (build) => {
    return {
      getCards: build.query<FetchCardsResponseType, string>({
        query: (packId) => {
          return {
            method: "GET",
            url: "cards/card",
            params: {
              cardsPack_id: packId,
            },
          };
        },
        providesTags: ["Card"],
      }),
      addCard: build.mutation<AddCardsResponseType, ArgCreateCardType>({
        query: (card) => {
          return {
            method: "POST",
            url: "cards/card",
            body: {
              card,
            },
          };
        },
        invalidatesTags: ["Card"],
      }),
    };
  },
});

export const { useGetCardsQuery, useAddCardMutation } = cardsApi;

Попробуйте сейчас добавить карточку.

• Вы должны визауально убедиться, что новая карточка добавилась

• Если зайти в network, то вы увидите там 2 запроса. Первый на добавление, а второй на получение карточек с сервера

https://redux-toolkit.js.org/rtk-query/api/createApi#providestags

☝ Выводы

• на стороне front-end нам не нужно хранить состояние

• не нужно его думать как изменить в reducer.

• данные хранятся на сервере и нам не нужно думать о синхронизации стейта на фронте с тем, с данными на сервере

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