next.js/examples/with-apollo/pages/about.js

import App from '../components/App'
import Header from '../components/Header'

export default () => (
  <App>
    <Header />
    <article>
      <h1>The Idea Behind This Example</h1>
      <p>
        <a href='https://www.apollographql.com/client/'>Apollo</a> 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.
      </p>
      <p>
        In this simple example, we integrate Apollo seamlessly with{' '}
        <a href='https://github.com/zeit/next.js'>Next</a> by wrapping our pages
        inside a{' '}
        <a href='https://facebook.github.io/react/docs/higher-order-components.html'>
          higher-order component (HOC)
        </a>
        . Using the HOC pattern we're able to pass down a central store of query
        result data created by Apollo into our React component hierarchy defined
        inside each page of our Next application.
      </p>
      <p>
        On initial page load, while on the server and inside getInitialProps, we
        invoke the Apollo method,{' '}
        <a href='https://www.apollographql.com/docs/react/features/server-side-rendering.html#getDataFromTree'>
          getDataFromTree
        </a>
        . This method returns a promise; at the point in which the promise
        resolves, our Apollo Client store is completely initialized.
      </p>
      <p>
        This example relies on <a href='http://graph.cool'>graph.cool</a> for
        its GraphQL backend.
      </p>
    </article>
  </App>
)