How to do ssr for react-apollo #1253

Activity

1. Risbot commented on Sep 3, 2017

   

   Risbot

   on Sep 3, 2017

   Author

   More actions

   This works

   import * as React from 'react';
   import { ApolloClient, ApolloProvider, renderToStringWithData, createNetworkInterface } from 'react-apollo';
   import { StaticRouter } from 'react-router-dom';
   import { createServerRenderer, RenderResult } from 'aspnet-prerendering';
   import { routes } from './routes';
   import { renderToString } from 'react-dom/server';
   
   export default createServerRenderer(params => {
       return new Promise<RenderResult>((resolve, reject) => {
           const basename = params.baseUrl.substring(0, params.baseUrl.length - 1);
   		const urlAfterBasename = params.url.substring(basename.length);
   
   
   		const networkInterface = createNetworkInterface({
   			uri: '/api/graphql',
   			
   		});
   
   		const client = new ApolloClient({
   		  ssrMode: true,
   		  networkInterface
   		});
   
           const routerContext: any = {};
           const app = (
   			<ApolloProvider client={ client }>
                   <StaticRouter basename={ basename } context={ routerContext } location={ params.location.path } children={ routes } />
   			</ApolloProvider>
           );
   
           if (routerContext.url) {
               resolve({ redirectUrl: routerContext.url });
               return;
           }
       
   	params.domainTasks.then(() => {
   		resolve({
   			html: renderToString(app)
   		});
           }, reject); 
       });
   });
   
2. SteveSandersonMS commented on Sep 5, 2017

   

   SteveSandersonMS

   on Sep 5, 2017

   Member

   More actions

   Glad you solved it.
3. SteveSandersonMS

   closed this as completedon Sep 5, 2017