How to initialize redux store with data from Gatsby page query?

Summary

How to initialize redux store with data from a Gatsby page query?

Is there a way to use the wrapRootElement function on ssr?

[Js-Brecht]

This is how I handle that in one of the projects I’m working on:

import React from 'react';
import { Provider } from 'react-redux';
import { StaticQuery, graphql, GatsbyBrowser } from 'gatsby';
import { createStore } from '~/store/store';
import { actions } from '~/store';
import { MenuDataQuery } from '@/graphql/types';

const { hydrateMenuState } = actions.ui.menu;

export const wrapRootElement: GatsbyBrowser['wrapRootElement'] = ({ element }): React.ReactNode => {
    const store = createStore();
    const dispatch = store.dispatch;
    return (
        <StaticQuery
            query={graphql`
                query MenuData {
                    allMenuItem {
                        edges {
                            node {
                                id
                                url
                                slug
                                label
                                acl
                                routes
                                children {
                                    id
                                }
                            }
                        }
                    }
                }
            `}
            render={(data: MenuDataQuery) => {
                dispatch(hydrateMenuState(data));
                return <Provider store={store}>{element}</Provider>;
            }}
        />
    );
};

It doesn’t really do a lot at the moment, but the concept is there.

It’s also possible to use hooks if you wrap it in another React component

[yidongw]

@Js-Brecht I’m using mobx-state-tree for storing data, and it contains some product data that doesn’t change very often, so I want to get those data ready in the build time. Fetching those data is written in mobx-state-tree action, and it is REST API instead of graphQL.

I implemented wrapRootElement in gatsby-ssr.js and gatsby-browser.js. wrapRootElement is the same function that creates a store and wrapping the element with context provider. According to some tutorial.

import { MainContext, MainModel } from "../stores/MainStore"

export default ({ element }) => {
  const store = MainModel.createStore({})
  return <MainContext.Provider value={store}>{element}</MainContext.Provider>
}

I also need to createPage in gatsby-node.js according to using-gatsby-without-graphql, but all the data fetching is currently done in the store, so in order to fetch the data, I need to somehow access the store that was created in the gatsby-ssr.js or gatsby-browser.js.

How am I supposed to do that? Or I should use a different approach?

Your answer is the closest approach, but you are using graphQL, so I don’t know what I should do with my stuff.

I also posted my questions here.