nebel/intro-to-graphql
1
0
Fork 0
mirror of https://github.com/kou029w/intro-to-graphql.git synced 2025-02-01 14:48:42 +00:00
Code Issues Projects Releases Wiki Activity

Compare commits

base: nebel:0d345f7c3a0c0ea5ced7246fd735c85d9b267ca9
Branches Tags
nebel:main
..
compare: nebel:a33bccb9166887abd922cff8ffb30320f06b4bb0
Branches Tags
nebel:main

No commits in common. "0d345f7c3a0c0ea5ced7246fd735c85d9b267ca9" and "a33bccb9166887abd922cff8ffb30320f06b4bb0" have entirely different histories.
0d345f7c3a ... a33bccb916

5 changed files with 130 additions and 40 deletions
Show stats Expand all files Collapse all files

4
.github/workflows/github-pages.yml vendored
View file

@ -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
View file

@ -1 +0,0 @@
dist

4
Makefile
View file

@ -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
View file

@ -6,7 +6,7 @@ paginate: true
# GraphQL 概論 # GraphQL 概論
WebDINO Japan シニアエンジニア WebDINO Japan エンジニア
[渡邉浩平](https://github.com/kou029w) [渡邉浩平](https://github.com/kou029w)
![w:200](https://github.com/kou029w.png) ![w:200](https://github.com/kou029w.png)
@ -14,7 +14,7 @@ WebDINO Japan シニアエンジニア
## 人気の技術 ## 人気の技術
![bg right:72% State of JS 2020](./assets/datalayer-experience-ranking.png) ![bg right:72% State of JS 2020](https://stateofx-images.netlify.app/captures/js2020/en-US/datalayer_experience_ranking.png)
データ層分野 データ層分野
@ -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
![h:600 GraphQL Playground](https://i.imgur.com/AE5W6OW.png)
<!-- _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 を修飾できる
- ディレクティブ
--- ---

BIN
assets/datalayer-experience-ranking.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 186 KiB