如何将Gatsby混合站点连接到Apollo/Graphcool（或Redux）？

Question

我正在尝试一个创意，创建一个混合静态和动态内容的站点，使用Gatsby作为基础。这个混合站点将包含对公众可用的静态营销页面以及几个存在于身份验证墙后面的动态页面。根据@Gatsby的这条推文，这是可行的。

我卡在第一步，添加一个Apollo提供程序，将站点连接到Graphcool。

通常，我会在根目录下执行此操作，如下所示，其中App是我的站点的根...

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

const client = new ApolloClient({
  networkInterface
});

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

在 Gatsby 网站中，网站的根目录在哪里呢？

- Chris Geirman

Answer 1

你想做类似于Redux示例站点的事情。

需要注意的一件事是，在使用 Graph.cool 的数据之前，务必始终检查是否在客户端。如果你正在一个将被静态渲染的组件中工作，不能指望 graph.cool 数据可用，因为该组件将在服务器和客户端上都进行渲染。

参考链接：https://github.com/gatsbyjs/gatsby/blob/master/examples/using-redux/gatsby-browser.js

- Kyle Mathews

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

- Alvis