next-with-apollo

next-with-apollo

Apollo HOC for Next.js

For Next v9 use the latest version

For Next v6-v8 use the version 3.4.0

For Next v5 and lower 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

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.

Create the HOC using a basic setup and apollo-boost:

// 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 } in the first render with SSR (Server Side Rendering). This is done to fetch your queries and hydrate the store before we send the page to the browser.

withApollo will receive { initialState } if the render is happening in the browser, with the following line we're hydrating our cache with the initial state created in the server:

cache: new InMemoryCache().restore(initialState || {});

Now let's 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 @apollo/react-hooks or react-apollo. Pages can access to the ApolloClient too:

Page.getInitialProps = ctx => {
  const apolloClient = ctx.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'
});