Gatsby: Gatsby-browser.js & Redux Question

[dilldill1]

Hi,
I installed the gatsby-starter-grommet kit and am trying to add redux to it since my app is growing. I understand I am supposed to edit the gatsby-browser.js file but this kit does not come with one. If I add a gatsby-browser.js file do I need to import it in another file or configure it somewhere so it loads? I have not been able to get this to do anything.

Thanks in advance

[billel-boudchicha]

The Kit will not generate a gatsby-browser.js for you, you have to create one
in your root folder , and export replaceRouterComponent();
something like this:

import React from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { Provider } from "react-redux";

exports.replaceRouterComponent = ({ history }) => {
  const store = createStore(); // your store from elsewhere
  const RouterWrapper = ({ children }) =>
    <Provider store={store}>
      <Router history={history}>
             {children}
      </Router>
    </Provider>;

  return RouterWrapper;
};

[billel-boudchicha]

And also in gatsby-ssr.js

import React from "react";
import { Provider } from "react-redux";
import { renderToString } from "react-dom/server";

exports.replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => {
  const store = createStore();//youre store from elsewhere

  const ConnectedBody = () =>
       <Provider store={store}>
           {bodyComponent}
       </Provider>;
  replaceBodyHTMLString(renderToString(<ConnectedBody />));
};

[dilldill1]

Thanks a lot. I will give a try this week.

[austin43]

This is interesting, I'm using apollo and a gatsby-browser.js file with a similar implementation, but the router isn't replaced with the wrapped component when doing a production build, only locally using gatsby develop

```import React from 'react'
import { Router } from 'react-router-dom'
import { ApolloProvider } from 'react-apollo'
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import env from './.env.json'

export const replaceRouterComponent = ({ history }) => {
const client = new ApolloClient({
link: new HttpLink({uri: env.GRAPHQL_ENDPOINT}),
cache: new InMemoryCache()
});

const ConnectedRouterWrapper = ({ children }) => (


)

return ConnectedRouterWrapper
}
```

WebpackError: Could not find "client" in the context of "Apollo(CardList)". Wrap the root component in an <ApolloProvider>

[m-allanson]

@austin43 If you're seeing errors in gatsby build but not gatsby develop, it's often because there's an issue with the code that does the server side rendering. Have you added a gatsby-ssr.js file alongside your gatsby-browser.js file?

[KyleAMathews]

If y'all haven't seen it yet, there's a using-redux example site that might help you get going https://github.com/gatsbyjs/gatsby/tree/master/examples/using-redux

Closing out older issues — please open up a new issue if you still need help!

[fabioespinosa]

I'm just starting to use Redux with gatsby...

Two questions came to mind that might have something to do with what the OP asked:
1) If you're not using react-router-dom you're fine by just using the wrapRootComponent lifecycle API for redux right? No need for the replaceRouterComponent?

2) Why are almost all examples that use Redux w gatsby have react-router-dom in gatsby-browser.js? is react-router-dom enforced with gatsby and therefore I absolutely have to put it in gatsby-browser.js when using redux?

Awesome job with Gatsby @KyleAMathews 🥇 💯

[m4rrc0]

@austin43 have you found out what your problem was?
I am using Apollo as well and everything was going fine until I got that error too. One thing is for sure, it is NOT directly linked with the use of Apollo as I was using it before I got that error. I am not entirely sure that this error is relevant at all... I am wondering if this error may be triggering before another one and hiding the real build problem.
Anyway I managed to build again by putting some parts of my code behind if (typeof window === 'undefined') ... but I still have to investigate what triggers the problem exactly.
Should we open an issue to discuss this?