hhy5277 / next-with-apollo

Apollo HOC for Next.js

next-with-apollo

Apollo HOC for Next.js, this docs are for Next > 6, for Next < 5 go here and use the version 1.0

How to use

Install the package with npm

npm install next-with-apollo

or with yarn

yarn add next-with-apollo

Create the HOC using a basic setup and apollo-boost

Note: apollo-boost is used in this example because is the fastest way to create an ApolloClient, but is not required.

Previously this package had some configs to create an ApolloClient, those were removed but you can see an example of how to create the same ApolloClient by yourself here.

// lib/withApollo.js
import withApollo from 'next-with-apollo'
import ApolloClient, { InMemoryCache }  from 'apollo-boost'
import { GRAPHQL_URL } from '../configs'

export default withApollo(({ ctx, headers, initialState }) => (
  new ApolloClient({
    uri: GRAPHQL_URL,
    cache: new InMemoryCache().restore(initialState || {})
  })
))

withApollo accepts a function that receives { ctx, headers } or { initialState } and returns an ApolloClient

Wrap Next's App in pages/_app.js

import App, { Container } from 'next/app'
import { ApolloProvider } from 'react-apollo'
import withApollo from '../lib/withApollo'

class MyApp extends App {
  render() {
    const { Component, pageProps, apollo } = this.props;

    return (
      <Container>
        <ApolloProvider client={apollo}>
          <Component {...pageProps} />
        </ApolloProvider>
      </Container>
    );
  }
}

export default withApollo(MyApp)

Now every page in pages/ can use anything from react-apollo!. Pages will have access to the ApolloClient too: getInitialProps({ apolloClient })

withApollo can also receive some options as second parameter:

Key	Type	Default	Note
getDataFromTree	string	always	Should the apollo store be hydrated before the first render ?, allowed values are always, never or ssr (don't hydrate on client side navigation)

Usage example:

export default withApollo(
  () => new ApolloClient({ uri: GRAPHQL_URL }),
  {
    getDataFromTree: 'always'
  }
)

How it works

next-with-apollo will create a Higher-Order Component (HOC) with your configuration that can be used in pages/_app to wrap an ApolloClient to any Next page, it will also fetch your queries before the first page load to hydrate the store.