title: How to useState and useQuery in Apollo/GraphQL and React?
body: <p>I'm struggling to understand how to best organise my code to set initial useState() in React, while using GraphQL and Apollo to bring in the data. This is my code. As you can see I want to see a part of the 'data' to set the initial state, but when I move setSTate below the loading and error lines, I get the following error:</p>
  
  <p><em>React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?  react-hooks/rules-of-hooks</em></p>
  
  <p>How should I be better organising this? Do I have to use Apollo's state management library because I would prefer to use React useState hooks instead.</p>
  
  <pre><code>const GET_LATEST_POSTS = gql`
  query {
  "graphql query is in here"
  }
  </code></pre>
  
  <p>...</p>
  
  <pre><code>const Slider = () =&gt; {
  
  const { data, loading, error } = useQuery(GET_LATEST_POSTS)
  
  if (loading) return 'Loading...'
  if (error) return `Error! ${error.message}`
  
  const [ currentMovie, setMovie ] = useState(data)
  }
  </code></pre>