Execute react-apollo-hooks useQuery Only the First Time a Component Renders Idiomatically and Elegantly Execute react-apollo-hooks useQuery Only the First Time a Component Renders Idiomatically and Elegantly reactjs reactjs

Execute react-apollo-hooks useQuery Only the First Time a Component Renders Idiomatically and Elegantly


You could do something like this. Also, you might also want to avoid setting the result of the query to useState and just use data directly.

const [skip, setSkip] = React.useState(false)const { loading, data } = useQuery(QUERY, { skip })React.useEffect(() => {  // check whether data exists  if (!loading && !!data) {    setSkip(true)  }}, [data, loading])

@Robert, I found that you have raised this issue on apollo-hooks github. And I found that there is an answer which helped me solve this issue, hence adding it here as well so that it can help someone else.