3️⃣Conditional fetching

⚡ 1) Query запрос по условию

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

⚡ 2) Skip

Если вы хотите предотвратить автоматическое выполнение запроса, вы можете использовать параметр skip в хуке.

// Если поставить { skip: true} то запрос не отработает
const { data } = useGetCardsQuery(packId ?? "", { skip: true});

Соответственно если хочу сделать запрос по клику по кнопке, или в useEffect по таймауту, или дождавшись предыдущего запроса и прочее, собственно что и называется запрос по условию, необходимо создать useState и по условию изменить значение на false

export const Cards = () => {
  let { packId } = useParams<{ packId: string }>();
  const [skip, setSkip] = useState(true);

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

  const fetchCardsHandler = () => setSkip(false);

  return (
    <div>
      <h1>Cards</h1>
      <button onClick={fetchCardsHandler}>fetch cards</button>
      <div>{JSON.stringify(data)}</div>
    </div>
  );
};

Проверяем. Запрос должен отрабатывать по клику теперь 🚀

⚡ 3) useLazyQuery

Есть и второй способ реализовать данную задача. Использовать useLazyQuery хук

cards.api.ts

cards.api.ts

export const { useLazyGetCardsQuery } = cardsApi;

Cards.tsx

Из особенностей этого хука можно отметить что он не принимает аргументы и если нам что то нужно передать, то делаем это в функции триггера (в нашем случае getCards)

Проверяем. Запрос должен отрабатывать по клику как и в первом случае🚀