Server Side Rendering components that uses React Context

[SaurabhChouhan]

I used context API to pass data to my top level page components. I get data from API and then set data in context which then triggers rendering pages. A sample component looks like this (only adding code enough to understand issue)

const Home = props => {
    const {countries} = useContext(AppContext)
    return (<ul>
      {countries &&
        countries.length > 0 &&
        countries.map(c => <li>{c.title}</li>)}
    </ul>
  )
}

As site loads it fetches data (countries) from graphql API, set it in context and then this sample component shows list of countries.

What I am trying to do is to somehow set this data in context in such a way that when I use above component as a template while creating page using createPages action, the data added to context is available in this component and used to generate HTML during build. But console added in component shows context as undefined. To pass context I tried creating a wrapRootElement passing countries as below, but still context is shows as undefined while building. So my question is that is it possible to populate context during gatsby build lifecycle using any mechanism so that I can set appropriate data and use same components to build SEO htmls in gatsby build.

const AppContextProvider = props => (
  <AppContext.Provider
    value={{
      countries: [{
        name: "India",
        id: 1,
      }, {
        name: "USA",
        id: 2,
      }],
    }}
  >
    {props.children}
  </AppContext.Provider>
)

[vladar]

Have you tried this: https://www.gatsbyjs.com/blog/2019-01-31-using-react-context-api-with-gatsby/