The Idea Behind This Example

Apollo is a GraphQL client that allows you to easily query the exact data you need from a GraphQL server. In addition to fetching and mutating data, Apollo analyzes your queries and their results to construct a client-side cache of your data, which is kept up to date as further queries and mutations are run, fetching more results from the server.

In this simple example, we integrate Apollo seamlessly with Next by calling getStaticProps at our Page component. This approach lets us opt out of getInitialProps and let us use all the niceties provided by Next.

On initial page load, while on the server and inside getStaticProps, we fetch the query used to get the list of posts. At the point in which the query promise resolves, our Apollo Client store is completely initialized. Then we serve the initial HTML with the fetched data and hydrate Apollo in the browser.

This example relies on graph.cool for its GraphQL backend.