GraphQLってなんぞや？！

GraphQLってなんぞや？！ チョ ジョンミン

GraphQLを知っている方

入門的な内容になります

まだ、自分も興味程度の勉強しかしていません

今回は勉強仲間を増やしたいです！！

目次 • GraphQL概要 • GraphQL構成 • GraphQL API デモ

GraphQL概要

GraphQLとは • 2012年Facebookが開発し2015年にリリースした 一つのデータ通信規約 • Clientからサービスに必要なデータをQueryで取得できる APIのためのQuery言語 (みなさんが考えるDBのSQLとは違うもの)

GraphQLとはと言われても、、、

query { search(query: "GraphQL", type: REPOSITORY) { repositoryCount } } JSON { "data": {"search": { "repositoryCount": 2955 } } }

GraphQL特徴 • 単一Entry Point、Single End Point (絶対ではありません。) • 必要なデータだけ取得 • 型システム (GraphQL Type)

{ REST } https://sample.com/users/{id} https://sample.com/books/{id} https://sample.com/cards/ • • •

query { search(query: "GraphQL", type: REPOSITORY) { repositoryCount } } JSON { "data": {"search": { "repositoryCount": 2955 } } } https://sample.com/graphql

GraphQL特徴 - 必要なデータだけ取得 • REST APIのようにレスポンスが固定ではない • 必要なデータを取得するQueryをAPIに送信すればOK

GraphQL特徴 - 必要なデータだけ取得 この特徴の素晴らしさをもっと知ってもらいたいので Github APIを例にしてREST (v3) とGraphQL (v4) の 違いを説明します。

GraphQL特徴 - 必要なデータだけ取得 下記のような情報が欲しいと仮定します。 • Userのlogin情報が欲しい場合 • Userのlogin、Name、Url情報が欲しい場合

GraphQL特徴 - 必要なデータだけ取得
Github Api v3(REST)
GET /users/:username
Response
Status: 200 OK
{
"login": "octocat",
"id": 1,
"node_id": "MDQ6VXNlcjE=",
"avatar_url": "https://github.com/images/error/octocat_happy.gif",
"gravatar_id": "",
"url": "https://api.github.com/users/octocat",
"html_url": "https://github.com/octocat",
"followers_url": "https://api.github.com/users/octocat/followers",
"following_url": "https://api.github.com/users/octocat/following{/other_user}",
"gists_url": "https://api.github.com/users/octocat/gists{/gist_id}",
"starred_url": "https://api.github.com/users/octocat/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/octocat/subscriptions",
"organizations_url": "https://api.github.com/users/octocat/orgs",
"repos_url": "https://api.github.com/users/octocat/repos",
"events_url": "https://api.github.com/users/octocat/events{/privacy}",
"received_events_url": "https://api.github.com/users/octocat/received_events",
"type": "User",
"site_admin": false,
"name": "monalisa octocat",
"company": "GitHub",
"blog": "https://github.com/blog",
"location": "San Francisco",
"email": "[email protected]",
"hireable": false,
"bio": "There once was...",
"public_repos": 2,
"public_gists": 1,
"followers": 20,
"following": 0,
"created_at": "2008-01-14T04:33:35Z",
"updated_at": "2008-01-14T04:33:35Z"
}

GraphQL特徴 - 必要なデータだけ取得
Github Api v4
(GraphQL)
• Login情報のみほしい
GraphiQL
1 # Type queries into this si
2 # see intelligent typeahead
3 # live syntax, and validati
4
5 # We'll get you started wit
6 query {
7 user (login: "klowa") {
8 login
9 }
10 }
{
"data": {
"user": {
"login": "klowa"
}
}
}

GraphQL特徴 - 必要なデータだけ取得
Github Api v4
(GraphQL)
• Login、Name、Url
情報が欲しい
GraphiQL
1 # Type queries into this si
2 # see intelligent typeahead
3 # live syntax, and validati
4
5 # We'll get you started wit
6 query {
7 user (login: "klowa") {
8 login
9 name
10 url
11 }
12 }
{
"data": {
"user": {
"login": "klowa",
"name": null,
"url": "https://github.com/klowa"
}
}
}

あら、、便利🎉🎉🎉

さらに！！GraphQLポテンシャル • GithubのAPI (v4) がGraphQLを採用💪💪💪！！ • ヤフーの一部サービスでも利用している🎉🎉🎉！！ • Etc..

GraphQL構成

GraphQLの構成要素 • Type • Query • Mutation • Schema

GraphQLの構成要素 - Type • Type • APIで扱うデータのこと • Queryで取得したり • Mutationでデータの登録/更新/削除

GraphQLの構成要素 - Query • Query • REST APIでいうとGet • データの取得の定義

GraphQLの構成要素 - Mutation • Mutation • REST APIでいうとPost/Patch/Put/Delete/ • データの登録/更新/削除の定義

GraphQLの構成要素 - Schema • Schema • GraphQL APIの振る舞いが定義されるところ • Type、Query、Mutationなどが定義される

文字だけで説明しても、、

GraphQL API デモ

API概要 • Type • Author : 著者 • Book : 本 • Query • getAuthorById : 著者Idから著者情報を取得する • Mutation • registAuthor : 著者の登録 • registBook : 本の登録

GraphQL API デモ • 利用している言語 : Java • 利用しているライブラリ : • Spring Boot • GraphQL Java Tools • など • DB : Mysql • サンプルコード : https://github.com/klowa/example-graphql-api • サンプルコードに関する記事 : https://techblog.yahoo.co.jp/advent-calendar-2018/create-springbook-graphql-api

GraphQL API デモ • デモ : 1. Schema確認 2. Author情報登録 3. Author情報取得 4. Book登録 5. Author情報取得

ご静聴ありがとうございました！