title: React component not re-rendering after useQuery
body: <p>I'm using useQuery from ApolloClint to fetch data from a database. The problem I'm getting is that the result I'm getting from graphql seems to not affect the depencey inside the useEffect  and therefore fail to re-render after the data has been received on the front end.
  I have this React component:</p>
  <pre><code>export default function PrivateRoute({
    exact,
    path,
    component: Component,
    ...rest
  }: Props): ReactElement {
    let [status, setStatus] = useState(false);
    const { data, error, loading } = useQuery(GET_CURRENT_USER);
  
    useEffect(() =&gt; {
      data?.id &amp;&amp; setStatus(true);
    }, [data]);
  
    if (error) console.log(error);
    if (loading) return &lt;Spinner&gt;&lt;/Spinner&gt;;
  
    return (
      &lt;Route
        {...rest}
        render={(props) =&gt;
          status ? (
            &lt;&gt;
              &lt;Navbar&gt;&lt;/Navbar&gt;
              &lt;Component {...props} /&gt;
            &lt;/&gt;
          ) : (
            &lt;Redirect
              to={{ pathname: &quot;/login&quot;, state: { from: props.location } }}
            /&gt;
          )
        }
      /&gt;
    );
  }
  </code></pre>
  <p>I understand that useEffect fires before useQuery is done and not at the first render &quot;status&quot; is false, but shouldn't it re-render after &quot;data&quot; object has changed since I placed in the useEffect dependecy?</p>
  <p>Here, I expect that if there is a user (data is not undefined), the Route will return the first option of the condition.</p>
  <p>However, data is returned eventually by GraphQL, but react doesn't do a re-render.</p>
  <p>Any ideas?</p>