npm install --save next-apollo
Create an Apollo configuration object (check out the Apollo Client API for more configuration options). Pass the configuration object to the withData higher-order component and export the returned component.
import { withData } from 'next-apollo'
import { HttpLink } from 'apollo-link-http'
// can also be a function that accepts a `ctx` object (SSR only) and returns a config
const config = {
link: new HttpLink({
uri: 'https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn', // Server URL (must be absolute)
opts: {
credentials: 'same-origin' // Additional fetch() options like `credentials` or `headers`
}
})
}
export default withData(config)Inside your Next.js page, wrap your component with your exported higher order component.
import withData from '../lib/apollo'
export default withData(props => (
<div>Hello World</div>
))That's it!
Next-apollo integrates Apollo seamlessly with Next by wrapping our pages inside a higher-order component (HOC). Using a 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.
On initial page load, while on the server and inside getInitialProps, the Apollo method, getDataFromTree, is invoked and returns a promise; at the point in which the promise resolves, our Apollo Client store is completely initialized.
MIT