はじめに
この記事は express-graphqlでNode.js + TypeScriptで簡単にGraphQL APIサーバを実装する
ハンズオンちっくな記事です。
実際に手を動かしてみてください🙏
ディレクトリ構造は下記のようになります。
.
├── src
│ ├── data
│ │ └── index.ts
│ ├── fields
│ │ ├── index.ts
│ │ └── member
│ │ ├── index.ts
│ │ ├── query.ts
│ │ ├── resolvers.ts
│ │ └── types.ts
│ └── index.ts
├── package.json
└── tsconfig.json
準備
パッケージのインストール
実行は ts-nodeで行います。
yarn add @types/express cors express express-graphql graphql typescript
yarn add -D ts-node tsconfig-paths
tsconfig.json
aliasの登録をします。
tsconfig.json
{"compilerOptions":{"sourceMap":false,"noImplicitAny":true,"module":"commonjs","target":"es5","lib":["es2018","dom"],"moduleResolution":"node","removeComments":true,"strict":true,"noUnusedLocals":true,"noUnusedParameters":false,"noImplicitReturns":true,"noFallthroughCasesInSwitch":true,"strictFunctionTypes":false,"baseUrl":"./","paths":{"@/*":["src/*"],}},"include":["./src/**/*.ts"]}実装
Data
実際にこのDataは SQLなどからDBの値を取得しますが、今回は DB との接続はなしで JSで用意します。
src/data/index.ts
exportconstmemberList=[{id:1,name:'Rachel',age:29},{id:2,name:'Ross',age:29},{id:3,name:'Joey',age:29}];Types
型定義を types.tsとして作成します。
src/fields/member/types.ts
import{GraphQLObjectType,GraphQLNonNull,GraphQLString,GraphQLInt}from'graphql';exportconstmemberType=newGraphQLObjectType({name:'member',description:'member',fields:{id:{type:newGraphQLNonNull(GraphQLInt),description:'The Member ID.'},name:{type:newGraphQLNonNull(GraphQLString),description:'The Member name.'},age:{type:newGraphQLNonNull(GraphQLInt),description:'The Member age.'}}});Resolvers
Resolverでは何をレスポンスするかの処理を書きます。
この例ではメンバーリストを取得したいだけなので、そのまま memberListを返します。
src/fields/member/resolvers.ts
import{memberList}from'@/data';exportconstgetMemberList=()=>Promise.resolve(memberList);Query
Queryは REST APIの GETに相当します。
src/fields/member/query
import{GraphQLList}from'graphql';import{getMemberList}from'@/fields/member/resolvers';import{memberType}from'@/fields/member/types';exportconstmemberQuery={memberList:{type:newGraphQLList(memberType),description:'Get list of members data.',resolve:getMemberList}};src/fieles/member/index.ts
実装した memberモジュールの queryをまとめてエクスポートします。
src/fields/member/index.ts
import{memberQueryasquery}from'@/fields/member/query';exportconstmemberField={query};src/fields/index
実装したすべてのモジュールを Root Queryとしてまとめてエクスポートします。
src/fields/index.ts
import{GraphQLObjectType}from'graphql';import{memberField}from'@/fields/member/';exportconstqueryType=newGraphQLObjectType({name:'Query',description:'The root query type.',fields:{...memberField.query}});Express
最後に Expressでサーバを実装します。
src/index.ts
import*asexpressfrom'express';import*asgraphqlHTTPfrom'express-graphql';import{GraphQLSchema}from'graphql';import{queryType}from'@/fields/';constPORT=4000;constapp=express();constschema=newGraphQLSchema({query:queryType});app.use('/graphql',express.json(),graphqlHTTP({schema,graphiql:true}));app.listen(PORT,()=>console.log('Listening on :4000'));実行
サーバ起動
下記コマンドでAPIサーバを起動します。
yarn ts-node -r tsconfig-paths/register src/index.ts
動作チェック
localhost:4000/graphqlにアクセスすると、GraphiQL エディタが起動します。
下記クエリを入力して実行。memberListが取得できれば成功🎉
querygetMemberList{memberList{idnameage}}
さいごに
GraphQLのメリットとして、書いたコードがそのままドキュメントになることが挙げられます。
予め descriptionを書くルールなどを定めておけばAPI ドキュメントを用意する必要がなくなります。
実際に手を動かして、GraphQLを体験してみてください!!!
以上
(近いうちにmutations も追記します🙇♂️)