Apollo + React Router 4 SSR問題

不確定這是React Router v4，React Apollo客戶端還是我的實施問題。Apollo + React Router 4 SSR問題

但隨着<ApolloProvider>作爲頂級HOC，即：

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

const html = ReactDOMServer.renderToString(ComponentsWithData);

...我得到：

警告：無法道具類型：無效的道具提供給ApolloProviderarray型children ，預計只有一個ReactElement。在ApolloProvider中錯誤React.Children.only期望收到一個React元素子元素。

而且翻轉周圍，與之反應路由器<StaticRouter>的頂部，即：

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

...然後我得到：

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

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

它也是行之有效的陣營路由器V3由於做的所有匹配外的陣營層級的路線，而不是聲明它的內部。

來源

2017-03-28 Lee Benson

這實際上是一個用戶錯誤。我期望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);

來源

2017-03-28 21:31:50

Apollo + React Router 4 SSR問題

回答

相關問題