Issue when using @graphql decorator + Redux [2.0]

Intended outcome: After just upgrading to 2.0 from the beta, I expected that wrapping a GraphQL-decorated class with Redux’s connect() method should continue to work like before. For example:

@graph(MY_QUERY, { ...
class MyComponent {
// ....
export default connect(mapStateToProps)(MyComponent)

Actual outcome: Now, I am getting the following error:

Could not find "store" in either the context or props of "Connect(Apollo(MyComponent))". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Apollo(MyComponent))"

I’m wrapping my root app class in an <ApolloProvider> tag, and was previously passing in my Redux store as a store prop. This was all working, however, after the non-beta upgrade this error began to appear. I suspect it is because the new client has officially removed certain Redux props and methods due to dropping it as a dependency, but I’m not entirely certain. Any insight would be greatly appreciated. Thanks.

Version

• apollo-client@2.0.1
• react-apollo@2.0.0

[seeden]

It is not a bug. You need to use Provider from react-redux. Apollo 2.0 is not using redux anymore.

import { Provider } from 'react-redux';
...

<Provider store={store}>
  <Apollo client={client}>
    ...
  </Apollo>
</Provider>

[agm1984]

I just encountered this also. It wasn’t an issue after upgrading to Apollo 2.0 but I made some changes to my router, and now some pages work and some don’t, throwing this error.

I had issues with ConnectedRouter from react-router-redux@5, which lead me to move the store off <ApolloProvider /> and onto <ConnectedRouter />. Now that is causing a problem because my SignIn View is hooked to Redux:

// If I recall old problems correctly, connect() is the culprit here because it's asking
// for dispatch before everything is mounted correctly.
// One line of code somewhere can make the difference here if you are getting this error.
export default compose(
  connect(null, { handleSignInSuccess }),
  graphql(SIGN_IN_MUTATION),
)(SignInView)

The recommendation above solves my issues across the board.

Here is my functional setup:

const Root = () => (
  <Provider store={store}>
    <ApolloProvider client={client}>
      <ConnectedRouter history={history}>
        <Switch>
          <Route exact path="/" component={withRouter(Board)} />
          <Route exact path="/register" component={withRouter(Register)} />
          <Route exact path="/signin" component={withRouter(SignIn)} />
          <Route exact path="/board" component={withRouter(Board)} />
        </Switch>
      </ConnectedRouter>
    </ApolloProvider>
  </Provider>
)

export default Root

If you haven’t used ConnectedRouter before, it’s pretty dope. It allows you to navigate using Redux because of some helper methods it installs. I enjoy having access to this.props.dispatch(push('SomeView')) and this.props.dispatch(goBack()). Those are situationally useful, robust addons, but you can also call them from action creators and instantly transition through views while they are loading without any flickering crap and without any nasty state transition errors if logic is in-flight when you do so.

Using it also brings React web more in-line with React Native and react-navigation, so I like the parity. I figured I would just expand a bit on ConnectedRouter since it’s not the most common and it requires adding @5 when you npm install it.