React Component throwing "Could not find store" error w/ create-react-app

[stevecaldwell77]

This issue pertains to the following package(s):

• [ ] GraphQL Playground - Electron App
• [ ] GraphQL Playground HTML
• [ X] GraphQL Playground
• [ ] GraphQL Playground Express Middleware
• [ ] GraphQL Playground Hapi Middleware
• [ ] GraphQL Playground Koa Middleware
• [ ] GraphQL Playground Lambda Middleware

What OS and OS version are you experiencing the issue(s) on?

Running directly on codesandbox.io here: https://codesandbox.io/s/nw0921qx3j

I can also re-create by using create-react-app on MacOS

What version of graphql-playground(-electron/-middleware) are you experiencing the issue(s) on?

[email protected]

What is the expected behavior?

When I copy-and-paste the instructions directly from the README into a fresh React app, the React component should render correctly.

What is the actual behavior?

Getting the following error:

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

What steps may we take to reproduce the behavior?

1. Create a new sandbox on codesandbox.io
2. Install graphql-playground-react, react-redux
3. Add this to index.html:

<link
      href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Source+Code+Pro:400,700"
      rel="stylesheet"
    />

4. Replace index.js with:

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { Playground, store } from "graphql-playground-react";

ReactDOM.render(
  <Provider store={store}>
    <Playground endpoint="https://api.graph.cool/simple/v1/swapi" />
  </Provider>,
  document.body
);

Please provide a gif or image of the issue for a quicker response/fix.

[dong-dohai]

This bug is caused by the recent release of [email protected] and [email protected] which are used by create-react-app.

You can solve this problem by installing versions of those libraries that match with graphql-playground-react in your react app, which are followings:

"react-redux": "^5.0.6",
"redux": "^3.7.2"

[stevecaldwell77]

That worked, thanks. For reference for anyone viewing this, here's a code sandbox with the fix:

https://codesandbox.io/s/jjx0qwr913

[BrunoQuaresma]

Updates on this?

[cmullenx]

Are there any plans to support later versions of redux?