DocumentNodeによる
Graphqlのフロントエンド実装
1/11

自己紹介
名前：高野 且次(タカノ カツシ)
誕生日：1993/5/6 (現在29歳)
職業：株式会社マーケライズ/開発チーム所属
WEBエンジニア2年目
趣味：一人旅、温泉、水泳、ロードバイクなど
使用言語：PHP Python TypeScript
2/11

今回発表すること
・GraphQLとは？
・GraphQLクエリ自動型付けツール「graphql-codegen」
3/11
・GraphQLクエリ形式の一つ「DocumentNode」
・GraphQLクライアントライブラリ「Urql」

Graphql
クライアント
Graphql
サーバー
リクエスト
レスポンス
クライアント側のクエリから
リクエストを作成して送信する
柔軟かつ効率的なデータ通信を行うための、比較的新しいAPI向けクエリ言語
GraphQLとは？
4/11
このクエリで次の情報を
一度に取得できる
・全てのPostのデータ
・そのPostを投稿した
アカウントの名前
・そのPostに投稿された
コメントの文章

GraphQLとフロントエンドの型付け
4/11
・GraphqlはDemand-Driven Architecture (DDA)
フロントエンド側で自由にレスポンスの形を決めることができる
自由であることの代償に、フロントエンド側には
サービスの要件を必要十分に満たすリクエストを送る責任が伴う
・要件を満たしつつ、快適な開発を体験するために
リクエストを作成するクエリ言語を型付けしたい
可能な限り、フロントエンドのライブラリに依存しない型を用意したい

graphql-codegenによる自動型付け
9/11
・Graphqlフロントエンド開発に広く使われる、
クエリの自動型付けツール
・Graphqlライブラリごとに、クエリとレスポンスが
型付けされたデータ取得フックを自動作成できる
・Graphqlサーバーと、サーバーに問い合わせるための
クエリを用意し、ツールを起動する

graphql-codegenで作成したフックの例
9/11
Graphqlライブラリの一つ、
Urqlの自動生成されたフック
この記述はすべて、
型も含めて自動生成されたもの
自動生成された関数でデータ取得と
コンポーネントへの値渡しの例

GraphqlとDocumentNode
8/11
・DocumentNodeとは、クエリを
Graphqlの抽象構文木にパースしたもの
DocumentNodeは、gql`...` 形式の
テンプレートリテラルによって
作成できる

GraphqlライブラリとDocumentNode
8/11
Apollo Client
Urql
種々のライブラリにおいて、Graphqlに問い合わせる処理には
DocumentNodeを渡すケースが多い

graphql-codegenによるDocumentNode自動作成
ライブラリのフックを生成するのではなく、
DocumentNodeを生成してライブラリへの依存を軽くする
生成されたDocumentNode
・・・
DocumentNodeの型定義も
行われている
ライブラリの問い合わせ処理に
DocumentNodeを渡す。
※この例ではUrqlを使用

まとめ
・Graphqlのクエリを型付けすることで、
過不足ないデータ取得と快適な開発を両立できる
・graphql-codegenにより、必要なクエリの型や、
データ取得フックを一瞬で構築できる。
11/11
・graphql-codegenでDocumentNodeを生成することで、
様々なフロントエンドライブラリに対応できる