如何将盖茨比混合型站点连接到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> 
    ); 
    } 
}