Next Apollo
A package for using Apollo within a Next.js application.
Installation
This project assumes you have react, react-dom, and next installed. They're specified as peerDependencies.
npm install --save next-apollo graphql apollo-boost @apollo/react-hooks @apollo/react-ssr
Documentation
Create an Apollo Client, pass it into to the withApollo
higher-order component and export the returned component.
import withApollo from 'next-apollo'import ApolloClient InMemoryCache from 'apollo-boost'; const apolloClient = uri: "https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn" cache: ; apolloClient
Inside your Next.js page, wrap your component with your exported higher order component.
import withApollo from '../lib/apollo' const Page = <div>Hello World</div> ssr: true Page;
That's it!
How Does It Work?
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.
License
MIT