Question

不确定这是否是React Router v4，React Apollo客户端或我的实现的问题。

但是<ApolloProvider>作为顶级HOC，即：

const ComponentsWithData = await getDataFromTree(
  <ApolloProvider client={apolloClient}>
    <StaticRouter location={ctx.request.url} context={route}>
      <App />
    </StaticRouter>,
  </ApolloProvider>,
);

const html = ReactDOMServer.renderToString(ComponentsWithData);

......我明白了：

警告：道具类型失败：提供给children的{{1}}类型的道具array无效，需要一个ReactElement。在ApolloProvider中错误React.Children.only期望收到一个React元素子。

翻转，React Router的ApolloProvider为顶部，即：

<StaticRouter>

......然后我得到：

const ComponentsWithData = await getDataFromTree( <ApolloProvider client={apolloClient}> <StaticRouter location={ctx.request.url} context={route}> <App /> </StaticRouter>, </ApolloProvider>, );可能只有一个子元素

渲染在浏览器中运行正常（使用React Router的<Router>），但在服务器上失败。

它在React Router v3中运行良好，因为它完成了React层次结构之外的所有路由匹配，而不是声明性地在其中。

Answer 1

这实际上是用户错误。我希望getDataFromTree()返回一个解析为原始组件链的Promise（使用正确注入的GraphQL数据道具），但它实际上只是等待数据准备就绪。

正确的格式是：

const Components = (
  <StaticRouter location={ctx.request.url} context={route}>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </StaticRouter>
);

await getDataFromTree(Components);
const html = ReactDOMServer.renderToString(Components);

Apollo + React Router 4 SSR问题

1 个答案: