mirror of
https://github.com/kou029w/intro-to-graphql.git
synced 2025-01-18 16:08:03 +00:00
fix
This commit is contained in:
parent
d320f02d6b
commit
1bd4cd1d45
1 changed files with 19 additions and 32 deletions
51
README.md
51
README.md
|
@ -112,41 +112,14 @@ https://graphql.org/learn/schema/
|
||||||
|
|
||||||
### 1. 単一リクエスト
|
### 1. 単一リクエスト
|
||||||
|
|
||||||
REST には複数のエンドポイントへの問い合わせを行うという典型的な課題がある
|
|
||||||
|
|
||||||
GraphQL は単一のリクエストで指定したデータを取得できる
|
GraphQL は単一のリクエストで指定したデータを取得できる
|
||||||
=> 効率的なデータの読み込み
|
|
||||||
|
|
||||||
- クライアントのデータ取得の効率化
|
- クライアントのデータ取得の効率化
|
||||||
- データの表現の柔軟さ
|
|
||||||
- エンドポイントの管理の容易さ
|
- エンドポイントの管理の容易さ
|
||||||
|
|
||||||
Facebook が GraphQL を開発した理由は、[モバイルネイティブアプリへの移行のため](https://reactjs.org/blog/2015/05/01/graphql-introduction.html)
|
Facebook が GraphQL を開発した理由は、[モバイルネイティブアプリ対応のため](https://reactjs.org/blog/2015/05/01/graphql-introduction.html)
|
||||||
スマホの普及に伴う低速、省電力なデバイスの利用の増加が背景
|
スマホの普及に伴う低速、省電力なデバイスの利用の増加が背景
|
||||||
|
|
||||||
<!--
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
#### REST の課題 オーバーフェッチ・アンダーフェッチ・エンドポイント管理
|
|
||||||
|
|
||||||
-->
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
#### REST vs GraphQL
|
|
||||||
|
|
||||||
| 特徴 | REST | GraphQL |
|
|
||||||
| ---------------------------- | ---- | ------- |
|
|
||||||
| オーバーフェッチの解消 | ❌ | ✅ |
|
|
||||||
| アンダーフェッチの解消 | ❌ | ✅ |
|
|
||||||
| エンドポイントの管理の容易さ | ❌ | ✅ |
|
|
||||||
| エンドポイントの実装の単純さ | ✅ | ❌ |
|
|
||||||
|
|
||||||
GraphQL は複数のリソースを単一の HTTP POST (Query のみなら GET) リクエストで取得できる
|
|
||||||
=> REST の典型的な課題を解消できる
|
|
||||||
その代わり、エンドポイントの実装は REST と比較して複雑になりやすい
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
#### REST
|
#### REST
|
||||||
|
@ -163,17 +136,31 @@ https://hasura.io/learn/graphql/intro-graphql/graphql-vs-rest/
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
#### REST vs GraphQL
|
||||||
|
|
||||||
|
| 特徴 | REST | GraphQL |
|
||||||
|
| ---------------------------- | :--: | :-----: |
|
||||||
|
| オーバーフェッチの解消 | ❌ | ✅ |
|
||||||
|
| アンダーフェッチの解消 | ❌ | ✅ |
|
||||||
|
| エンドポイントの管理の容易さ | ❌ | ✅ |
|
||||||
|
| エンドポイントの実装の単純さ | ✅ | ❌ |
|
||||||
|
|
||||||
|
GraphQL は複数のリソースを単一の HTTP POST (Query のみなら GET) リクエストで取得できる
|
||||||
|
その代わり、エンドポイントの実装は REST と比較して複雑になりやすい
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
### 2. 型システム
|
### 2. 型システム
|
||||||
|
|
||||||
さまざまなフロントエンド環境のサポート
|
単一リクエストを支える GraphQL エンドポイントの構築と正確なデータ構造の維持
|
||||||
|
|
||||||
単一 API の構築と正確なデータ構造の維持
|
|
||||||
クライアントアプリケーションを実行するフロントエンドフレームワークとプラットフォームの多様化が背景
|
クライアントアプリケーションを実行するフロントエンドフレームワークとプラットフォームの多様化が背景
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
#### GraphQL Schema
|
#### GraphQL Schema
|
||||||
|
|
||||||
|
データ構造と操作を宣言するスキーマ言語
|
||||||
|
|
||||||
```graphql=
|
```graphql=
|
||||||
"""ポケモンを表します"""
|
"""ポケモンを表します"""
|
||||||
type Pokemon {
|
type Pokemon {
|
||||||
|
@ -330,7 +317,7 @@ GraphQL の基礎知識
|
||||||
|
|
||||||
内容
|
内容
|
||||||
|
|
||||||
- 3 種類の操作
|
- GraphQL の操作
|
||||||
- Query によるデータの取得
|
- Query によるデータの取得
|
||||||
|
|
||||||
実際に GraphQL API からデータを取得できるようになる
|
実際に GraphQL API からデータを取得できるようになる
|
||||||
|
|
Loading…
Add table
Reference in a new issue