React higher-order component for integrating Apollo Client with Next.js
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Remove href requirement Jan 10, 2019
.babelrc Upgrade babel. Add missing react dep Jan 2, 2019
.gitignore Update gitignore Oct 27, 2017
.travis.yml ci: test Node.js 6, 8, 10 and 11 Nov 13, 2018
LICENSE Initial commit Oct 19, 2017
README.md Update README.md Jan 16, 2019
package-lock.json Update react dep Feb 14, 2019
package.json Update react dep Feb 14, 2019

README.md

Next Apollo Build Status

A package for using Apollo within a Next.js application.

Note: This package is ideal if you want to tuck away all the ceremony involved when using Apollo in a Next.js app. It's also ideal if you prefer to use Apollo explicitly on a page-by-page basis, as it requires you to wrap each page that uses Apollo in a HOC. If you prefer to use Apollo implicitly on every page, I recommend taking a look at the with-apollo example in the next.js repo.

Installation

npm install --save next-apollo

Documentation

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 `context` object (SSR only) and returns a config
const config = {
  link: new HttpLink({
    credentials: 'same-origin' // Additional fetch() options like `credentials` or `headers`
    uri: 'https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn', // Server URL
  })
}

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!

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.

Custom Cache

SSR will cease to function if you pass in your own Cache. It is highly suggested that you do not pass in your own Cache in the config unless you want it to drop the SSR functionality.

Instead, to use a custom cache, pass in a createCache function. For example, to use a cache with fragment matching,

import { withData } from 'next-apollo'
import { HttpLink } from 'apollo-link-http'
import {
  InMemoryCache,
  IntrospectionFragmentMatcher
} from 'apollo-cache-inmemory'

import introspectionQueryResultData from './fragmentTypes'

const createCache = () => {
  const fragmentMatcher = new IntrospectionFragmentMatcher({
    introspectionQueryResultData
  })

  return new InMemoryCache({ fragmentMatcher })
}

const config = {
  link: new HttpLink({
    uri: 'https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn'
  }),
  createCache
}

export default withData(config)

Data Prefetching

This package uses a variation of ScaleAPI's data prefetching technique tweaked slightly to work with apollo data. We extend the Next <Link> component to allow the invocation of getDataFromTree when prefetching a page.

Declarative prefetching example:

import { Link } from 'next-apollo'

<Link prefetch withData href="">
  <a>Some dynamic page</a>
</Link>

Imperative prefetching example:

import { Link, prefetch } from 'next-apollo'

<Link href="">
  <a onMouseOver={() => prefetch('...')}>
    Some dynamic page
  </a>
</Link>

License

MIT