javascript - Apollo + React Router 4 SSR 问题

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

...我得到:

Warning: Failed prop type: Invalid prop children of type array supplied to ApolloProvider, expected a single ReactElement. in ApolloProvider Error React.Children.only expected to receive a single React element child.

然后翻转过来，使用 React Router 的 <StaticRouter>作为顶部，即:

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

...然后我得到:

A <Router> may have only one child element

渲染在浏览器中工作正常(使用 React Router 的 <BrowserRouter> )，但在服务器上失败。

它在 React Router v3 中也能很好地工作，因为所有的路由匹配都在 React 层次结构的外部，而不是在它的内部。

Answer 1

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

正确的格式是:

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

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