如何將蓋茨比混合型站點連接到Apollo/Graphcool（或Redux）？

Question

我正在嘗試創建一個將靜態和動態內容混合使用的網站，使用Gatsby作爲基礎。這個混合網站將包含可供公衆使用的靜態營銷頁面以及存在於認證牆背後的若干動態頁面。根據this tweet with @Gatsby，這是可行的。

我被困在第1步，添加一個apollo提供程序，將該站點連接到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

你想要做類似Redux的示例站點

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

有一件事你需要小心總是檢查你的客戶是利用Graph.cool數據之前的東西。如果您正在使用靜態渲染的組件，則不能期望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> 
    ); 
    } 
}