@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-appSetup
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!
};