다음단일 Express 응용 프로그램의 js, Apollo 클라이언트 및 서버

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 - Heroku . We can do it seamlessly with the help of TypeScript .

Folder structure:

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

monorepo :

{
 "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. yarn workspaces is required by yarn workspaces. package.json declares where our packages live. Each script executes yarn command in specified workspace. In private": true script we read local development environment variables from "workspaces": [...] file before starting dev server. (If it does not work on your OS, replace with what works for you)

dev :

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

Let's agree on the naming convention for our packages: .env .

This one is the easiest.

.env :

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

@monorepo/package-name :

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.

ssr: true :

{
  "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 packages/client/index.ts to run our TypeScript app on production, it will compile it and keep the build in cache. We'll use packages/server/package.json for the hot reload. Latest versions have built in TypeScript support, no need to do anything other than ts-node . Magic!

And the epxress server itself nodemon :

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 nodemon index.ts and packages/server/index.ts 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 client 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 graphql 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 Data: Hello world! , crete a free plan account.
• Do to your dashboard http://localhost:3000/graphql
• Click https://www.heroku.com/ -> https://dashboard.heroku.com/apps , choose app name, region, and click New .

You will land on the page with instructions of how to Create new app and deploy your app.

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

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 GRAPHQL_URI as a package manager and will run https://your-app-name.herokuapp.com/graphql after it fetches the source files. Then it will investigate your root package.json, find yarn script and run it. Finally it will look for the yarn install 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.