next.js/examples/with-apollo-and-redux

Apollo & Redux Example

How to use

Using create-next-app

Download create-next-app to bootstrap the example:

npm i -g create-next-app
create-next-app --example with-apollo-and-redux with-apollo-and-redux-app

Download manually

Download the example or clone the repo:

curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-apollo-and-redux
cd with-apollo-and-redux

Install it and run:

npm install
npm run dev

Deploy it to the cloud with now (download):

now

The idea behind the example

By default, Apollo Client creates its own internal Redux store to manage queries and their results. If you are already using Redux for the rest of your app, you can have the client integrate with your existing store instead, which is what this example does. This example is identical to the with-apollo with the exception of this Redux store integration.

Note that you can acesss the redux store like you normally would using react-redux's connect as per here. Here's a quick example:

const mapStateToProps = state => ({
  location: state.form.location,
});

export default withData(connect(mapStateToProps, null)(Index));

connect must go inside withData otherwise connect will not be able to find the store.