@lightspeed/apollo-next-app

@lightspeed/apollo-next-app

Introduction

Apollo Client integration app HOC for Next.js applications that provides prefetching of data on client-side rendering (CSR) and server-side rendering (SSR).

Quick start

Install

yarn add @lightspeed/apollo-next-app

Setup

In your Next.js application, enhance your _app.tsx component with the withApollo HOC. We have bundled a simple set of Apollo client instantiation dependencies with this module for convenience:

import React from 'react';
import App, { Container } from 'next/app';
import getConfig from 'next/config';
import { withApollo, ApolloClient, HttpLink, InMemoryCache } from '@lightspeed/apollo-next-app';

// Assumes you have passed `process.env.BASE_GRAPHQL_URL` in your `next.config.js` file:
// ```
// const withLightspeed = require('@lightspeed/config-next');
//
// module.exports = withLightspeed({
//   publicRuntimeConfig: {
//     baseGraphQLUrl: process.env.BASE_GRAPHQL_URL,
//   },
// });
// ```
const { publicRuntimeConfig } = getConfig();
const { baseGraphQLUrl } = publicRuntimeConfig;

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;

    return (
      <Container>
        <Component {...pageProps} />
      </Container>
    );
  }
}

export default withApollo({
  initApollo: ({ initialState }) =>
    new ApolloClient({
      link: new HttpLink({
        uri: typeof window !== 'undefined' ? '/graphql' : `${baseGraphQLUrl}/graphql`,
        credentials: 'include',
      }),
      cache: new InMemoryCache().restore(initialState || {}),
    }),
})(NextApp);

You can now start executing queries by following Apollo Client's guide!

Options

The following configuration options are available to the withApollo HOC.

Key	Type	Default	Note
initApollo	function	N/A	Factory function to build the Apollo client
debug	boolean	false	Enable debug mode
prefetch	'always', 'ssr' or 'never'	'never'	Prefetch on CSR and SSR, only SSR, or never

Apollo Client instance

Additionally, you'll have access to the apolloClient instance in the NextContext of your page getInitialProps functions.

MyPage.getInitialProps = (ctx: NextContext) => {
  const { apolloClient } = ctx;
  // ...and do as you please!
};