Apollo GraphQL: Lazy loading data after SSR

Question

I have the following code:

const HomeWithApollo = withApollo(compose(
  graphql(HOME_QUERY, {
    props({
      data: { loading, page, fetchMore }
    }) {
      return {
        loading,
        page,
        fetchLocations: () => {
          return fetchMore({
            query: ALL_LOCATIONS_QUERY,
            updateQuery: (prev, {fetchMoreResult}) => {
              if (!fetchMoreResult.data) { return prev; }
              return {
                data: [...prev, ...fetchMoreResult.data]
              };
            }
          })
        }
      };
    }
  })
)(Home));

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.

• Using graphql(QUERY_NAME, { options }), since I'm loading Home data and Locations data completely separately, should they be placed in separate, multiple graphql functions within the withApollo(compose([...here]) Higher Order Component?
• Currently to get data from the fetchMore 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?

---

async componentDidMount(){
  const { data } = await this.props.fetchLocations();
  this.setState({ locations: data.allLocations });
}

Thank you very much in advance!