Как сделать get запрос через React query с несколькими ключами по клику на кнопку?

Question

[Егор Довыденко]

есть кастомный хук для запроса через React Query:

export const useDuration = (userLn: number, userLg: number, pointLn: number, pointLg: number) => {
	const {isLoading, data: duration, error, refetch} = useQuery(
		["get duration", {userLn, userLg, pointLn, pointLg}],
		() => GetDuration.getByCoordinates(userLn, userLg, pointLn, pointLg),
		{
			enabled: false
		}
	);
	return {isLoading, duration, error, refetch};
};

В него, как видно, надо передавать 4 параметра (userLn, userLg, pointLn, pointLg) и отрабатывать по клику на кнопку. В документации нашё только через передачу refetch() в функцию onClick, но туда нельзя передать параметры!

запрос типа:

axios.get(`https://randomUrl/test/${userLn},${userLg};${pointLn},${pointLg}`)

Вопрос - как сделать запрос с параметрами по клику на кнопку через React Query?

Answer 1

[Alexandroppolus]

export const useDuration = (userLn: number, userLg: number, pointLn: number, pointLg: number) => {
  const [enabled, setEnabled] = useState(false);

  const {isLoading, data: duration, error, refetch} = useQuery(
    ["get duration", {userLn, userLg, pointLn, pointLg}],
    () => GetDuration.getByCoordinates(userLn, userLg, pointLn, pointLg),
    {
      enabled
    }
  );

  return {isLoading, duration, error, refetch, setEnabled};
};

......
const {..., setEnabled} = useDuration(...);
......
...onClick={() => setEnabled(true)}

Comments

[Егор Довыденко]

А откуда хук useDuration получит данные?
У меня по коду например идём map с выводом точек на карте. Каждой точке отдаю те самые координаты, которые надо передать в useDuration. Т.е. я где-то в onClick должен передать те самые userLn, userLg, pointLn, pointLg.

[Alexandroppolus]

а, понял. Ну тогда надо передавать аргументы не в хук, а в "старт загрузки".

export const useDuration = () => {
  const [p, setParams] = useState({
    userLn: 0;
    userLg: 0;
    pointLn: 0;
    pointLg: 100; // несуществующая широта
  });

  const {isLoading, data: duration, error, refetch} = useQuery(
    ["get duration", p],
    () => GetDuration.getByCoordinates(p.userLn, p.userLg, p.pointLn, p.pointLg),
    {
      enabled: p.pointLg <= 90 // проверяем, что параметры заданы
    }
  );

  return {isLoading, duration, error, refetch, setParams};
};


......
const {..., setParams} = useDuration();
......
...onClick={() => setParams(...)}