この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
最近GraphQLに興味が湧いています。ちょっと試してみたくなったので、チュートリアルをやってみました。思いのほか簡単に試せたので紹介したいと思います。10分くらいでできますので、ぜひやってみてください。
参照したのはこちらのチュートリアルです。
Creating A GraphQL Server With Node.js And Express
GraphQLとは
GraphQLは、一言で言えば「必要なデータを過不足なく、一度に取りだす」ことのできるクエリ言語です。
GitHubをはじめ多くのサービスでサポートが表明されています。流行っているようでいて、でもそれほどでもないような。しかし微妙に注目されているという立ち位置でしょうか。
やってみる
node.jsとexpressでGraphQLサーバを作ってみます。
環境
- macOS 10.12.6 Sierra
- express 4.16.3
- express-graphql 0.6.12
- graphql 0.13.2
準備
node.jsを使いますので、もし手元にない場合にはインストールしておきます。
$ brew install node
プロジェクトの作成
プロジェクトフォルダを作成して、npm initしておきます。
$ mkdir gql-server
$ cd gql-server/
$ npm init
パッケージをインストール
npmで必要なパッケージをインストールします。
- graphql
- express
- express-graphql
$ npm install graphql express express-graphql -save
最初のサーバ
下の内容でserver.js
を作ります。messageというクエリに対して、Hello World!を返すサーバです。
var express = require('express');
var express_graphql = require('express-graphql');
var { buildSchema } = require('graphql');
// GraphQL schema
var schema = buildSchema(`
type Query {
message: String
}
`);
// Root resolver
var root = {
message: () => 'Hello World!'
};
// Create an express server and a GraphQL endpoint
var app = express();
app.use('/graphql', express_graphql({
schema: schema,
rootValue: root,
graphiql: true
}));
app.listen(4000, () => console.log('Express GraphQL Server Now Running On localhost:4000/graphql'));
実行してみます。
$ node server.js
Express GraphQL Server Now Running On localhost:4000/graphql
ブラウザで、http://localhost:4000/graphql
にアクセスしてみると、クエリができるGraphiQLの画面が出てきます。
クエリしてみる
最初のクエリを送ってみます。左側のペーンに下のクエリを貼り付け、実行ボタンをクリックします。
{
message
}
そうすると、右側に結果が表示されました。
ちゃんと"Hello World!"
できました!
今回は単純なパラメータの無い単純なクエリでしたが、パラメータを付ける場合は、左下をクリックするとフィールドが出てきます。
パラメータを受け取るGraphQLサーバ
もうちょっと中身のある、パラメータを受け取って、結果を返すサーバです。course
とcourses
という二つのクエリが定義されています。データは埋め込みとなっている簡単なものです。
下の内容の、server2.js
を作成します。
var express = require('express');
var express_graphql = require('express-graphql');
var { buildSchema } = require('graphql');
// GraphQL schema
var schema = buildSchema(`
type Query {
course(id: Int!): Course
courses(topic: String): [Course]
},
type Course {
id: Int
title: String
author: String
description: String
topic: String
url: String
}
`);
var coursesData = [
{
id: 1,
title: 'The Complete Node.js Developer Course',
author: 'Andrew Mead, Rob Percival',
description: 'Learn Node.js by building real-world applications with Node, Express, MongoDB, Mocha, and more!',
topic: 'Node.js',
url: 'https://codingthesmartway.com/courses/nodejs/'
},
{
id: 2,
title: 'Node.js, Express & MongoDB Dev to Deployment',
author: 'Brad Traversy',
description: 'Learn by example building & deploying real-world Node.js applications from absolute scratch',
topic: 'Node.js',
url: 'https://codingthesmartway.com/courses/nodejs-express-mongodb/'
},
{
id: 3,
title: 'JavaScript: Understanding The Weird Parts',
author: 'Anthony Alicea',
description: 'An advanced JavaScript course for everyone! Scope, closures, prototypes, this, build your own framework, and more.',
topic: 'JavaScript',
url: 'https://codingthesmartway.com/courses/understand-javascript/'
}
]
var getCourse = function(args) {
var id = args.id;
return coursesData.filter(course => {
return course.id == id;
})[0];
}
var getCourses = function(args) {
if (args.topic) {
var topic = args.topic;
return coursesData.filter(course = course.topic === topic);
} else {
return coursesData;
}
}
var root = {
course: getCourse,
courses: getCourses
};
// Create an express server and a GraphQL endpoint
var app = express();
app.use('/graphql', express_graphql({
schema: schema,
rootValue: root,
graphiql: true
}));
app.listen(4000, () => console.log('Express GraphQL Server Now Running On localhost:4000/graphql'));
実行してみます。
$ node server2.js
Express GraphQL Server Now Running On localhost:4000/graphql
クエリを送ってみる
courseを一つ取り出すクエリを送ってみます。パラメータとして整数$couseIDを付けて、courseからtitle, author, descrption, topic, urlを取り出します。
左上にクエリを貼り付けます。
query getSingleCourse($courseID: Int!) {
course(id: $courseID) {
title
author
description
topic
url
}
}
パラメータとして、左下に貼り付けます。
{
"courseID":1
}
そして実行してみます。
ちゃんと結果が得られました!
違うクエリを試す
もう一つcourses
というクエリが定義されていますので、こちらも試してみます。topicが一致するものを複数返すというクエリです。今度はtitleとurlだけを返すようにしてみます。
query getCourses($topic: String!) {
courses(topic: $topic) {
title
url
}
}
パラメータを、左下に貼り付けます。
{
"topic":"Node.js"
}
topicが"Node.js"となっているcourseが二つ返答されました。
更新できるGraphQLサーバ
問い合わせだけじゃなく、更新も試してみます。
さきほどのserver2.js
をコピーして、更新用のクエリを追加して、スキーマを置き換えます。
...
// GraphQL schema
var schema = buildSchema(`
type Query {
course(id: Int!): Course
courses(topic: String): [Course]
},
type Mutation {
updateCourseTopic(id: Int!, topic: String!): Course
}
type Course {
id: Int
title: String
author: String
description: String
topic: String
url: String
}
`);
...
そして、下記のデータ更新クエリの実装を追加します。
...
var updateCourseTopic = function({id, topic}) {
coursesData.map(course => {
if (course.id === id) {
course.topic = topic;
return course;
}
});
return coursesData.filter(course => course.id === id) [0];
}
var root = {
course: getCourse,
courses: getCourses,
updateCourseTopic: updateCourseTopic
};
...
先ほどと同様に、サーバを起動します。
$ node server3.js
更新クエリを送る
更新クエリupdateCourseTopic
を送ってみます。パラメータで$id
と$topic
を受け取り、fragmentで返すカラムを定義しています。
mutation updateCourseTopic($id: Int!, $topic: String!) {
updateCourseTopic(id: $id, topic: $topic) {
... courseFields
}
}
fragment courseFields on Course {
title
author
description
topic
url
}
パラメータです。id=1のtopicをJavaScriptに更新するという意味になります。
{
"id": 1,
"topic": "JavaScript"
}
クエリを実行してみると、ちゃんと更新した結果が返されました。
こんな感じで、クエリを追加したりしていけば、いろいろ試せそうです。
GraphiQL
express-graphql
に入っているGraphiQLという画面ですが、結構便利です。
ヒストリ
クエリのヒストリが出せて、編集しての再クエリが簡単にできます。
スキーマ
<Docs
というリンクをクリックすると、GraphQLサーバのスキーマを参照することができます。
スキーマからコンプリーションも機能するので、便利です。
まとめ
Node.jsとexpressを使ったGraphQLサーバを試してみました。単純なサーバを立てて、簡単なクエリを試すのが、とても簡単にできました。
GraphiQLという画面で、クエリをいろいろ試せるのがいい感じです。ぜひ試してみてください。
DBとつないだり、権限管理してみたり、サーバレスで動かしたりしてみたいですね!