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

...我得到：

警告：prop類型失敗：提供給ApolloProvider array類型的prop children無效，應該是單個ReactElement。 在ApolloProvider錯誤中，React.Children.only只希望接收一個React元素的孩子。

然后翻轉一下，以React Router的<StaticRouter>作為頂部，即：

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

...然后我得到：

<Router>可能只有一個子元素

渲染在瀏覽器中工作正常（使用React Router的<BrowserRouter> ），但是在服務器上失敗。

由於在React層次結構之外而不是在其內部以聲明方式進行所有路由匹配，因此它在React Router v3中也能很好地工作。

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