Tylerian · October 18, 2019 16:09
diff --git a/_app.tsx b/_app.tsx
 import NextApp, {
    AppInitialProps
 } from "next/app";

 import {
    ApolloClient
 } from "apollo-client";

 import {
    ApolloProvider
 } from "@apollo/react-hooks";

 import {
    APOLLO_ENDPOINT
 } from "../config";

 import {
    createApolloClient
 } from "../lib/apollo";

 type AppProps = AppInitialProps & {
    apolloClient?: ApolloClient<object>;
 };

 class App extends NextApp<AppProps> {
    render() {
        const {
            pageProps,
            Component,
            apolloClient = createApolloClient({ url: APOLLO_ENDPOINT }),
        } = this.props;

        return (
            <ApolloProvider client={apolloClient}>
                <Component {...pageProps} />
            </ApolloProvider>
        );
    }
 }

 export default App;
diff --git a/_document.tsx b/_document.tsx
 import React from "react";

 import Document, {
    DocumentContext,
    DocumentInitialProps,
    Html,
    Head,
    Main,
    NextScript
 } from "next/document";

 import {
    ApolloClient
 } from "apollo-client";

 import {
    getDataFromTree
 } from "@apollo/react-ssr";

 import {
    createApolloClient
 } from "../lib/apollo";

 type DocumentProps = DocumentInitialProps & {
    apolloState: object;
 };

 export default class extends Document<DocumentProps> {
    /**
     * Take the apolloState from apollo
     * (as generated in getInitialProps)
     * and assign them to __NEXT_DATA__ so that they
     * are accessible to the client for rehydration.
     */
    constructor(props: any) {
        super(props);

        const {
            apolloState,
            __NEXT_DATA__
        } = props;

        __NEXT_DATA__.apolloState = apolloState;
    }

    /**
     * Called once on the initial app entry-point (server-side).
     *
     * @param {DocumentContext} ctx
     */
    static async getInitialProps(ctx: DocumentContext) {
        const apolloClient = createApolloClient();

        // render props
        const renderPage = ctx.renderPage;
        const renderPageEnhancer = {
            enhanceApp: (App: any) =>
                (ctx: any) => <App {...ctx} apolloClient={apolloClient} />
        };

        // swizzle render logic
        ctx.renderPage = () =>
            renderPage(renderPageEnhancer);

        // run apollo before nextjs render
        await getDataFromTree(
            /* ctx.AppTree is App without appProps 
             * and without being renderPageEnhanced */
            <ctx.AppTree {...ctx.appProps} apolloClient={apolloClient} />
        );

        // collect apollo state
        const apolloState = (
            apolloClient.extract()
        );

        // synchronously render page
        const documentProps = (
            await Document.getInitialProps(ctx)
        );

        return {
            apolloState,
            ...documentProps
        };
    }

    render() {
        return (
            <Html>
                <Head/>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
 }
diff --git a/apollo.ts b/apollo.ts
 import React from "react";
 import fetch from "isomorphic-unfetch"

 import {
    ApolloClient
 } from "apollo-client";

 import {
    HttpLink
 } from "apollo-link-http";

 import {
    InMemoryCache
 } from "apollo-cache-inmemory";

 import {
    ApolloProvider
 } from "@apollo/react-hooks";

 const isServer = (
    typeof window === "undefined");

 const windowApolloState = (
    !isServer && window.__NEXT_DATA__.apolloState);

 type ApolloClientOptions = {
    url: string;
    ssrMode: boolean;
    initialState?: object;
 };

 /**
 * Creates and configures an ApolloClient
 * @param {Object} [initialState=window.__NEXT_DATA__.apolloState]
 */
 export function createApolloClient(options: ApolloClientOptions) {
    const {
        url,
        ssrMode = isServer,
        initialState = windowApolloState
    } = options;

    // Check out https://github.com/zeit/next.js/pull/4611
    // if you want to use the AWSAppSyncClient
    return new ApolloClient({
        ssrMode: ssrMode,
        link: new HttpLink({ uri: url, fetch }),
        cache: new InMemoryCache().restore(initialState)
    });
 }
diff --git a/config.ts b/config.ts
 const APOLLO_ENDPOINT = "https://<your_graphql_endpoint>";

 export {
    APOLLO_ENDPOINT
 };
	import NextApp, {
	AppInitialProps
	} from "next/app";

	import {
	ApolloClient
	} from "apollo-client";

	import {
	ApolloProvider
	} from "@apollo/react-hooks";

	import {
	APOLLO_ENDPOINT
	} from "../config";

	import {
	createApolloClient
	} from "../lib/apollo";

	type AppProps = AppInitialProps & {
	apolloClient?: ApolloClient<object>;
	};

	class App extends NextApp<AppProps> {
	render() {
	const {
	pageProps,
	Component,
	apolloClient = createApolloClient({ url: APOLLO_ENDPOINT }),
	} = this.props;

	return (
	<ApolloProvider client={apolloClient}>
	<Component {...pageProps} />
	</ApolloProvider>
	);
	}
	}

	export default App;
	import React from "react";

	import Document, {
	DocumentContext,
	DocumentInitialProps,
	Html,
	Head,
	Main,
	NextScript
	} from "next/document";

	import {
	ApolloClient
	} from "apollo-client";

	import {
	getDataFromTree
	} from "@apollo/react-ssr";

	import {
	createApolloClient
	} from "../lib/apollo";

	type DocumentProps = DocumentInitialProps & {
	apolloState: object;
	};

	export default class extends Document<DocumentProps> {
	/**
	* Take the apolloState from apollo
	* (as generated in getInitialProps)
	* and assign them to __NEXT_DATA__ so that they
	* are accessible to the client for rehydration.
	*/
	constructor(props: any) {
	super(props);

	const {
	apolloState,
	__NEXT_DATA__
	} = props;

	__NEXT_DATA__.apolloState = apolloState;
	}

	/**
	* Called once on the initial app entry-point (server-side).
	*
	* @param {DocumentContext} ctx
	*/
	static async getInitialProps(ctx: DocumentContext) {
	const apolloClient = createApolloClient();

	// render props
	const renderPage = ctx.renderPage;
	const renderPageEnhancer = {
	enhanceApp: (App: any) =>
	(ctx: any) => <App {...ctx} apolloClient={apolloClient} />
	};

	// swizzle render logic
	ctx.renderPage = () =>
	renderPage(renderPageEnhancer);

	// run apollo before nextjs render
	await getDataFromTree(
	/* ctx.AppTree is App without appProps
	* and without being renderPageEnhanced */
	<ctx.AppTree {...ctx.appProps} apolloClient={apolloClient} />
	);

	// collect apollo state
	const apolloState = (
	apolloClient.extract()
	);

	// synchronously render page
	const documentProps = (
	await Document.getInitialProps(ctx)
	);

	return {
	apolloState,
	...documentProps
	};
	}

	render() {
	return (
	<Html>
	<Head/>
	<body>
	<Main />
	<NextScript />
	</body>
	</Html>
	);
	}
	}
	import React from "react";
	import fetch from "isomorphic-unfetch"

	import {
	ApolloClient
	} from "apollo-client";

	import {
	HttpLink
	} from "apollo-link-http";

	import {
	InMemoryCache
	} from "apollo-cache-inmemory";

	import {
	ApolloProvider
	} from "@apollo/react-hooks";

	const isServer = (
	typeof window === "undefined");

	const windowApolloState = (
	!isServer && window.__NEXT_DATA__.apolloState);

	type ApolloClientOptions = {
	url: string;
	ssrMode: boolean;
	initialState?: object;
	};

	/**
	* Creates and configures an ApolloClient
	* @param {Object} [initialState=window.__NEXT_DATA__.apolloState]
	*/
	export function createApolloClient(options: ApolloClientOptions) {
	const {
	url,
	ssrMode = isServer,
	initialState = windowApolloState
	} = options;

	// Check out https://github.com/zeit/next.js/pull/4611
	// if you want to use the AWSAppSyncClient
	return new ApolloClient({
	ssrMode: ssrMode,
	link: new HttpLink({ uri: url, fetch }),
	cache: new InMemoryCache().restore(initialState)
	});
	}
	const APOLLO_ENDPOINT = "https://<your_graphql_endpoint>";

	export {
	APOLLO_ENDPOINT
	};