Apollo + React Router 4 SSRの問題

Question

これがReact Router v4、React Apolloクライアントまたは自分の実装に問題があるかどうかは不明です。

しかし、トップレベルのHOCとして<ApolloProvider>、すなわち持つ：

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

const html = ReactDOMServer.renderToString(ComponentsWithData); 

...私が取得：

警告：失敗プロップタイプ：ApolloProviderに供給されるタイプarrayの無効な小道具childrenを1つのReactElementが必要です。 in ApolloProvider Error React.Children.onlyが1つのReact要素の子を受け取ると予想されています。

そして周りに反転し、ルータの<StaticRouter>トップとして、すなわち反応して：

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

...私はその後、取得：

<Router>は一つだけ子要素

を有することができます

ブラウザでレンダリングが正常に動作します（リアクタの<BrowserRouter>）、サーバー上では失敗します。

React Router v3では、React階層のの外側にあると一致するすべてのルートを実行し、その内部には宣言的には動作しないため、正常に動作します。

Answer 1

これは実際にはユーザーエラーでした。私はgetDataFromTree()が（正しく注入GraphQLデータの小道具を持つ）元のコンポーネントチェーンに解決されたプロミスを返すことを期待しましたが、実際にはデータが準備されるのを待っています。

正しい形式は次のとおりです。

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

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