Как я могу получить данные из ловушки useQuery после отправки формы в Apollo?

Question

У меня есть состояние поиска в компоненте реагирующей функции.

  const [search, setSearch] = React.useState({
    orgName: "",
    repoName: ""
  });

, поэтому, когда пользователь отправляет форму. Мне нужно получить данные из объекта поиска. То, что я сделал, было:

const handleSearch = (e) => {
        e.preventDefault();
        const {loading, data, error} = useQuery(SEARCH_REPO, {
            variables : {orgName : search.orgName, repoName: search.repoName}
        });
  };

, которое нарушило первое правило реакционных хуков. И я получаю ошибку была hooks cannot be used in non react functional component. Итак, какова альтернатива, как я могу использовать это. Можно ли поместить useQuery в хук useEffect, который будет обновлять данные при обновлении поискового объекта?

Answer 1

Если вам нужно выполнить запрос в ответ на действие пользователя, например, нажатие кнопки, вам вообще не следует использовать useQuery - для этого useLazyQuery . Хук useLazyQuery вернет кортеж (как и useMutation), который состоит из функции для выполнения запроса и объекта с результатами запроса. Он используется так же, как вы используете useMutation, за исключением того, что он не возвращает обещание.

const [search, {loading, data, error}] = useLazyQuery(SEARCH_REPO, {
  variables : {orgName : search.orgName, repoName: search.repoName}
});
const handleSearch = (e) => {
  e.preventDefault();
  search();
};

Answer 2

Вы правильно определили проблему, поскольку крючки должны находиться на верхнем уровне. Помещение useQuery в useEffect приведет к той же проблеме.

С помощью вашего обработчика событий вы можете сделать что-то вроде помещения useQuery на верхний уровень и вызова функции refetch в обработчике (четвертая вещь, которую он возвращает из useQuery). Если вы знаете, что ваш компонент будет обновляться по событию, то просто использование useQuery для получения данных на верхнем уровне (но не в useEffect) также эффективно.