redux - 如何将 Gatsby 混合站点连接到 Apollo/Graphcool(或 Redux)?

标签 redux react-redux react-apollo gatsby graphcool

我正在尝试创建一个以 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 站点中的什么位置?

最佳答案

您想做一些类似于 Redux 示例站点的事情

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

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

关于redux - 如何将 Gatsby 混合站点连接到 Apollo/Graphcool(或 Redux)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45552697/

相关文章:

reactjs - React-redux 创建数组时重新渲染

javascript - 对父组件进行大型查询还是对每个子组件进行一系列小查询?

javascript - 连接到 Redux store 的 React 组件的递归渲染

javascript - 如何创建一个 redux-observable 史诗,它在做任何事情之前等待 2 个 Action

javascript - 我可以在 Javascript 中再次导入吗?

javascript - 如何将简单的 Formik 表单与 Redux 存储连接起来并发送一个 Action ?

reactjs - 将 socket.io 与 redux 结合使用

javascript - React/Redux reducer 在初始化期间返回 undefined

reactjs - 当尝试调用 Apollo Client Query 时,我总是加载 : true, networkStatus: true

typescript - 将 React.Components 与 apollo-client 和 TypeScript 结合使用