Блог

Я нахожусь в процессе настройки useInfiniteQuery для извлечения заданий из API заданий Github. Мне еще предстоит настроить фактический бесконечный запрос с помощью кнопки «Загрузить больше», но прямо сейчас я хочу понять, как я могу сбросить информацию из данных, которые возвращает useInfiniteQuery, и создать новый запрос с новыми параметрами, которые я в настоящее время использую как состояние, которое устанавливается с помощью react-hook-forms.

   const [page, setPage] = useState(1);
  const [searchParams, setSearchParams] = useState({
    text: '',
    location: '',
    fullTime: false
  });

  const fetchJobs = async (key, page = 1) => {
    const { text, location, fullTime } = searchParams;
    try {
      const res = await fetch(
        `https://api.allorigins.win/get?url=${encodeURIComponent(
          `https://jobs.github.com/positions.json?description=${text}amp;page=${page}amp;location=${location}amp;full_time=${fullTime}`
        )}`
      );
      const json = await res.json();
      const results = JSON.parse(await json.contents);
      return {
        results,
        nextPage: page   1
      };
    } catch (error) {
      console.log(error);
    }
  };

  const {status, data, error, isFetching, isFetchingMore, fetchMore, canFetchMore
  } = useInfiniteQuery('jobs', fetchJobs, {
    getFetchMore: (lastGroup, allGroups) => lastGroup.nextPage
  });

  const onSubmit = async data => {
    const { text, location, fullTime } = data;
    setSearchParams({
      text,
      location,
      fullTime
    });
    // Want to make a new query call to fetch new Jobs with different parameters

    // Using refetchOnWindowFocus uses the parameters from the new searchParams state,
    // but using useQueryCache.refetchQueries() here does not, neither does
    // expecting fetchJobs to get the updated state, as fetchJobs seems to always use the
    // initial searchParams state
  };

  return (
    <>
      <Search onSubmit={handleSubmit(onSubmit)} ref={register} />
      {isFetching amp;amp; <p>Loading...</p>}
      {data amp;amp; <p>Got data</p>}
    </>
  );
  

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

Любая помощь будет оценена.

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

 const {status, data, error, isFetching, isFetchingMore, fetchMore, canFetchMore
  } = useInfiniteQuery(['jobs', text, location, fullTime], fetchJobs, {
    getFetchMore: (lastGroup, allGroups) => lastGroup.nextPage
  });
  

Ссылка для получения дополнительной информации
https://react-query.tanstack.com/guides/query-functions