阿波罗服务器 + GraphQL代码生成启动模板

首先

当使用Apollo Server进行GraphQL服务器端开发时，如果有一个可以快速创建的模板，就会很方便。为了充分享受GraphQL类型的好处，这个教程还包含了GraphQL Codegen模板。

设置模板

使用两个终端如下图所示。首先，打开第一个终端，从模板设置到执行GraphQL Codegen的操作。

行动：请输入以下指令。您可以全部复制和粘贴后执行。

mkdir server
cd server

# node.js setup
npm init -y
echo "node_modules" > .gitignore

# install and initialize typescript
npm install --save-dev typescript
npx tsc --init

# ts-node-dev: watch and restart a TypeScript server
npm install --save-dev ts-node-dev
npm pkg set scripts.start="ts-node-dev --watch src/* --respawn src/index.ts"

# apollo server
npm install apollo-server graphql

# install and setup graphql-codegen
npm install --save-dev @graphql-codegen/cli
# ここで npx graphql-code-generator init を行ってもよいが、そうすると対話モードに入って手入力が増えるのと、
# 結局は npx graphql-code-generator init で生成されたconfig.ymlを上書き更新することになるので、以下はnpm installのみ行って config.ymlは後ほど作成
npm install --save-dev  @graphql-codegen/typescript @graphql-codegen/typescript-resolvers
npm pkg set scripts.generate="graphql-codegen --config codegen.yml --watch ./schema.gql" # update generate script

# copy files
mkdir src
mkdir data
curl https://raw.githubusercontent.com/richardimaoka/tutorial-apollo-server-setup/main/server/codegen.yml > codegen.yml
curl https://raw.githubusercontent.com/richardimaoka/tutorial-apollo-server-setup/main/server/schema.gql > schema.gql
curl https://raw.githubusercontent.com/richardimaoka/tutorial-apollo-server-setup/main/server/src/index.ts > src/index.ts
curl https://raw.githubusercontent.com/richardimaoka/tutorial-apollo-server-setup/main/server/data/Query.json > data/Query.json

请执行以下命令。

npm run generate

结果：如果显示如下，就是没问题的。

✔ Parse Configuration
✔ Generate outputs
  ℹ Watching for changes...

请持续运行此终端，以便保持GraphQL Codegen进程运行。

请打开一个新的终端窗口。

请执行以下命令。

cd server
npm start

结果应该显示如下：如果出现这种情况，Apollo Server 就已经启动了。

[INFO] 14:30:40 ts-node-dev ver. 1.1.8 (using ts-node ver. 9.1.1, typescript ver. 4.5.4)
?  Server ready at http://localhost:4000/