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

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

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

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

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

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

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

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

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

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

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

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