mirror of
https://github.com/kou029w/intro-to-graphql.git
synced 2025-02-01 14:48:42 +00:00
Compare commits
No commits in common. "0d345f7c3a0c0ea5ced7246fd735c85d9b267ca9" and "a33bccb9166887abd922cff8ffb30320f06b4bb0" have entirely different histories.
0d345f7c3a
...
a33bccb916
5 changed files with 130 additions and 40 deletions
4
.github/workflows/github-pages.yml
vendored
4
.github/workflows/github-pages.yml
vendored
|
|
@ -11,8 +11,8 @@ jobs:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v2
|
- uses: actions/checkout@v2
|
||||||
- run: make build
|
- run: npx @marp-team/marp-cli README.md -o pages/index.html
|
||||||
- uses: actions/upload-pages-artifact@v1
|
- uses: actions/upload-pages-artifact@v1
|
||||||
with:
|
with:
|
||||||
path: dist
|
path: pages
|
||||||
- uses: actions/deploy-pages@v1
|
- uses: actions/deploy-pages@v1
|
||||||
|
|
|
||||||
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -1 +0,0 @@
|
||||||
dist
|
|
||||||
4
Makefile
4
Makefile
|
|
@ -1,4 +0,0 @@
|
||||||
.PHONY: build
|
|
||||||
build:
|
|
||||||
npx @marp-team/marp-cli README.md -o dist/index.html
|
|
||||||
rsync -av assets/ dist/assets/
|
|
||||||
161
README.md
161
README.md
|
|
@ -6,7 +6,7 @@ paginate: true
|
||||||
|
|
||||||
# GraphQL 概論
|
# GraphQL 概論
|
||||||
|
|
||||||
WebDINO Japan シニアエンジニア
|
WebDINO Japan エンジニア
|
||||||
[渡邉浩平](https://github.com/kou029w)
|
[渡邉浩平](https://github.com/kou029w)
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -14,7 +14,7 @@ WebDINO Japan シニアエンジニア
|
||||||
|
|
||||||
## 人気の技術
|
## 人気の技術
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
データ層分野
|
データ層分野
|
||||||
|
|
||||||
|
|
@ -75,7 +75,7 @@ https://graphql-pokemon2.vercel.app
|
||||||
- 2019 年 [GraphQL Foundation](https://graphql.org/foundation/) に移管
|
- 2019 年 [GraphQL Foundation](https://graphql.org/foundation/) に移管
|
||||||
|
|
||||||
Facebook が GraphQL を開発した理由は、[モバイルネイティブアプリ対応のため](https://reactjs.org/blog/2015/05/01/graphql-introduction.html)
|
Facebook が GraphQL を開発した理由は、[モバイルネイティブアプリ対応のため](https://reactjs.org/blog/2015/05/01/graphql-introduction.html)
|
||||||
スマートフォン普及に伴うプラットフォームの多様化が背景
|
スマホの普及に伴う低速、省電力なデバイスの利用の増加が背景
|
||||||
|
|
||||||
現在はオープンソースな仕様になっており、自由に貢献できる
|
現在はオープンソースな仕様になっており、自由に貢献できる
|
||||||
https://github.com/graphql/graphql-spec
|
https://github.com/graphql/graphql-spec
|
||||||
|
|
@ -236,6 +236,7 @@ apollo.fetch(query: pokemonQuery) { result in
|
||||||
#### 便利なツールの紹介
|
#### 便利なツールの紹介
|
||||||
|
|
||||||
- GraphiQL … GraphQL の開発環境
|
- GraphiQL … GraphQL の開発環境
|
||||||
|
- GraphQL Playground … より強力な GraphQL の開発環境
|
||||||
- Public GraphQL APIs … 公開されている GraphQL API の一覧
|
- Public GraphQL APIs … 公開されている GraphQL API の一覧
|
||||||
- GraphQL Code Generator … 自動コード生成
|
- GraphQL Code Generator … 自動コード生成
|
||||||
- Hasura … GraphQL サーバー
|
- Hasura … GraphQL サーバー
|
||||||
|
|
@ -250,6 +251,14 @@ apollo.fetch(query: pokemonQuery) { result in
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
#### GraphQL Playground
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- _footer: https://github.com/graphql/graphql-playground -->
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
#### Public GraphQL APIs
|
#### Public GraphQL APIs
|
||||||
|
|
||||||
公開されている GraphQL API 一覧の紹介
|
公開されている GraphQL API 一覧の紹介
|
||||||
|
|
@ -465,11 +474,15 @@ query {
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### 子孫関係
|
### 子孫関係の取得例
|
||||||
|
|
||||||
フィールドにフィールドを追加することで子孫関係を取得できる
|
```text
|
||||||
|
https://graphql-pokemon2.vercel.app/?query=query%20%7B%0A%20%20pokemon(name%3A%20%22Pikachu%22)%20%7B%0A%20%20%20%20classification%0A%20%20%20%20height%20%7B%0A%20%20%20%20%20%20minimum%0A%20%20%20%20%20%20maximum%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D
|
||||||
|
```
|
||||||
|
|
||||||
[子孫関係の例](<https://graphql-pokemon2.vercel.app/?query=query%20%7B%0A%20%20pokemon(name%3A%20%22Pikachu%22)%20%7B%0A%20%20%20%20classification%0A%20%20%20%20height%20%7B%0A%20%20%20%20%20%20minimum%0A%20%20%20%20%20%20maximum%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D>)
|
[この URL にアクセス](<https://graphql-pokemon2.vercel.app/?query=query%20%7B%0A%20%20pokemon(name%3A%20%22Pikachu%22)%20%7B%0A%20%20%20%20classification%0A%20%20%20%20height%20%7B%0A%20%20%20%20%20%20minimum%0A%20%20%20%20%20%20maximum%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D>)
|
||||||
|
|
||||||
|
または
|
||||||
|
|
||||||
```graphql
|
```graphql
|
||||||
query {
|
query {
|
||||||
|
|
@ -477,7 +490,25 @@ query {
|
||||||
classification
|
classification
|
||||||
height {
|
height {
|
||||||
minimum # <=
|
minimum # <=
|
||||||
maximum # <= これらのフィールド
|
maximum # <= これらのフィールドが加わる
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 子孫関係
|
||||||
|
|
||||||
|
フィールドにフィールドを追加することで子孫関係を取得できる
|
||||||
|
|
||||||
|
```graphql
|
||||||
|
query {
|
||||||
|
pokemon(name: "Pikachu") {
|
||||||
|
classification
|
||||||
|
height {
|
||||||
|
minimum
|
||||||
|
maximum
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -503,11 +534,15 @@ https://graphql-pokemon2.vercel.app
|
||||||
|
|
||||||
### 発展的な構文
|
### 発展的な構文
|
||||||
|
|
||||||
- 変数 … Query を再利用できる
|
---
|
||||||
- 操作名 … 複数の操作を識別できる
|
|
||||||
- エイリアス … フィールドに名前を付ける
|
### 変数の使用例
|
||||||
- フラグメント … いくつかのフィールドをまとめる
|
|
||||||
- ディレクティブ … Query を修飾できる
|
```text
|
||||||
|
https://graphql-pokemon2.vercel.app/?query=query%20(%24name%3A%20String!)%20%7B%0A%20%20pokemon(name%3A%20%24name)%20%7B%0A%20%20%20%20classification%0A%20%20%20%20height%20%7B%0A%20%20%20%20%20%20minimum%0A%20%20%20%20%20%20maximum%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D&variables=%7B%0A%20%20%22name%22%3A%20%22Pikachu%22%0A%7D
|
||||||
|
```
|
||||||
|
|
||||||
|
[この URL にアクセス](<https://graphql-pokemon2.vercel.app/?query=query%20(%24name%3A%20String!)%20%7B%0A%20%20pokemon(name%3A%20%24name)%20%7B%0A%20%20%20%20classification%0A%20%20%20%20height%20%7B%0A%20%20%20%20%20%20minimum%0A%20%20%20%20%20%20maximum%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D&variables=%7B%0A%20%20%22name%22%3A%20%22Pikachu%22%0A%7D>)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
@ -515,8 +550,6 @@ https://graphql-pokemon2.vercel.app
|
||||||
|
|
||||||
変数を使うことで Query を再利用できる
|
変数を使うことで Query を再利用できる
|
||||||
|
|
||||||
[変数の使用例](<https://graphql-pokemon2.vercel.app/?query=query%20(%24name%3A%20String!)%20%7B%0A%20%20pokemon(name%3A%20%24name)%20%7B%0A%20%20%20%20classification%0A%20%20%20%20height%20%7B%0A%20%20%20%20%20%20minimum%0A%20%20%20%20%20%20maximum%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D&variables=%7B%0A%20%20%22name%22%3A%20%22Pikachu%22%0A%7D>)
|
|
||||||
|
|
||||||
<!-- prettier-ignore-start -->
|
<!-- prettier-ignore-start -->
|
||||||
```graphql
|
```graphql
|
||||||
query ($name: String!) { # <= 変数の定義
|
query ($name: String!) { # <= 変数の定義
|
||||||
|
|
@ -536,11 +569,13 @@ query ($name: String!) { # <= 変数の定義
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### 操作名
|
### 操作名の使用例
|
||||||
|
|
||||||
操作に名前を付けることで複数の操作を識別できる
|
```text
|
||||||
|
https://graphql-pokemon2.vercel.app/?query=query%20fetchPokemonNames%20%7B%0A%20%20pokemons(first%3A%20151)%20%7B%0A%20%20%20%20name%0A%20%20%7D%0A%7D%0A%0Aquery%20fetchPikachu%20%7B%0A%20%20pokemon(name%3A%20%22Pikachu%22)%20%7B%0A%20%20%20%20classification%0A%20%20%7D%0A%7D&operationName=fetchPokemonNames
|
||||||
|
```
|
||||||
|
|
||||||
[操作名の使用例](<https://graphql-pokemon2.vercel.app/?query=query%20fetchPokemonNames%20%7B%0A%20%20pokemons(first%3A%20151)%20%7B%0A%20%20%20%20name%0A%20%20%7D%0A%7D%0A%0Aquery%20fetchPikachu%20%7B%0A%20%20pokemon(name%3A%20%22Pikachu%22)%20%7B%0A%20%20%20%20classification%0A%20%20%7D%0A%7D&operationName=fetchPokemonNames>)
|
[この URL にアクセス](<https://graphql-pokemon2.vercel.app/?query=query%20fetchPokemonNames%20%7B%0A%20%20pokemons(first%3A%20151)%20%7B%0A%20%20%20%20name%0A%20%20%7D%0A%7D%0A%0Aquery%20fetchPikachu%20%7B%0A%20%20pokemon(name%3A%20%22Pikachu%22)%20%7B%0A%20%20%20%20classification%0A%20%20%7D%0A%7D&operationName=fetchPokemonNames>)
|
||||||
|
|
||||||
<!-- prettier-ignore-start -->
|
<!-- prettier-ignore-start -->
|
||||||
```graphql
|
```graphql
|
||||||
|
|
@ -558,15 +593,39 @@ query fetchPikachu { # <= 操作に名前を付ける
|
||||||
```
|
```
|
||||||
<!-- prettier-ignore-end -->
|
<!-- prettier-ignore-end -->
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 操作名
|
||||||
|
|
||||||
|
操作に名前を付けることで複数の操作を識別できる
|
||||||
|
|
||||||
|
```graphql
|
||||||
|
query fetchPokemonNames {
|
||||||
|
pokemons(first: 151) {
|
||||||
|
name
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
query fetchPikachu {
|
||||||
|
pokemon(name: "Pikachu") {
|
||||||
|
classification
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
`fetchPokemonNames`, `fetchPikachu` … 操作名
|
`fetchPokemonNames`, `fetchPikachu` … 操作名
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### エイリアス
|
### エイリアスの使用例
|
||||||
|
|
||||||
フィールドに名前を付ける
|
```text
|
||||||
|
https://graphql-pokemon2.vercel.app/?query=query%20%7B%0A%20%20pikachu%3A%20pokemon(name%3A%20%22Pikachu%22)%20%7B%0A%20%20%20%20classification%0A%20%20%7D%0A%7D&variables=
|
||||||
|
```
|
||||||
|
|
||||||
[エイリアスの使用例](<https://graphql-pokemon2.vercel.app/?query=query%20%7B%0A%20%20pikachu%3A%20pokemon(name%3A%20%22Pikachu%22)%20%7B%0A%20%20%20%20classification%0A%20%20%7D%0A%7D>)
|
[この URL にアクセス](<https://graphql-pokemon2.vercel.app/?query=query%20%7B%0A%20%20pikachu%3A%20pokemon(name%3A%20%22Pikachu%22)%20%7B%0A%20%20%20%20classification%0A%20%20%7D%0A%7D>)
|
||||||
|
|
||||||
|
または
|
||||||
|
|
||||||
<!-- prettier-ignore-start -->
|
<!-- prettier-ignore-start -->
|
||||||
```graphql
|
```graphql
|
||||||
|
|
@ -578,7 +637,9 @@ query {
|
||||||
```
|
```
|
||||||
<!-- prettier-ignore-end -->
|
<!-- prettier-ignore-end -->
|
||||||
|
|
||||||
取得結果
|
---
|
||||||
|
|
||||||
|
#### 取得結果
|
||||||
|
|
||||||
<!-- prettier-ignore-start -->
|
<!-- prettier-ignore-start -->
|
||||||
```json
|
```json
|
||||||
|
|
@ -594,14 +655,37 @@ query {
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
### エイリアス
|
||||||
|
|
||||||
|
フィールドに名前を付ける
|
||||||
|
|
||||||
|
```graphql
|
||||||
|
query {
|
||||||
|
pikachu: pokemon(name: "Pikachu") {
|
||||||
|
classification
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
`pikachu` … エイリアス
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### フラグメントの使用例
|
||||||
|
|
||||||
|
```text
|
||||||
|
https://graphql-pokemon2.vercel.app/?query=fragment%20dimension%20on%20PokemonDimension%20%7B%0A%20%20minimum%0A%20%20maximum%0A%7D%0A%0Aquery%20%7B%0A%20%20pokemon(name%3A%20%22Pikachu%22)%20%7B%0A%20%20%20%20classification%0A%20%20%20%20height%20%7B%0A%20%20%20%20%20%20...dimension%0A%20%20%20%20%7D%0A%20%20%20%20weight%20%7B%0A%20%20%20%20%20%20...dimension%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D
|
||||||
|
```
|
||||||
|
|
||||||
|
[この URL にアクセス](<https://graphql-pokemon2.vercel.app/?query=fragment%20dimension%20on%20PokemonDimension%20%7B%0A%20%20minimum%0A%20%20maximum%0A%7D%0A%0Aquery%20%7B%0A%20%20pokemon(name%3A%20%22Pikachu%22)%20%7B%0A%20%20%20%20classification%0A%20%20%20%20height%20%7B%0A%20%20%20%20%20%20...dimension%0A%20%20%20%20%7D%0A%20%20%20%20weight%20%7B%0A%20%20%20%20%20%20...dimension%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D>)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
### フラグメント
|
### フラグメント
|
||||||
|
|
||||||
いくつかのフィールドをまとめ、そのフィールドを取得する際に使用できる
|
いくつかのフィールドをまとめ、そのフィールドを取得する際に使用できる
|
||||||
|
|
||||||
[フラグメントの使用例](<https://graphql-pokemon2.vercel.app/?query=fragment%20dimension%20on%20PokemonDimension%20%7B%0A%20%20minimum%0A%20%20maximum%0A%7D%0A%0Aquery%20%7B%0A%20%20pokemon(name%3A%20%22Pikachu%22)%20%7B%0A%20%20%20%20classification%0A%20%20%20%20height%20%7B%0A%20%20%20%20%20%20...dimension%0A%20%20%20%20%7D%0A%20%20%20%20weight%20%7B%0A%20%20%20%20%20%20...dimension%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D>)
|
|
||||||
|
|
||||||
```graphql
|
```graphql
|
||||||
# フラグメントの定義
|
|
||||||
fragment dimension on PokemonDimension {
|
fragment dimension on PokemonDimension {
|
||||||
minimum
|
minimum
|
||||||
maximum
|
maximum
|
||||||
|
|
@ -611,22 +695,34 @@ query {
|
||||||
pokemon(name: "Pikachu") {
|
pokemon(name: "Pikachu") {
|
||||||
classification
|
classification
|
||||||
height {
|
height {
|
||||||
...dimension # <= フラグメントの使用
|
...dimension
|
||||||
}
|
}
|
||||||
weight {
|
weight {
|
||||||
...dimension # <= フラグメントの使用
|
...dimension
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
`dimension` … フラグメント
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### ディレクティブの使用例
|
||||||
|
|
||||||
|
```text
|
||||||
|
https://graphql-pokemon2.vercel.app/?query=query%20(%24showClassification%3A%20Boolean!)%20%7B%0A%20%20pokemon(name%3A%20%22Pikachu%22)%20%7B%0A%20%20%20%20classification%20%40include(if%3A%20%24showClassification)%0A%20%20%7D%0A%7D%0A&variables=%7B%0A%20%20%22showClassification%22%3A%20true%0A%7D
|
||||||
|
```
|
||||||
|
|
||||||
|
[この URL にアクセス](<https://graphql-pokemon2.vercel.app/?query=query%20(%24showClassification%3A%20Boolean!)%20%7B%0A%20%20pokemon(name%3A%20%22Pikachu%22)%20%7B%0A%20%20%20%20classification%20%40include(if%3A%20%24showClassification)%0A%20%20%7D%0A%7D%0A&variables=%7B%0A%20%20%22showClassification%22%3A%20true%0A%7D>)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### ディレクティブ
|
### ディレクティブ
|
||||||
|
|
||||||
Query を修飾できる
|
Query を修飾できる
|
||||||
|
|
||||||
[`@include` ディレクティブの使用例](<https://graphql-pokemon2.vercel.app/?query=query%20(%24showClassification%3A%20Boolean!)%20%7B%0A%20%20pokemon(name%3A%20%22Pikachu%22)%20%7B%0A%20%20%20%20classification%20%40include(if%3A%20%24showClassification)%0A%20%20%7D%0A%7D%0A&variables=%7B%0A%20%20%22showClassification%22%3A%20true%0A%7D>)
|
`@include` ディレクティブの例
|
||||||
|
|
||||||
```graphql
|
```graphql
|
||||||
query ($showClassification: Boolean!) {
|
query ($showClassification: Boolean!) {
|
||||||
|
|
@ -656,12 +752,11 @@ query ($showClassification: Boolean!) {
|
||||||
- フィールド
|
- フィールド
|
||||||
- 引数と値
|
- 引数と値
|
||||||
- 子孫関係
|
- 子孫関係
|
||||||
- 発展的な構文
|
- 変数 … Query を再利用できる
|
||||||
- 変数
|
- 操作名 … 複数の操作を識別できる
|
||||||
- 操作名
|
- エイリアス … フィールドに名前を付ける
|
||||||
- エイリアス
|
- フラグメント … いくつかのフィールドをまとめる
|
||||||
- フラグメント
|
- ディレクティブ … Query を修飾できる
|
||||||
- ディレクティブ
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 186 KiB |
Loading…
Add table
Reference in a new issue