次.は、アポロクライアントとサーバー

Here is how you would usually want to use graphql - as a API Gateway between client app and back end services:

We want every service in a single repo, but at the same time decoupled - monorepo . We can do it seamlessly with the help of yarn workspaces .

Folder structure:

root
 |- packages
 |   |- client
 |   |- graphql
 |   |- server
 |- package.json
 |- yarn.lock

package.json :

{
 "name": "monorepo",
 ...
  "scripts": {
    "build": "yarn workspace @monorepo/client run build",
    "start": "yarn workspace @monorepo/server run start",
    "dev": "export $(cat .env | xargs) && yarn workspace @monorepo/server run dev"
  },
  "private": true,
  "workspaces": ["packages/*"],
  "engines": {
    "node": "13.x"
  }
}

No dependencies here. private": true is required by yarn workspaces. "workspaces": [...] declares where our packages live. Each script executes yarn command in specified workspace. In dev script we read local development environment variables from .env file before starting dev server. (If it does not work on your OS, replace with what works for you)

.env :

NODE_ENV=development
PORT=3000
GRAPHQL_URI=http://localhost:3000/graphql

Let's agree on the naming convention for our packages: @monorepo/package-name .

This one is the easiest.

packages/graphql/package.json :

{
  "name": "@monorepo/graphql",
  ...
  "dependencies": {
    "apollo-server-express": "2.12.0"
  }
}

packages/graphql/index.ts :

import { ApolloServer, gql } from 'apollo-server-express';

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
};

const server = new ApolloServer({ typeDefs, resolvers });

export default server;

Everything super simple: schema, reducer. At the end we create Apollo Server, export it, but do not start it right away.

This one is trickier. We need to make Next js use Apollo Client for fetching the data and make sure SSR is supported.

Alright, its time to stitch everything together.

packages/server/package.json :

{
  "name": "@monorepo/server",
  ...
  "scripts": {
    "start": "ts-node index.ts",
    "dev": "nodemon index.ts"
  },
  "dependencies": {
    "express": "4.17.1",
    "ts-node": "8.8.2",
    "typescript": "3.8.3"
  },
  "devDependencies": {
    "nodemon": "2.0.3",
    "@types/node": "13.11.1"
  }
}

We'll use ts-node to run our TypeScript app on production, it will compile it and keep the build in cache. We'll use nodemon for the hot reload. Latest versions have built in TypeScript support, no need to do anything other than nodemon index.ts . Magic!

And the epxress server itself packages/server/index.ts :

import express from 'express';

import nextApp from '@monorepo/client';
import apolloServer from '@monorepo/graphql';

const { PORT } = process.env;

async function main() {
  const app = express();

  await bootstrapApolloServer(app);
  await bootstrapClientApp(app);

  app.listen(PORT, (err) => {
    if (err) throw err;
    console.log(`[ server ] ready on port ${PORT}`);
  });
}

async function bootstrapClientApp(expressApp) {
  await nextApp.prepare();
  expressApp.get('*', nextApp.getRequestHandler());
}

async function bootstrapApolloServer(expressApp) {
  apolloServer.applyMiddleware({ app: expressApp });
}

main();

Notice how we import client and graphql packages. That's possible thanks to yarn workspaces simlinking.

Next.js and Apollo Server have different express APIs. Next creates request handler that can be used as express middleware:

await nextApp.prepare();
expressApp.get('*', nextApp.getRequestHandler());

Apollo Server does the same thing, but inside applyMiddleware method:

apolloServer.applyMiddleware({ app: expressApp });

Now that we have all the source code ready, from root run:

yarn install

This will instal all the dependencies and do the simlinking between our packages. If you inspect the content of root node_modules in eg VS Code editor, you'll notice something like this:

I wont describe much about the process of setting up new account and creating the app, but its pretty straight forward and should not take longer than 5 minutes.

• Go to https://www.heroku.com/ , crete a free plan account.
• Do to your dashboard https://dashboard.heroku.com/apps
• Click New -> Create new app , choose app name, region, and click Create app .

You will land on the page with instructions of how to install heroku cli and deploy your app.

One more thing you have to do is to set up GRAPHQL_URI env var. Go to Settings tab in heroku dashboard. In Domains section you will find text Your app can be found at https://your-app-name.herokuapp.com/ . Copy that url, scroll up to the Config Vars section and create new env var with key GRAPHQL_URI and value https://your-app-name.herokuapp.com/graphql :

heroku login
git init
git add .
git commit -am "make it better"
git push heroku master

This will initiate the deployment process. Now here is the last Magical part. Heroku will recognize that your app is NodeJS based, you don't have to configure anything yourself. Moreover, Heroku will figure out that you use yarn as a package manager and will run yarn install after it fetches the source files. Then it will investigate your root package.json, find build script and run it. Finally it will look for the start script and use it to start the app by default. Awesome. All the set up literally take about 15 minutes if you don't have an existing account.