こんにちは。KOUKIです。
以前、DjangoでGraphqlサーバーを勉強しましたが、JavaScriptでの実装方法も勉強してみましょう。
<目次>
前提条件
本記事では、NodeJSを使用します。私の環境では、以下のバージョンがインストールされています。
|
1 2 3 4 |
$ node -v v12.1.0 $ npm -v 6.14.5 |
事前準備
プロジェクトの作成
|
1 2 3 4 |
mkdir graphql-server cd graphql-server touch package.json touch server.go |
依存モジュールのインストール
package.jsonには、以下の内容を記述してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
{ "name": "graphql-server", "version": "1.0.0", "description": "Learning graphql server to build", "main": "server.js", "scripts": { "server": "nodemon server.js" }, "keywords": [], "author": "Reed Barger", "license": "ISC", "dependencies": { "apollo-server": "^2.0.0-rc.7", "bcrypt": "^3.0.0", "dotenv": "^6.0.0", "graphql": "^15.3.0", "jsonwebtoken": "^8.3.0", "md5": "^2.2.1", "mongoose": "^5.2.6" }, "devDependencies": { "concurrently": "^3.6.0", "nodemon": "^1.18.1" } } |
以下のコマンドで、依存モジュールをインストールします。
|
1 2 |
# 依存モジュールをインストール npm install |
GraphQLの実装
GraphQL – サーバー
server.jsに、GraphQLサーバーの実装を行います。
GraphQLサーバーの構築には、apollo-serverを使います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
const { ApolloServer: GraphQLServer, gql } = require("apollo-server"); // blogsデータ const blogs = [ { title: "First Post", draft: false }, { title: "Second Post", draft: true }, ]; // ドキュメントノードを作成 // これは、GrqphQLのスキーマーである const typeDefs = gql` type Query { dummy: String } type Blog { title: String draft: Boolean } `; // インスタンス化 const graphqlServer = new GraphQLServer({ typeDefs, }); // GraphQLサーバー起動 graphqlServer.listen(4000).then(({ url }) => { console.log(`GraphQL Server listening on ${url}`); }); |
以下のコマンドにて、このスクリプトを実行します。
|
1 2 3 4 5 6 |
npm run server GraphQL Server listening on http://localhost:4000/ [nodemon] restarting due to changes... [nodemon] starting `node server.js` [nodemon] restarting due to changes... [nodemon] starting `node server.js` |
この状態で、「localhost:4000」にアクセスしてください。
OKですね。
GraphQL – Resolverの実装
続いて、Resolverを実装します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
const { ApolloServer: GraphQLServer, gql } = require("apollo-server"); const blogs = [ { title: "First Post", draft: false }, { title: "Second Post", draft: true }, ]; const typeDefs = gql` type Query { getBlogs: [Blog] # []で配列のBlogが戻される } type Blog { title: String draft: Boolean } `; // resolverの設定 const resolvers = { Query: { getBlogs: () => blogs, }, }; const graphqlServer = new GraphQLServer({ typeDefs, resolvers, // resolversの登録 }); graphqlServer.listen(4000).then(({ url }) => { console.log(`GraphQL Server listening on ${url}`); }); |
getBlogsを実装しました。これは、ブログの情報を取得するためものです。
ブラウザ上で、以下のクエリを発行してみましょう。
|
1 2 3 4 5 6 |
query { getBlogs { title draft } } |
戻り値として、以下の値が取得できましたね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ "data": { "getBlogs": [ { "title": "First Post", "draft": false }, { "title": "Second Post", "draft": true } ] } } |
GraphQL – Mutationの実装
最後にMutationの実装を行いましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
const { ApolloServer: GraphQLServer, gql } = require("apollo-server"); const { title } = require("process"); const blogs = [ { title: "First Post", draft: false }, { title: "Second Post", draft: true }, ]; const typeDefs = gql` type Query { getBlogs: [Blog] } # Mutation type Mutation { # ブログの追加 addBlog(title: String, draft: Boolean): Blog } type Blog { title: String draft: Boolean } `; const resolvers = { Query: { getBlogs: () => blogs, }, // Mutationの実装 Mutation: { addBlog: (_, { title, draft }) => { const blog = { title, draft }; blogs.push(blog); return blog; }, }, }; const graphqlServer = new GraphQLServer({ typeDefs, resolvers, }); graphqlServer.listen(4000).then(({ url }) => { console.log(`GraphQL Server listening on ${url}`); }); |
以下のMutationをブラウザ上で実行します。
|
1 2 3 4 5 6 |
mutation { addBlog(title: "Third Post", draft: false) { title draft } } |
以下のデータが戻り値として、返却されました。
|
1 2 3 4 5 6 7 8 |
{ "data": { "addBlog": { "title": "Third Post", "draft": false } } } |
実際にデータが追加されたかどうか、確認してみましょう。
以下のクエリを発行します。
|
1 2 3 4 5 6 |
query { getBlogs { title draft } } |
以下のデータが取得できました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
{ "data": { "getBlogs": [ { "title": "First Post", "draft": false }, { "title": "Second Post", "draft": true }, { "title": "Third Post", "draft": false } ] } } |
OKですね。
おわりに
GrqphQLの用語の具体的な説明は省きましたが、なんとなくサーバーの構築方法はわかったのではないでしょうか。
GraphQLは結構便利な技術なので、覚えておいて損はないと思います！
それでは、また^^
にほんブログ村
最近のコメント