*️⃣Advanced сache tags

⚡ 1) сache tags / invalidatesTags / providesTags

Давайте рассмотрим следующую ситуацию

⚡1.1) Перезагрузите страницу карточек, и затем перейдите на вторую страницу, а потом на третью. По итогу в кеше вы можете их наблюдать

⚡1.2) Вернитесь на первую страницу и обновите какую-нибудь карточку

Вы увидите следующую картину

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

Попробуйте перейти на 2 и 3 страницу и убедитесь, что запросы идут 😥

⚡1.3) Для этого нам нужно капнуть глубже в работу с тегами

Нам необходиму указать, какую конкретно карточку мы меняем

updateCard: build.mutation<UpdateCardResponseType, ArgUpdateCardType>({
  query: (card) => {
    return {
      method: 'PUT',
      url: 'cards/card',
      body: {
        card,
      },
    };
  },
  invalidatesTags: (result, error, card) => [{ type: 'Card', id: card._id }],
}),

Как это работает, поясню на занятии. Поверим, что получилось. Ничего у нас не получилось, т.к tag { type: "Card", id: card._id } нигде не обрабатывается.

⚡1.4) Соответственно для теперь нам нужно поправить providesTags в getCards endpoints

Вот как то так написть

providesTags: ["Card", { type: "Card", id: card._id }],

🤔 Но откуда нам взять card id ?

Нам нужно промапиться по карточками условно закешировать все карточки и тогда RTK query поймет, что собственно закекшировалось

getCards: build.query<FetchCardsResponseType, ArgGetCardsType>({
  query: ({ packId, page, pageCount }) => {
    return {
      method: "GET",
      url: "cards/card",
      params: {
        cardsPack_id: packId,
        page,
        pageCount,
      },
    };
  },
  providesTags: (result) =>
    result
      ? [...result.cards.map((card) => ({ type: "Card" as const, id: card._id })), "Card"]
      : ["Card"],
}),

Давайте теперь проверим поведение с кешем. Теперь кеш для второй и с третьей страниц не должен сбрасываться 🚀