How do I connect my hybrid Gatsby site to Apollo / Graphcool (or Redux)?
I am experimenting with the idea of creating a site that mixes static content with dynamic content using Gatsby as a base. This hybrid site will contain static marketing pages available to the public, as well as several dynamic pages that will exist behind the wall of authentication. According to this tweet from @Gatsby , it is doable.
I am stuck at step 1 adding the apollo provider, connecting the site to Graphcool.
I used to do this at the root, such as 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 root be on the Gatsby site?
source to share
You want to do something similar to the example Redux site
https://github.com/gatsbyjs/gatsby/blob/master/examples/using-redux/gatsby-browser.js
One thing you will have to take care of is always making sure you are on the client before using the data from Graph.cool. If you are working in a component that will render statically, you cannot expect graph.cool data to be available as the component will render on both the server and client.
source to share
You can customize client components using the lifecycle method componentDidMount
. 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> ); } }
source to share