title: useQuery after server-side rendering
body: <p>I'm using <code>next.js</code> and apollo with react hooks.</p>
  
  <p>For one page, I am server-side rendering the first X "posts" like so:</p>
  
  <pre><code>// pages/topic.js
  
  const Page = ({ posts }) =&gt; &lt;TopicPage posts={posts} /&gt;;
  
  Page.getInitialProps = async (context) =&gt; {
      const { apolloClient } = context;
      const posts = await apolloClient.query(whatever);
  
      return { posts };
  };
  
  export default Page;
  </code></pre>
  
  <p>And then in the component I want to use the <code>useQuery</code> hook:</p>
  
  <pre><code>// components/TopicPage.js
  
  import { useQuery } from '@apollo/react-hooks';
  
  export default ({ posts }) =&gt; {
      const { loading, error, data, fetchMore } = useQuery(whatever);
  
      // go on to render posts and/or data, and i have a button that does fetchMore
  };
  </code></pre>
  
  <p>Note that the <code>useQuery</code> here executes essentially the same query as the one I did server-side to get posts for the topic.</p>
  
  <p>The problem here is that in the component, I already have the first batch of posts passed in from the server, so I don't actually want to fetch that first batch of posts again, but I do still want to support the functionality of a user clicking a button to load more posts.</p>
  
  <p>I considered the option of calling <code>useQuery</code> here so that it starts at the second "page" of posts with its query, but I don't actually want that. I want the topic page to be fully loaded with the posts that I want (i.e. the posts that come from the server) as soon as the page loads.</p>
  
  <p>Is it possible to make <code>useQuery</code> work in this situation? Or do I need to eschew it for some custom logic around manual query calls to the apollo client (from <code>useApolloClient</code>)?</p>