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

Posted 2023-03-10

【中文标题】如何将 Gatsby 混合站点连接到 Apollo/Graphcool（或 Redux）？

【英文标题】：How to connect a Gatsby Hybrid Site to Apollo/Graphcool (or Redux)?

【发布时间】：2018-01-15 02:26:03

【问题描述】：

我正在尝试创建一个将静态内容与动态内容混合在一起的网站，并以 Gatsby 为基础。该混合站点将包含可供公众使用的静态营销页面以及存在于身份验证墙后面的几个动态页面。根据this tweet with @Gatsby，这是可行的。

我被困在第 1 步，添加一个 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 站点中的什么位置？

【参考方案1】：

你想做一些类似于 Redux 示例网站的事情

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

您需要注意的一件事是在使用来自 Graph.cool 的数据之前始终检查您是否在客户端中。如果您正在使用将静态呈现的组件，则不能期望 graph.cool 数据可用，因为该组件将在服务器和客户端上呈现。

【参考方案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>
    );