title: How can I use the useQuery hook to populate state in other hooks?
body: <p>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 the previous render."</p>
  
  <p>It seems that the only way I can get my code to work is by putting the useQuery hook after all of the other hooks.  This is a problem however as I want to populate some values of state with values from data on the query.</p>
  
  <pre><code>// code that doesn't error, but am not able to initialize state with query values
  
  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
    }
  })
  
  if (loading) {
    return &lt;div&gt;Loading...&lt;/div&gt;
  }
  if (error) {
    return &lt;div&gt;Error! {error.message}&lt;/div&gt;
  }
  </code></pre>
  
  <p>vs</p>
  
  <pre><code>// code that errors with 'Rendered more hooks than during the previous render.'
  
  const { data, loading, error } = useQuery(LINK_QUERY, {
      variables: {
        id: props.id
      }
    })
  
    if (loading) {
      return &lt;div&gt;Loading...&lt;/div&gt;
    }
    if (error) {
      return &lt;div&gt;Error! {error.message}&lt;/div&gt;
    }
  
  const updateLink = useMutation(LINK_UPDATE_MUTATION, {
      variables: {
        id: props.id,
        url
      }
    })
  
  const [url, setUrl] = useState(data.link.url)
  </code></pre>
  
  <p>I would expect that the useQuery hook could be used in a way to initialize other values with its query data.</p>
  
  <p>If this isn't enough code or more explanation is needed just let me know. Thanks.</p>