Apollo + React Router 4 SSR-Problem

Question

Nicht sicher, ob dies ein Problem mit React Router v4, dem React Apollo-Client oder meiner Implementierung ist.

Aber mit <ApolloProvider> als Top-Level-HOC, das heißt:

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

const html = ReactDOMServer.renderToString(ComponentsWithData); 

... ich:

Warnung: Fehler prop Typ: Ungültige prop children vom Typ array-ApolloProvider geliefert , erwartete ein einzelnes ReactElement. in ApolloProvider Fehler React.Children.only erwartet, ein einzelnes React Element Kind zu erhalten.

und blätterte um, mit Router Reagieren <StaticRouter> wie oben, dh:

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

... ich dann bekommen:

A <Router> kann nur ein untergeordnetes Element haben

Rendering funktioniert gut im Browser (mit React Router <BrowserRouter>), schlägt aber auf dem Server fehl.

Es funktioniert auch gut in React Router v3 aufgrund der gesamten Route außerhalb der React-Hierarchie, und nicht deklarativ innerhalb davon.

Answer 1

Dies war tatsächlich ein Benutzerfehler. Ich erwartete getDataFromTree(), um ein Versprechen zurückzugeben, das zu der ursprünglichen Komponentenkette (mit den korrekt injizierten GraphQL-Datenrequisiten) aufgelöst wurde, aber es wartet tatsächlich nur auf die Daten bereit sein.

Das richtige Format ist:

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

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