@volst/next-with-apollo
Apollo HOC for Next.js
Last updated 2 years ago by spacek33z .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @volst/next-with-apollo 
SYNC missed versions from official npm registry.

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

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

export default withApollo(({ headers }) => (
  new ApolloClient({ uri: GRAPHQL_URL })
))

withApollo accepts a function that receives { headers } and returns an ApolloClient, keep in mind headers are SSR only

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!

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 yourself here

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

Current Tags

  • 3.1.2                                ...           latest (2 years ago)

1 Versions

  • 3.1.2                                ...           2 years ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (11)
Dev Dependencies (11)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |