Next.js: Support for Apollo 2.x.x + Redux

[zdenham]

Hi! I am having some trouble getting set up with Redux and Apollo.

The existing with-redux-and-apollo example is only compatible with Apollo 1. Apollo 2 severs out-of-the-box support for redux in favor of Apollo's client side state management, but luckily https://github.com/rportugal/apollo-cache-redux gives you a way to still use redux with Apollo 2. That being said, I'm brand new to Nextjs and setting up the dev environment with Apollo 2 and Redux has been challenging, if anyone has ideas about how to accomplish this please let me know! An updated example would be greatly appreciated :)

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Your Environment

| Tech | Version |
|---------|---------|
| next | beta |
| node | 9.0.0 |
| browser | chrome |

[JeromeFitz]

I will have time tonight to get a PR up for review.

[JeromeFitz]

This definitely needs a second (or third) set of eyes. Open to any and all changes. 😁

[JeromeFitz]

@zdenham

The more I delved into this, the more I found myself wanting to keep Apollo in charge of its store and Redux in charge of its. (Though this could be a personal preference on my end, of course.)

I've kept the initial PR with-apollo-and-redux as is, though I do not know if it will get a pass, as I did not notice that apollo-cache-redux is/was in alpha.

To that end, we could use apollo-cache-inmemory instead. But wanted to see what your hope or intention for using Redux and Apollo together was.

I created another example with-apollo-and-redux-saga that has Apollo and Redux Saga completely separated. Though it may be too specific of an example for a PR.

[zdenham]

The project I'm working on uses redux to manage complex local state (not as a caching mechanism for apollo). I am only adding in Apollo right now because I wanted to try out graphql. For my use case, I think separate stores makes a lot more sense and will be easier to integrate. Thanks for the example, I think the with-apollo-and-redux-saga will do the trick. I'll try it out tomorrow and let you know how it goes!

[JeromeFitz]

Oh very cool! Thank you for sharing. I may change the with-apollo-and-redux example to use apollo-cache-inmemory then. That way it's a stable example, and a good starting off point for people who want to break things out on their own.

Please let me know if with-apollo-and-redux-saga is helpful, and any feedback. That way we can see if another example and PR is in order.

Thanks @zdenham !

[zdenham]

@JeromeFitz this example is perfect for my use case! And I think its a good idea to update the with-apollo-and-redux to use apollo-cache-inmemory as a lot of people trying to mix apollo 2.0 and redux are probably looking for separate stores for their data layer and local state. At least from my (limited) experience with the libraries that's what I was looking to do! Thx again for the example

[JeromeFitz]

Awesome, that is great to hear!

I think I'll do a PR for with-apollo-and-redux-saga as well then, and see what @timneutkens and @ads1018 may have to say about improvements.

[JeromeFitz]

May be relevant to anyone's interests currently working with Apollo & Redux at the moment.

Managing your local data in Apollo Client with apollo-link-state:

• https://dev-blog.apollodata.com/the-future-of-state-management-dd410864cae2
• https://github.com/apollographql/apollo-link-state

[adamsoffer]

Awesome stuff thanks @JeromeFitz. I'll take peek this weekend. And yeah...thanks for sharing those links. I'm looking forward to replacing redux with apollo client. Looks like a great way to manage local state.

[malimccalla]

I'm having trouble getting this example working. withData works just fine for all things apollo related but as soon as I add react-redux with connect to a page to access the redux store I start getting the error Could not find "store" in either the context or props of "Connect(TestPage)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(TestPage)".

import React, { Component } from 'react';
import { connect } from 'react-redux';

import withData from '../lib/withData';

class TestPage extends Component {
  render() {
    return <div>Test</div>;
  }
}

const mapStateToProps = state => state;

export default withData(connect(mapStateToProps)(TestPage));

Example readme says:

Note that you can access the redux store like you normally would using react-redux's connect ... connect must go inside withData otherwise connect will not be able to find the store.

However I can see the example doesn't actually utilise react-redux to access redux state anywhere. Would it be possible to add an example of how to do this correctly?

[vjpr]

@malimichael

From https://www.apollographql.com/docs/react/2.0-migration.html#redux:

In react-apollo 2.0, no longer has semantics; you’ll have to use yourself.

[malimccalla]

@vjpr Thanks. Within withData.js wrapping ComposedComponent with react-redux's Provider solved my issue

<ApolloProvider client={this.apollo}>
  <Provider store={this.redux}>
    <ComposedComponent {...this.props} />
  </Provider>
</ApolloProvider>

[JeromeFitz]

@malimichael & @vjpr Thank you both very much for your input on this issue as well as the initial PR.

The new PR is #3629

Going through your comments as well as more of the Apollo documentation, I think it may be better that we separate these two entirely and do not attempt to have a singular function that allows you to use withData and instead, require one to use withApollo and/or withRedux respectively.

With apollo 2.x moving away from redux, this example may rather serve as a conduit on having both play nicely if you are migrating from apollo 1.x to apollo 2.x and still require redux support.

While showing the upgrade path potentially for apollo-link-state to move away from redux completely. (Granted, with-apollo would be a great place for that.)

Please share your thoughts if you can.

[timneutkens]

I believe this was solved a while back.