Как добавить обратный вызов для использования LazyQuery

Question

Я делаю учебник - https://www.apollographql.com/docs/react/data/queries/ с ленивым graphQL. У меня есть функция, которая позволяет мне получать данные нажатием кнопки с отложенным запросом к серверу. Я обернул его анонимной функцией и положил на кнопку onClick. Не могли бы вы помочь мне добавить еще одну функцию для обратного вызова getDog, чтобы добавить некоторые действия после завершения useLazyQuery.

const [getDog, { loading, data }] = useLazyQuery(GET_DOG_PHOTO);  

Я пытался

const [getDog, { loading, data }] = {
    useLazyQuery(CUSTOM_GQL);
    return // some actions with data and return;
}

не компилируется

<button onClick={
   () => {
      getDog();
      return // some actions
          }
        }

некоторые действия работают только после второго клика.

Answer 1

'Classi c' обратный вызов может быть определен внутри хука (см. Спецификации API )

const [getDog, { loading, data }] = useLazyQuery(GET_DOG_PHOTO, {
  onCompleted: (data) => {
    // some actions
  }
});

return (
  <button onClick={ () => getDog() ) 

... но в реагирующем и функциональном компонентах (с хуками) компонента функция перезапускается при изменении вида обновления

const [getDog, { loading, data }] = useLazyQuery(GET_DOG_PHOTO);  

if( data ) {
  // 'callback'
}

... но этот код можно запускать много раз (другими изменениями) ... этого можно избежать с помощью useEffect hook:

useEffect(() => {
  // code run only on every `data` change
  if( data ) {
    // only when `data` not empty - after first and futher data loading
  }
}, [data]);