Skip to content

Instantly share code, notes, and snippets.

@MelodicCrypter
Created February 13, 2020 16:17
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save MelodicCrypter/6883ffa0cba0356ebe983c6f180fc041 to your computer and use it in GitHub Desktop.
Setting up ApolloClient and custom _app setting for NextJS.
import React from 'react';
import App from 'next/app';
import { ApolloProvider } from '@apollo/react-hooks';
// Bulma
import '../../public/sass/main.scss';
// Components and Utils
import withApollo from '../lib/withApollo';
class MyApp extends App {
static async getInitialProps({ Component, ctx }) {
let pageProps = {};
// This will crawl all pages, fetched data and return, before render
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
// this exposes the query and path name to the user
pageProps.query = ctx.query;
pageProps.asPath = ctx.asPath;
return { pageProps };
}
render() {
const { Component, apollo, pageProps } = this.props;
return (
<ApolloProvider client={apollo}>
<Component {...pageProps} />
</ApolloProvider>
);
}
}
export default withApollo(MyApp);
import withApollo from 'next-with-apollo';
import ApolloClient from 'apollo-boost';
export default withApollo(
({ ctx, headers, initialState }) =>
new ApolloClient({
uri: YOUR_WEBSITE_OR_API_URL_HERE,
}),
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment