title: Use useQuery when a state variable changes
body: <p>I have following structure in a react app:</p>
  
  <pre><code>&lt;SomeProvider id={objectId}&gt;
    &lt;SomeApp /&gt;
  &lt;/SomeProvider&gt;
  </code></pre>
  
  <p>This provider uses a <code>useQuery</code> to fetch an object from the backend. With <code>useContext</code> I make it accessible to all the components of the app:</p>
  
  <pre><code>const EventProvider = ({ id, children }) =&gt; {
    const {data} = useQuery(SOME_QUERY, { variables: input })
    const obj = data ? data.something : {}
  
    // etc.
  }
  
  export const useSomething = () =&gt; {
    // etc.
  }
  </code></pre>
  
  <p>In a component I can have access to this object:</p>
  
  <pre><code>const Component = ({id}) =&gt; {
    const { obj } = useSomething()
  }
  </code></pre>
  
  <p>Until here all working. My question is, inside this component, I have a button that changes this object in the backend.</p>
  
  <p>How can I fetch the obj again?</p>
  
  <p>I can of course refresh the page, but this is the solution that I want to avoid. What I've tried so far is:</p>
  
  <p>Try to use the useQuery again in the <code>Component</code>.</p>
  
  <pre><code> const Component = ({id}) =&gt; {
     const { obj } = useSomething()
  
     const {data} = useQuery(SOME_QUERY, { variables: input })
        const obj = data ? data.something : {}
   }
  </code></pre>
  
  <p>But actually what I would like to do is trigger the query when a State variable changes:</p>
  
  <pre><code>const Component = ({id}) =&gt; {
    const { obj } = useSomething()
    const { isActivated } = useOtherHook()
  
    const {data} = useQuery(SOME_QUERY, { variables: input })
        const obj = data ? data.something : {}
  
    useEffect(() =&gt; {
      // when isActivated changes, I would like to fetch the obj again
    }, [isActivated])
  }
  </code></pre>
  
  <p>If I use <code>useQuery</code> inside of <code>useEffect</code>, I get:</p>
  
  <p><code>Hooks can only be called inside of the body of a function component</code></p>
  
  <p>What is the best approach to solve this challenge?</p>