Add init lerna setting

+node_modules

+{
+  "useWorkspaces" : true,
+  "npmClient": "yarn",
+  "version": "0.0.0"
+}

+{
+  "name": "graphql-community",
+  "private": true,
+  "devDependencies": {
+    "lerna": "^4.0.0"
+  },
+  "scripts": {
+    "build": "lerna run build",
+    "build:api" : "lerna exec --scrop @graphql-community/api --stream yarn build",
+    "build:web": "lerna exec --scrop @graphql-community/api --stream yarn build",
+    "dev:web": "lerna exec --scrop @graphql-community/web --stream yarn dev",
+    "dev:api": "lerna exec --scrop @graphql-community/api --stream yarn start:dev"
+  },
+  "workspaces": [
+    "packages/**"
+  ]
+}

+module.exports = {
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: 'tsconfig.json',
+    sourceType: 'module',
+  },
+  plugins: ['@typescript-eslint/eslint-plugin'],
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+  ],
+  root: true,
+  env: {
+    node: true,
+    jest: true,
+  },
+  ignorePatterns: ['.eslintrc.js'],
+  rules: {
+    '@typescript-eslint/interface-name-prefix': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+  },
+};

+# compiled output
+/dist
+/node_modules
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# OS
+.DS_Store
+
+# Tests
+/coverage
+/.nyc_output
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
\ No newline at end of file

+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}
\ No newline at end of file

