mobx in gatsby

Is it possible to use mobx with gatsby without using client side routing? I’ve taken a look at https://github.com/Shaid/gatsby-example-mobx but it uses react-router client side routing. I assume those routes won’t be picked up by gatsby and created as static html files?

At the moment ive tried to wrap my layouts/index.js in <Provider> from mobx-react, and use @inject in pages/index.js but it won’t work.

[jonniebigodes]

@KyleAMathews and to whom it may concern. i saw this issue being bounced around a bit so i took a crack at it. Grabbed the example from redux and implemented it using mobx i have a working example in here . If you guys want it add that to the examples. Thanks in advance

[TomiTakussaari]

This works for me:

#gatsby-ssr.js

import { Provider, useStaticRendering } from "mobx-react";
import { renderToString } from "react-dom/server";
import MyStore from "../src/stores/MyStore";

exports.replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => {
    useStaticRendering(true);

    const ProviderBody = () => (
        <Provider Store={MyStore}>
                {bodyComponent}
        </Provider>
    );

    replaceBodyHTMLString(renderToString(<ProviderBody />));
};

# gatsby-browser.js

import { Router } from "react-router-dom";
import { Provider } from "mobx-react";
import MyStore from "../src/stores/MyStore";

exports.replaceRouterComponent = ({ history }) => {
    return ({ children }) => (
        <Provider Store={MyStore}>
                <Router history={history}>{children}</Router>
        </Provider>
    );
};

#component.js

@inject("Store")
@observer
export default class MyComponent extends Component {
...
}

# src/stores/MyStore.js

import {observable} from 'mobx';

export class MyStore {
    @observable myState = {};
    ....
}