How to connect a Gatsby Hybrid Site to Apollo/Graphcool (or Redux)?

Question

I'm experimenting with an idea to create a site which mixes static with dynamic content, using Gatsby as the foundation. This hybrid site would contain static marketing pages available to the public as well as several dynamic pages which would exist behind an authentication wall. According to this tweet with @Gatsby, it's doable.

I'm stuck at step-1, adding an apollo provider, connecting the site to Graphcool.

Ordinarily, I would do this at the root like so, where App is the root of my site...

const networkInterface = createNetworkInterface({
  uri: GRAPHCOOL_SIMPLE_ENDPOINT
});

const client = new ApolloClient({
  networkInterface
});

export default ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);

But where would the site's root be in a Gatsby site?

Answer 1

You want to do something similar to the Redux example site

https://github.com/gatsbyjs/gatsby/blob/master/examples/using-redux/gatsby-browser.js

One thing you'll need to be careful about is always checking you're in the client before using data from Graph.cool. If you're working in a component that'll be rendered statically, you can't expect the graph.cool data to be available as the component will be rendered on the server as well as the client.

Answer 2

You can setup the client-side components via the componentDidMount life cycle method. For example,

class Index extends React.Component<IndexPageProps> {
  public componentDidMount(): void {
    ReactDOM.render(<App />, document.getElementById('root'));
  }

  public render(): JSX.Element {
    return (
      <div>
        <div id="root" />
      </div>
    );
  }
}