+<p align="center">
+  <a href="http://nestjs.com/" target="blank"><img src="https://nestjs.com/img/logo_text.svg" width="320" alt="Nest Logo" /></a>
+</p>
+
+[circleci-image]: https://img.shields.io/circleci/build/github/nestjs/nest/master?token=abc123def456
+[circleci-url]: https://circleci.com/gh/nestjs/nest
+
+  <p align="center">A progressive <a href="http://nodejs.org" target="_blank">Node.js</a> framework for building efficient and scalable server-side applications.</p>
+    <p align="center">
+<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/v/@nestjs/core.svg" alt="NPM Version" /></a>
+<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/l/@nestjs/core.svg" alt="Package License" /></a>
+<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/dm/@nestjs/common.svg" alt="NPM Downloads" /></a>
+<a href="https://circleci.com/gh/nestjs/nest" target="_blank"><img src="https://img.shields.io/circleci/build/github/nestjs/nest/master" alt="CircleCI" /></a>
+<a href="https://coveralls.io/github/nestjs/nest?branch=master" target="_blank"><img src="https://coveralls.io/repos/github/nestjs/nest/badge.svg?branch=master#9" alt="Coverage" /></a>
+<a href="https://discord.gg/G7Qnnhy" target="_blank"><img src="https://img.shields.io/badge/discord-online-brightgreen.svg" alt="Discord"/></a>
+<a href="https://opencollective.com/nest#backer" target="_blank"><img src="https://opencollective.com/nest/backers/badge.svg" alt="Backers on Open Collective" /></a>
+<a href="https://opencollective.com/nest#sponsor" target="_blank"><img src="https://opencollective.com/nest/sponsors/badge.svg" alt="Sponsors on Open Collective" /></a>
+  <a href="https://paypal.me/kamilmysliwiec" target="_blank"><img src="https://img.shields.io/badge/Donate-PayPal-ff3f59.svg"/></a>
+    <a href="https://opencollective.com/nest#sponsor"  target="_blank"><img src="https://img.shields.io/badge/Support%20us-Open%20Collective-41B883.svg" alt="Support us"></a>
+  <a href="https://twitter.com/nestframework" target="_blank"><img src="https://img.shields.io/twitter/follow/nestframework.svg?style=social&label=Follow"></a>
+</p>
+  <!--[![Backers on Open Collective](https://opencollective.com/nest/backers/badge.svg)](https://opencollective.com/nest#backer)
+  [![Sponsors on Open Collective](https://opencollective.com/nest/sponsors/badge.svg)](https://opencollective.com/nest#sponsor)-->
+
+## Description
+
+[Nest](https://github.com/nestjs/nest) framework TypeScript starter repository.
+
+## Installation
+
+```bash
+$ npm install
+```
+
+## Running the app
+
+```bash
+# development
+$ npm run start
+
+# watch mode
+$ npm run start:dev
+
+# production mode
+$ npm run start:prod
+```
+
+## Test
+
+```bash
+# unit tests
+$ npm run test
+
+# e2e tests
+$ npm run test:e2e
+
+# test coverage
+$ npm run test:cov
+```
+
+## Support
+
+Nest is an MIT-licensed open source project. It can grow thanks to the sponsors and support by the amazing backers. If you'd like to join them, please [read more here](https://docs.nestjs.com/support).
+
+## Stay in touch
+
+- Author - [Kamil Myśliwiec](https://kamilmysliwiec.com)
+- Website - [https://nestjs.com](https://nestjs.com/)
+- Twitter - [@nestframework](https://twitter.com/nestframework)
+
+## License
+
+Nest is [MIT licensed](LICENSE).

+{
+  "collection": "@nestjs/schematics",
+  "sourceRoot": "src"
+}

+{
+  "name": "@graphql-community/api",
+  "version": "0.0.1",
+  "description": "",
+  "author": "",
+  "private": true,
+  "license": "UNLICENSED",
+  "scripts": {
+    "prebuild": "rimraf dist",
+    "build": "nest build",
+    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
+    "start": "nest start",
+    "start:dev": "nest start --watch",
+    "start:debug": "nest start --debug --watch",
+    "start:prod": "node dist/main",
+    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:cov": "jest --coverage",
+    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
+    "test:e2e": "jest --config ./test/jest-e2e.json"
+  },
+  "dependencies": {
+    "@nestjs/common": "^7.6.15",
+    "@nestjs/core": "^7.6.15",
+    "@nestjs/platform-express": "^7.6.15",
+    "reflect-metadata": "^0.1.13",
+    "rimraf": "^3.0.2",
+    "rxjs": "^6.6.6"
+  },
+  "devDependencies": {
+    "@nestjs/cli": "^7.6.0",
+    "@nestjs/schematics": "^7.3.0",
+    "@nestjs/testing": "^7.6.15",
+    "@types/express": "^4.17.11",
+    "@types/jest": "^26.0.22",
+    "@types/node": "^14.14.36",
+    "@types/supertest": "^2.0.10",
+    "@typescript-eslint/eslint-plugin": "^4.19.0",
+    "@typescript-eslint/parser": "^4.19.0",
+    "eslint": "^7.22.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-prettier": "^3.3.1",
+    "jest": "^26.6.3",
+    "prettier": "^2.2.1",
+    "supertest": "^6.1.3",
+    "ts-jest": "^26.5.4",
+    "ts-loader": "^8.0.18",
+    "ts-node": "^9.1.1",
+    "tsconfig-paths": "^3.9.0",
+    "typescript": "^4.2.3"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "ts"
+    ],
+    "rootDir": "src",
+    "testRegex": ".*\\.spec\\.ts$",
+    "transform": {
+      "^.+\\.(t|j)s$": "ts-jest"
+    },
+    "collectCoverageFrom": [
+      "**/*.(t|j)s"
+    ],
+    "coverageDirectory": "../coverage",
+    "testEnvironment": "node"
+  }
+}

+import { Test, TestingModule } from '@nestjs/testing';
+import { AppController } from './app.controller';
+import { AppService } from './app.service';
+
+describe('AppController', () => {
+  let appController: AppController;
+
+  beforeEach(async () => {
+    const app: TestingModule = await Test.createTestingModule({
+      controllers: [AppController],
+      providers: [AppService],
+    }).compile();
+
+    appController = app.get<AppController>(AppController);
+  });
+
+  describe('root', () => {
+    it('should return "Hello World!"', () => {
+      expect(appController.getHello()).toBe('Hello World!');
+    });
+  });
+});

+import { Controller, Get } from '@nestjs/common';
+import { AppService } from './app.service';
+
+@Controller()
+export class AppController {
+  constructor(private readonly appService: AppService) {}
+
+  @Get()
+  getHello(): string {
+    return this.appService.getHello();
+  }
+}

+import { Module } from '@nestjs/common';
+import { AppController } from './app.controller';
+import { AppService } from './app.service';
+
+@Module({
+  imports: [],
+  controllers: [AppController],
+  providers: [AppService],
+})
+export class AppModule {}

+import { Injectable } from '@nestjs/common';
+
+@Injectable()
+export class AppService {
+  getHello(): string {
+    return 'Hello World!';
+  }
+}

+import { NestFactory } from '@nestjs/core';
+import { AppModule } from './app.module';
+
+async function bootstrap() {
+  const app = await NestFactory.create(AppModule);
+  await app.listen(3000);
+}
+bootstrap();

+import { Test, TestingModule } from '@nestjs/testing';
+import { INestApplication } from '@nestjs/common';
+import * as request from 'supertest';
+import { AppModule } from './../src/app.module';
+
+describe('AppController (e2e)', () => {
+  let app: INestApplication;
+
+  beforeEach(async () => {
+    const moduleFixture: TestingModule = await Test.createTestingModule({
+      imports: [AppModule],
+    }).compile();
+
+    app = moduleFixture.createNestApplication();
+    await app.init();
+  });
+
+  it('/ (GET)', () => {
+    return request(app.getHttpServer())
+      .get('/')
+      .expect(200)
+      .expect('Hello World!');
+  });
+});

+{
+  "moduleFileExtensions": ["js", "json", "ts"],
+  "rootDir": ".",
+  "testEnvironment": "node",
+  "testRegex": ".e2e-spec.ts$",
+  "transform": {
+    "^.+\\.(t|j)s$": "ts-jest"
+  }
+}

+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "test", "dist", "**/*spec.ts"]
+}

+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "declaration": true,
+    "removeComments": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "target": "es2017",
+    "sourceMap": true,
+    "outDir": "./dist",
+    "baseUrl": "./",
+    "incremental": true
+  }
+}

+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

+# Apollo Example
+
+[Apollo](https://www.apollographql.com/client/) is a GraphQL client that allows you to easily query the exact data you need from a GraphQL server. In addition to fetching and mutating data, Apollo analyzes your queries and their results to construct a client-side cache of your data, which is kept up to date as further queries and mutations are run.
+
+In this simple example, we integrate Apollo seamlessly with [Next.js data fetching methods](https://nextjs.org/docs/basic-features/data-fetching) to fetch queries in the server and hydrate them in the browser.
+
+This example relies on [Prisma + Nexus](https://github.com/prisma-labs/nextjs-graphql-api-examples) for its GraphQL backend.
+
+## Demo
+
+[https://next-with-apollo.now.sh](https://next-with-apollo.now.sh)
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-apollo&project-name=with-apollo&repository-name=with-apollo)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-apollo with-apollo-app
+# or
+yarn create next-app --example with-apollo with-apollo-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

+export default function App({ children }) {
+  return (
+    <main>
+      {children}
+      <style jsx global>{`
+        * {
+          font-family: Menlo, Monaco, 'Lucida Console', 'Liberation Mono',
+            'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New',
+            monospace, serif;
+        }
+        body {
+          margin: 0;
+          padding: 25px 50px;
+        }
+        a {
+          color: #22bad9;
+        }
+        p {
+          font-size: 14px;
+          line-height: 24px;
+        }
+        article {
+          margin: 0 auto;
+          max-width: 650px;
+        }
+        button {
+          align-items: center;
+          background-color: #22bad9;
+          border: 0;
+          color: white;
+          display: flex;
+          padding: 5px 7px;
+          transition: background-color 0.3s;
+        }
+        button:active {
+          background-color: #1b9db7;
+        }
+        button:disabled {
+          background-color: #b5bebf;
+        }
+        button:focus {
+          outline: none;
+        }
+      `}</style>
+    </main>
+  )
+}

+export default function ErrorMessage({ message }) {
+  return (
+    <aside>
+      {message}
+      <style jsx>{`
+        aside {
+          padding: 1.5em;
+          font-size: 14px;
+          color: white;
+          background-color: red;
+        }
+      `}</style>
+    </aside>
+  )
+}

+import { useRouter } from 'next/router'
+import Link from 'next/link'
+
+export default function Header() {
+  const { pathname } = useRouter()
+
+  return (
+    <header>
+      <Link href="/">
+        <a className={pathname === '/' ? 'is-active' : ''}>Home</a>
+      </Link>
+      <Link href="/about">
+        <a className={pathname === '/about' ? 'is-active' : ''}>About</a>
+      </Link>
+      <Link href="/client-only">
+        <a className={pathname === '/client-only' ? 'is-active' : ''}>
+          Client-Only
+        </a>
+      </Link>
+      <Link href="/ssr">
+        <a className={pathname === '/ssr' ? 'is-active' : ''}>SSR</a>
+      </Link>
+      <style jsx>{`
+        header {
+          margin-bottom: 25px;
+        }
+        a {
+          font-size: 14px;
+          margin-right: 15px;
+          text-decoration: none;
+        }
+        .is-active {
+          text-decoration: underline;
+        }
+      `}</style>
+    </header>
+  )
+}

+const InfoBox = ({ children }) => (
+  <div className="info">
+    <style jsx>{`
+      .info {
+        margin-top: 20px;
+        margin-bottom: 20px;
+        padding-top: 20px;
+        padding-bottom: 20px;
+        border-top: 1px solid #ececec;
+        border-bottom: 1px solid #ececec;
+      }
+    `}</style>
+    {children}
+  </div>
+)
+
+export default InfoBox

+import { gql, useQuery, NetworkStatus } from '@apollo/client'
+import ErrorMessage from './ErrorMessage'
+import PostUpvoter from './PostUpvoter'
+
+export const ALL_POSTS_QUERY = gql`
+  query allPosts($first: Int!, $skip: Int!) {
+    allPosts(orderBy: { createdAt: desc }, first: $first, skip: $skip) {
+      id
+      title
+      votes
+      url
+      createdAt
+    }
+    _allPostsMeta {
+      count
+    }
+  }
+`
+
+export const allPostsQueryVars = {
+  skip: 0,
+  first: 10,
+}
+
+export default function PostList() {
+  const { loading, error, data, fetchMore, networkStatus } = useQuery(
+    ALL_POSTS_QUERY,
+    {
+      variables: allPostsQueryVars,
+      // Setting this value to true will make the component rerender when
+      // the "networkStatus" changes, so we are able to know if it is fetching
+      // more data
+      notifyOnNetworkStatusChange: true,
+    }
+  )
+
+  const loadingMorePosts = networkStatus === NetworkStatus.fetchMore
+
+  const loadMorePosts = () => {
+    fetchMore({
+      variables: {
+        skip: allPosts.length,
+      },
+    })
+  }
+
+  if (error) return <ErrorMessage message="Error loading posts." />
+  if (loading && !loadingMorePosts) return <div>Loading</div>
+
+  const { allPosts, _allPostsMeta } = data
+  const areMorePosts = allPosts.length < _allPostsMeta.count
+
+  return (
+    <section>
+      <ul>
+        {allPosts.map((post, index) => (
+          <li key={post.id}>
+            <div>
+              <span>{index + 1}. </span>
+              <a href={post.url}>{post.title}</a>
+              <PostUpvoter id={post.id} votes={post.votes} />
+            </div>
+          </li>
+        ))}
+      </ul>
+      {areMorePosts && (
+        <button onClick={() => loadMorePosts()} disabled={loadingMorePosts}>
+          {loadingMorePosts ? 'Loading...' : 'Show More'}
+        </button>
+      )}
+      <style jsx>{`
+        section {
+          padding-bottom: 20px;
+        }
+        li {
+          display: block;
+          margin-bottom: 10px;
+        }
+        div {
+          align-items: center;
+          display: flex;
+        }
+        a {
+          font-size: 14px;
+          margin-right: 10px;
+          text-decoration: none;
+          padding-bottom: 0;
+          border: 0;
+        }
+        span {
+          font-size: 14px;
+          margin-right: 5px;
+        }
+        ul {
+          margin: 0;
+          padding: 0;
+        }
+        button:before {
+          align-self: center;
+          border-style: solid;
+          border-width: 6px 4px 0 4px;
+          border-color: #ffffff transparent transparent transparent;
+          content: '';
+          height: 0;
+          margin-right: 5px;
+          width: 0;
+        }
+      `}</style>
+    </section>
+  )
+}

+import { gql, useMutation } from '@apollo/client'
+
+const UPDATE_POST_MUTATION = gql`
+  mutation votePost($id: String!) {
+    votePost(id: $id) {
+      id
+      votes
+      __typename
+    }
+  }
+`
+
+export default function PostUpvoter({ votes, id }) {
+  const [updatePost] = useMutation(UPDATE_POST_MUTATION)
+
+  const upvotePost = () => {
+    updatePost({
+      variables: {
+        id,
+      },
+      optimisticResponse: {
+        __typename: 'Mutation',
+        votePost: {
+          __typename: 'Post',
+          id,
+          votes: votes + 1,
+        },
+      },
+    })
+  }
+
+  return (
+    <button onClick={() => upvotePost()}>
+      {votes}
+      <style jsx>{`
+        button {
+          background-color: transparent;
+          border: 1px solid #e4e4e4;
+          color: #000;
+        }
+        button:active {
+          background-color: transparent;
+        }
+        button:before {
+          align-self: center;
+          border-color: transparent transparent #000000 transparent;
+          border-style: solid;
+          border-width: 0 4px 6px 4px;
+          content: '';
+          height: 0;
+          margin-right: 5px;
+          width: 0;
+        }
+      `}</style>
+    </button>
+  )
+}

+import { gql, useMutation } from '@apollo/client'
+
+const CREATE_POST_MUTATION = gql`
+  mutation createPost($title: String!, $url: String!) {
+    createPost(title: $title, url: $url) {
+      id
+      title
+      votes
+      url
+      createdAt
+    }
+  }
+`
+
+export default function Submit() {
+  const [createPost, { loading }] = useMutation(CREATE_POST_MUTATION)
+
+  const handleSubmit = (event) => {
+    event.preventDefault()
+    const form = event.target
+    const formData = new window.FormData(form)
+    const title = formData.get('title')
+    const url = formData.get('url')
+    form.reset()
+
+    createPost({
+      variables: { title, url },
+      update: (cache, { data: { createPost } }) => {
+        cache.modify({
+          fields: {
+            allPosts(existingPosts = []) {
+              const newPostRef = cache.writeFragment({
+                data: createPost,
+                fragment: gql`
+                  fragment NewPost on allPosts {
+                    id
+                    type
+                  }
+                `,
+              })
+              return [newPostRef, ...existingPosts]
+            },
+          },
+        })
+      },
+    })
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <h1>Submit</h1>
+      <input placeholder="title" name="title" type="text" required />
+      <input placeholder="url" name="url" type="url" required />
+      <button type="submit" disabled={loading}>
+        Submit
+      </button>
+      <style jsx>{`
+        form {
+          border-bottom: 1px solid #ececec;
+          padding-bottom: 20px;
+          margin-bottom: 20px;
+        }
+        h1 {
+          font-size: 20px;
+        }
+        input {
+          display: block;
+          margin-bottom: 10px;
+        }
+      `}</style>
+    </form>
+  )
+}

+import { useMemo } from 'react'
+import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'
+import { concatPagination } from '@apollo/client/utilities'
+import merge from 'deepmerge'
+import isEqual from 'lodash/isEqual'
+
+export const APOLLO_STATE_PROP_NAME = '__APOLLO_STATE__'
+
+let apolloClient
+
+function createApolloClient() {
+  return new ApolloClient({
+    ssrMode: typeof window === 'undefined',
+    link: new HttpLink({
+      uri: 'https://nextjs-graphql-with-prisma-simple.vercel.app/api', // Server URL (must be absolute)
+      credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
+    }),
+    cache: new InMemoryCache({
+      typePolicies: {
+        Query: {
+          fields: {
+            allPosts: concatPagination(),
+          },
+        },
+      },
+    }),
+  })
+}
+
+export function initializeApollo(initialState = null) {
+  const _apolloClient = apolloClient ?? createApolloClient()
+
+  // If your page has Next.js data fetching methods that use Apollo Client, the initial state
+  // gets hydrated here
+  if (initialState) {
+    // Get existing cache, loaded during client side data fetching
+    const existingCache = _apolloClient.extract()
+
+    // Merge the existing cache into data passed from getStaticProps/getServerSideProps
+    const data = merge(initialState, existingCache, {
+      // combine arrays using object equality (like in sets)
+      arrayMerge: (destinationArray, sourceArray) => [
+        ...sourceArray,
+        ...destinationArray.filter((d) =>
+          sourceArray.every((s) => !isEqual(d, s))
+        ),
+      ],
+    })
+
+    // Restore the cache with the merged data
+    _apolloClient.cache.restore(data)
+  }
+  // For SSG and SSR always create a new Apollo Client
+  if (typeof window === 'undefined') return _apolloClient
+  // Create the Apollo Client once in the client
+  if (!apolloClient) apolloClient = _apolloClient
+
+  return _apolloClient
+}
+
+export function addApolloState(client, pageProps) {
+  if (pageProps?.props) {
+    pageProps.props[APOLLO_STATE_PROP_NAME] = client.cache.extract()
+  }
+
+  return pageProps
+}
+
+export function useApollo(pageProps) {
+  const state = pageProps[APOLLO_STATE_PROP_NAME]
+  const store = useMemo(() => initializeApollo(state), [state])
+  return store
+}

+{
+  "name": "@graphql-community/web",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@apollo/client": "3.1.1",
+    "deepmerge": "^4.2.2",
+    "lodash": "4.17.20",
+    "graphql": "^15.3.0",
+    "next": "latest",
+    "prop-types": "^15.6.2",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0"
+  },
+  "license": "MIT"
+}

+import { ApolloProvider } from '@apollo/client'
+import { useApollo } from '../lib/apolloClient'
+
+export default function App({ Component, pageProps }) {
+  const apolloClient = useApollo(pageProps)
+
+  return (
+    <ApolloProvider client={apolloClient}>
+      <Component {...pageProps} />
+    </ApolloProvider>
+  )
+}

+import App from '../components/App'
+import Header from '../components/Header'
+
+const AboutPage = () => (
+  <App>
+    <Header />
+    <article>
+      <h1>The Idea Behind This Example</h1>
+      <p>
+        <a href="https://www.apollographql.com/client/">Apollo</a> is a GraphQL
+        client that allows you to easily query the exact data you need from a
+        GraphQL server. In addition to fetching and mutating data, Apollo
+        analyzes your queries and their results to construct a client-side cache
+        of your data, which is kept up to date as further queries and mutations
+        are run, fetching more results from the server.
+      </p>
+      <p>
+        In this simple example, we integrate Apollo seamlessly with{' '}
+        <a href="https://github.com/vercel/next.js">Next</a> by calling{' '}
+        <a href="https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation">
+          getStaticProps
+        </a>{' '}
+        at our Page component. This approach lets us opt out of getInitialProps
+        and let us use all the niceties provided by{' '}
+        <a href="https://github.com/vercel/next.js">Next</a>.
+      </p>
+      <p>
+        On initial page load, while on the server and inside{' '}
+        <a href="https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation">
+          getStaticProps
+        </a>
+        , we fetch the query used to get the list of posts. At the point in
+        which the query promise resolves, our Apollo Client store is completely
+        initialized. Then we serve the initial HTML with the fetched data and
+        hydrate Apollo in the browser.
+      </p>
+      <p>
+        This example relies on <a href="http://graph.cool">graph.cool</a> for
+        its GraphQL backend.
+      </p>
+    </article>
+  </App>
+)
+
+export default AboutPage

+import App from '../components/App'
+import InfoBox from '../components/InfoBox'
+import Header from '../components/Header'
+import Submit from '../components/Submit'
+import PostList from '../components/PostList'
+
+const ClientOnlyPage = (props) => (
+  <App>
+    <Header />
+    <InfoBox>
+      ℹ️ This page shows how to use Apollo only in the client. If you{' '}
+      <a href="/client-only">reload</a> this page, you will see a loader since
+      Apollo didn't fetch any data on the server. This is useful when the page
+      doesn't have SEO requirements or blocking data fetching requirements.
+    </InfoBox>
+    <Submit />
+    <PostList />
+  </App>
+)
+
+export default ClientOnlyPage

+import App from '../components/App'
+import InfoBox from '../components/InfoBox'
+import Header from '../components/Header'
+import Submit from '../components/Submit'
+import PostList, {
+  ALL_POSTS_QUERY,
+  allPostsQueryVars,
+} from '../components/PostList'
+import { initializeApollo, addApolloState } from '../lib/apolloClient'
+
+const IndexPage = () => (
+  <App>
+    <Header />
+    <InfoBox>ℹ️ This page shows how to use SSG with Apollo.</InfoBox>
+    <Submit />
+    <PostList />
+  </App>
+)
+
+export async function getStaticProps() {
+  const apolloClient = initializeApollo()
+
+  await apolloClient.query({
+    query: ALL_POSTS_QUERY,
+    variables: allPostsQueryVars,
+  })
+
+  return addApolloState(apolloClient, {
+    props: {},
+    revalidate: 1,
+  })
+}
+
+export default IndexPage

+import App from '../components/App'
+import InfoBox from '../components/InfoBox'
+import Header from '../components/Header'
+import Submit from '../components/Submit'
+import PostList, {
+  ALL_POSTS_QUERY,
+  allPostsQueryVars,
+} from '../components/PostList'
+import { initializeApollo, addApolloState } from '../lib/apolloClient'
+
+const SSRPage = () => (
+  <App>
+    <Header />
+    <InfoBox>ℹ️ This page shows how to use SSR with Apollo.</InfoBox>
+    <Submit />
+    <PostList />
+  </App>
+)
+
+export async function getServerSideProps() {
+  const apolloClient = initializeApollo()
+
+  await apolloClient.query({
+    query: ALL_POSTS_QUERY,
+    variables: allPostsQueryVars,
+  })
+
+  return addApolloState(apolloClient, {
+    props: {},
+  })
+}
+
+export default SSRPage