How to do ssr for react-apollo #447

Closed
opened 2025-08-09 17:16:19 +00:00 by fergalmoran · 0 comments
Owner

Originally created by @Risbot on 9/2/2017

Hi all,

I try to do server side rendering apollo. I did update file boot-server.tsx to this:

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(() => {
			renderToStringWithData(app).then((content) => {
				resolve({
					html: content
				});
			});
        }, reject); 
    });
});

but it got me this error:

An unhandled exception occurred while processing the request.

NodeInvocationException: Prerendering timed out after 30000ms because the boot function in 'ClientApp/dist/main-server' returned a promise that did not resolve or reject. Make sure that your boot function always resolves or rejects its promise. You can change the timeout value using the 'asp-prerender-timeout' tag helper.

can you help me what i have a bad?

thank for all help

*Originally created by @Risbot on 9/2/2017* Hi all, I try to do server side rendering apollo. I did update file boot-server.tsx to this: ``` 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(() => { renderToStringWithData(app).then((content) => { resolve({ html: content }); }); }, reject); }); }); ``` but it got me this error: > An unhandled exception occurred while processing the request. > > NodeInvocationException: Prerendering timed out after 30000ms because the boot function in 'ClientApp/dist/main-server' returned a promise that did not resolve or reject. Make sure that your boot function always resolves or rejects its promise. You can change the timeout value using the 'asp-prerender-timeout' tag helper. can you help me what i have a bad? thank for all help
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github/JavaScriptServices#447
No description provided.