Отрисовано больше хуков, чем во время предыдущего рендера

Question

Как использовать 2 запроса graphql с response-apollo-hooks, где второй запрос зависит от параметра, полученного из первого запроса?

Я пытаюсь использовать 2 запроса, который выглядит следующим образом:

const [o, setO] = useState()

const { loading: loadingO, error: errorO, data: dataO } = useQuery(Q_GET_O, { onCompleted: d => setO(d.getO[0].id) });

if (loadingO) { return "error" }

const { loading: loadingOP, error: errorOP, data: dataOP } = useQuery(Q_GET_OP, { variables: { o } })

Однако, когда я запускаю свой проект, response-hooks выдает мне следующее сообщение:

"index.js: 1437 Предупреждение: React обнаружил изменение в порядке хуков, вызываемых Upgrade. Это приведет к ошибкам и ошибкам, если они не исправлены. Для получения дополнительной информации читайте Правила хуков"

Я хотел бы знать, как я могу использовать response-apollo-hooks для запуска запроса, который зависит от другого запроса. Это прекрасно работает, если переменные запроса в GraphQL известны заранее. Однако я не нашел решения для переменных, которые приходят из другого запроса.

Answer 1

Вы можете добавить skip вариант для второго запроса и потерять условие if:

const { loading: loadingOP, error: errorOP, data: dataOP } 
    = useQuery(Q_GET_OP, { variables: { o }, skip: !o  })

из документов:If skip is true, the query will be skipped entirely

Answer 2

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

React будет жаловаться, если вы выйдете из функции рендеринга до того, как все хуки будут вызваны.

Например:

function BrokenFoo () {
  const query = useSomeQuery();
  if (query.loading) return <Loading />

  // This will cause some issues because 
  // it's possible that we return before our useState hook gets called

  const [bar, setBar] = useState();

  return <SomeComponent bar={bar} setBar={setBar} data={query.data} />
}

Исправить:

function FixedFoo () {
  // This will be fine because 
  // all of the hooks have a chance to be called before a return
  const query = useSomeQuery();
  const [bar, setBar] = useState();

  if (query.loading) return <Loading />

  return <SomeComponent bar={bar} setBar={setBar} data={query.data} />
}