How can I use the useQuery hook to populate state in other hooks?

Question

I have been dealing with a few hook-related issues recently as I have been implementing hooks into a project of mine. I keep getting the error \"Rendered more hooks than during

Answer 1

What you need to do is to update the state when the first hook results in a response. To do that you can make use of useEffect hook. You need to render all hooks at the top of your functional component.

const [url, setUrl] = useState('')

const updateLink = useMutation(LINK_UPDATE_MUTATION, {
  variables: {
    id: props.id,
    url
  }
})

const { data, loading, error } = useQuery(LINK_QUERY, {
  variables: {
    id: props.id
  }
})

useEffect(() => {
  if(data && data.link) {
    setUrl(data.link.url);
  }
}, [data])

if (loading) {
  return 
Loading...
}
if (error) {
  return 
Error! {error.message}
}