I'm doing the tutorial - / with a lazy graphQL. I have a function which let me get data by click button with lazy query to server. I wrapped it of anonymous function and put to onClick button. Could you help me to add another function to callback of getDog, to add some actions after useLazyQuery will finished.

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

I tried

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

does not pile

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

some actions works only after second click.

I'm doing the tutorial - https://www.apollographql./docs/react/data/queries/ with a lazy graphQL. I have a function which let me get data by click button with lazy query to server. I wrapped it of anonymous function and put to onClick button. Could you help me to add another function to callback of getDog, to add some actions after useLazyQuery will finished.

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

I tried

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

does not pile

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

some actions works only after second click.

• javascript
• callback
• graphql

• real reason? ... on next render (with data) you can use condition if( data ) .. ... but fired on every further rerendering ... use useEffect to run only on data change – xadm Commented Mar 26, 2020 at 21:31
• @xadm Thank u for response. Could you write please example? Where and how do I apply useEffect? – Vadim Commented Mar 27, 2020 at 5:01

1 Answer 1

'Classic' callback can be defined inside hook (see API specs)

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

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

... but in react and in functional ponents (with hooks) ponent function is rerun on changes to update view

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

if( data ) {
  // 'callback'
}

... but this code can be run many times (by other changes) ... you can avoid that with useEffect hook:

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