GatsbyハイブリッドサイトをApollo/Graphcool（またはRedux）に接続する方法は？

Question

私は、Gatsbyを基盤として静的コンテンツと動的コンテンツを混在させたサイトを作成するためのアイデアを試しています。このハイブリッドサイトには、一般公開されている静的マーケティングページと、認証壁の背後に存在する複数の動的ページが含まれています。 this tweet with @Gatsbyによると、それは実行可能です。

私はステップ-1で立ち往生し、アポロプロバイダを追加してサイトをGraphcoolに接続しました。

通常、私は...アプリケーションは私のサイトのルートであるので、同様のルート、でこれを行うだろう

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

const client = new ApolloClient({ 
    networkInterface 
}); 

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

しかし、ここでサイトのルートには、ギャツビーのサイトにあるでしょうか？

Answer 1

あなたは注意する必要があります

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

一つのことは常にあなたがGraph.coolからのデータを使用する前に、クライアントにしているチェックしてReduxの例のサイトに似た何かをしたいです。静的にレンダリングされるコンポーネントで作業している場合、クライアントと同様にサーバー上でコンポーネントがレンダリングされるため、graph.coolデータを使用できるとは限りません。

Answer 2

componentDidMountライフサイクルメソッドを使用してクライアント側コンポーネントをセットアップできます。たとえば、

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> 
    ); 
    } 
}