GraphQL
https://gyazo.com/15b24659a736b7d618e0c9416a1199c5
GraphQL | A query language for your API
特徴
APIのための問い合わせ言語
一般的にHTTP Hypertext Transfer Protocolを使用
クエリ queryを実行してデータを呼び出すためのランタイム Runtime
RESTful APIの課題を解決できる
1クエリ queryで取得したい
代替でなく併用
分解・最適化 モデル
RESTful APIで渡すJSONにデータ型 data typeがなくフワフワとしてる
データ型 data typeつけたい
Web front-endのための、APIを用意したい。
設計原則
階層構造
フィールド 他のフィールドの入れ子
クエリ レスポンスと同じ構造
プロダクト中心
データを必要とするクライアントの言語やランタイム Runtimeに従って実装
強い型付け
フィールドは固有の型をもち、バリデーションされる
クライアントごとのクエリ
クライアントが必要とする機能を提供
自己参照
GraphQL言語はGraphQLサーバー自身の型システムを問い合わせ可能
背景
Facebookが使ってたものをオープン化
GitHubが使い始めて有名に
使い分け
TypeScriptでtypes 型定義書いてるのにGraphQLでかく必要はあるのか?
オーバーキル?
hr.icon
用語
スキーマ schema
クライアントが作成できるクエリ query操作とさまざまな型の関係を定義
データの要件を定義
リゾルバ
特定のフィールドをデータを返す関数
スキーマ schemaで指定されたとおりのデータを返す
ルート型
Query
Mutation
Subscription
hr.icon
Hello
code:graphql-hello.js
const { ApolloServer } = require('apollo-server');
// define schema
const typeDefs = `
type Query {
totalPhotos: Int!
}
`;
// define resolver
const resolvers = {
Query: {
totalPhotos: () => 42
}
};
const server = new ApolloServer({
typeDefs,
resolvers
});
// run server
server
.listen()
.then(({ url }) => console.log(GraphQL Service running on ${url}));
hr.icon
困りごと
locallhost:4000が400になる
by vscode VsualStudioCodeクリックアクセス
hr.icon
公式系
SWAPI GraphQL API
GraphQL query best practices - Client (React) - Apollo GraphQL Docs
どの実装方法がよいか分かる
参考記事
💯GraphQLでフロントエンドの複雑性とたたかう - Speaker Deck
GraphQL入門 - 使いたくなるGraphQL - Qiita
「GraphQL」徹底入門 ─ RESTとの比較、API・フロント双方の実装から学ぶ - エンジニアHub|若手Webエンジニアのキャリアを考える!
アプリ開発の流れを変える「GraphQL」はRESTとどう違うのか比較してみた - WPJ
💯GraphQLの全体像とWebApp開発のこれから - Qiita
hoge
AWS AppSyncと組み合わせたら楽になった話
GraphQLの基礎の基礎 - Qiita