next-data

next-data

next-data is adapted based on samples from NextJS to wrap page components with redux and optionally with apollo. It also includes redux-form when configuring the redux reducer.

Example

This example only uses Redux. To use Redux with Apollo, simply change the import from next-data/redux to next-data/apollo and be sure to include a graphql value in your settings object.

// withData.js
import redux from 'next-data/redux';
 
import settings from './settings';
import siteReducer from './site/reducer';
 
export default function withData(Component) {
  return redux({
    component: Component,
    reducers: {
      site: siteReducer,
    },
    settings,
  });
}

// pages/index.js
import withData from '../lib/withData';
 
const Home = () => <h1>Home page</h1>;
 
export default withData(Home);

If you want to use apollo with subscriptions, set your graphql value to an object with sub and simple keys and import next-data/apolloWithSub. We use Graphcool for our GraphQL backend and the sub and simple values map to the URIs output from setting up a new backend service there.

More documentation and tests coming (soon hopefully)

We need more documentation and test coverage. For now, use at your own risk.