title: Apollo GraphQL: Lazy loading data after SSR
body: <p>I have the following code:</p>
  
  <pre><code>const HomeWithApollo = withApollo(compose(
    graphql(HOME_QUERY, {
      props({
        data: { loading, page, fetchMore }
      }) {
        return {
          loading,
          page,
          fetchLocations: () =&gt; {
            return fetchMore({
              query: ALL_LOCATIONS_QUERY,
              updateQuery: (prev, {fetchMoreResult}) =&gt; {
                if (!fetchMoreResult.data) { return prev; }
                return {
                  data: [...prev, ...fetchMoreResult.data]
                };
              }
            })
          }
        };
      }
    })
  )(Home));
  </code></pre>
  
  <p>Before migrating to Apollo I loaded the ALL_LOCATIONS_QUERY as an isomorphic fetch client-side (basically an AJAX request). But I'm looking for the Apollo way and I'm not sure if I have it yet. I have a few questions.</p>
  
  <ul>
  <li>Using <code>graphql(QUERY_NAME, { options })</code>, since I'm loading Home data and Locations data completely separately, should they be placed in separate, multiple <code>graphql</code> functions within the <code>withApollo(compose([...here])</code> Higher Order Component?</li>
  <li>Currently to get data from the <code>fetchMore</code> function I am doing the following, but something tells me that it should be done within state so Apollo is aware of it for caching. Any thoughts on this? Am I moving in the right direction?</li>
  </ul>
  
  <hr>
  
  <pre><code>async componentDidMount(){
    const { data } = await this.props.fetchLocations();
    this.setState({ locations: data.allLocations });
  }
  </code></pre>
  
  <p>Thank you very much in advance!</p>