GraphQLおよびそのエコシステム解説とチュートリアル紹介のためのプレゼンテーション資料
•
0 likes•12 views
GraphQLについて解説したプレゼンテーション資料です。 システム開発チームにおける技術研修の目的で作成しました。 GraphQLおよびそのエコシステムについて説明した上で、チュートリアルサイト（https://www.howtographql.com）におけるWebアプリケーションの実装例を紹介しています。 ・GraphQL SDL ・GraphQLクライアント ・GraphQLサーバー についてそれぞれ解説した、包括的な内容となっています。 ！お願い！ スライド内のリンクおよび参考文献につきまして、本PDFファイルをダウンロードの上、ご参照ください。
Recommended
More Related Content
Similar to GraphQLおよびそのエコシステム解説とチュートリアル紹介のためのプレゼンテーション資料
Similar to GraphQLおよびそのエコシステム解説とチュートリアル紹介のためのプレゼンテーション資料 (20)
GraphQLおよびそのエコシステム解説とチュートリアル紹介のためのプレゼンテーション資料
- 2. 目次 §1 GraphQL §1.1 GraphQLとは ➢ RESTとの比較 ➢ エコシステム ➢ ユースケース §1.2 GraphQL SDLについて ➢ GraphQL Playgroundの紹介 §1.3 GraphQLクライアントについて ➢ タグ付きテンプレートリテラル ➢ Apollo Clientの使用例 §1 GraphQL（続き） §1.4 GraphQLサーバーについて ➢ リゾルバー ➢ Apollo Serverの使用例 参考文献
- 3. 目次（再掲） §1 GraphQL §1.1 GraphQLとは ➢ RESTとの比較 ➢ エコシステム ➢ ユースケース §1.2 GraphQL SDLについて ➢ GraphQL Playgroundの紹介 §1.3 GraphQLクライアントについて ➢ タグ付きテンプレートリテラル ➢ Apollo Clientの使用例 §1 GraphQL（続き） §1.4 GraphQLサーバーについて ➢ リゾルバー ➢ Apollo Serverの使用例 参考文献
- 4. §1.1 GraphQLとは GraphQLは、API（Application Programming Interface）を記述するためのクエリ言語。 典型的なクライアント - サーバー通信を行うWebアプリケーションにおいては、 ❖ クライアントが、GraphQLの仕様にしたがったクエリを作成し、リクエスト ❖ サーバーは、すべてのクエリを１つのエンドポイントで受信 GraphQLの仕様にしたがって解析、要求されたデータを過不足なくレスポンス といった形式で活用される。 REST APIのもつ弱点を克服するべく登場した背景があり、APIを利用するクライアントに とって柔軟なデータの送受信を可能にする点が強みである。 注意︎ "データベースの技術"であると間違われることもあるGraphQLだが、実際には データベースに依存しない技術である！
- 5. ➢ RESTとの比較 GraphQLでは、クライアントが作成したクエリの内容によって、サーバーはレスポンスする データの構造を変化させる。 このレスポンスの柔軟性により、REST APIを利用するとき問題となる "Overfetching" - "Underfetching"（取得するデータの過不足）を回避することができる。 https://www.howtographql.com/basics/ 1-graphql-is-the-better-rest/ エンドポイントごとに レスポンスのデータ 構造は固定 リレーションがある データの取得には、 複数回の通信を 必要とする REST GraphQL エンドポイントは １つだけ リレーションがあるデータを １度に過不足なく通信可能
- 6. ➢ エコシステム GraphQLは、以下の３つを組み合わせ、活用される。 ❖ GraphQL SDL（Schema Definition Language = スキーマ定義言語） クライアントおよびサーバーが、APIを利用して送受信するデータの構造を 記述するための構文。 1つ１つのデータに型付けをすることができる。 ❖ GraphQLクライアント APIを利用して取得したいデータを、SDLに対応したフォーマット（=クエリ）として 渡すことにより、GraphQLサーバーとの通信を行うもの。 ❖ GraphQLサーバー リゾルバーと呼ばれる関数により、SDLによる定義と対応したデータを生成し、 API呼び出しに応じてレスポンスするもの。
- 7. ➢ ユースケース GraphQLを活用したアプリケーションの構成には、 GraphQLサーバーにおけるデータ取得元の違いから バリエーションが存在する。 例えば、GraphQLサーバーを ❖ データベースと接続 ❖ 既存システムと統合 ❖ データベースと接続し、既存システムと統合 することで必要なデータを取得、加工・整形し、 GraphQLクライアントに対してレスポンスする。 レスポンスの柔軟性から、クライアントデバイスに 応じて最適化されたデータ通信を実現できること、 などがメリットとして挙げられる。 https://www.howtographql.com/basics/ 3-big-picture/
- 8. §1.2 GraphQL SDLについて GraphQLには独自の型付けシステムがあり、APIを用いて送受信するデータの構造を 定義するのに、下表のデータ型を使用する。 型名 説明 Object いくつかのフィールドから 構成されるオブジェクト。 Scalar Int（符号付き32ビット整数）や String（UTF8文字列）などの 具体的なデータ。 Enumeration （Enums） 決められた値のうちで、いずれか １つとなるScalar。（列挙型） Interface 型を定義するために含めなければ ならないフィールドのグループ。 Union Objectの組み合わせ。いずれか １つのObjectが送受信されること を示す。 Input 検索や書き込みなどのパラメータ として使用されるObject。 "！"記号により、nullでない ことを示せる。 "[ ]"により、リストである ことを示せる。 GraphQLスキーマの例
- 9. §1.2 GraphQL SDLについて Objectには、"ルート型"と呼ばれる３つの特別な型が存在し、クライアントがサーバーに 対してクエリを実行するときの、エントリーポイントとして定義される。 ❖ Query 読み取り操作を実行するとき、指定可能なフィールドで構成する。 ❖ Mutation 書き込み操作を実行するとき、指定可能なフィールドで構成する。 ❖ Subscription リアルタイム接続を確立するとき、指定可能なフィールドで構成する。 クライアントまたはサーバーにおいて、特定のイベントが発生したときリアルタイムに データを送受信することができる。
- 10. ➢ GraphQL Playgroundの紹介 GraphQLのIDEである"GraphQL Playground"により、開発に役立つ機能が利用できる。 "JavaScript + Apollo Server Tutorial"より、Hackernewsのクローン（ローカルホスト） スキーマに定義された オブジェクトのフィールドで 取得したいものをエディタに 書き込み、再生ボタンを押下 （クエリの作成・実行） ☞ GraphQL PlaygroundでAPIドキュメントを閲覧、任意︎のクエリを実行 >>
- 11. §1.3 GraphQLクライアントについて GraphQLは多くのプログラミング言語で サポートされており、新規・既存を問わず 様々なプロジェクトに導入するチャンスが ある。 GraphQLクライアントが提供する機能の 例として、 ❖ 宣言的なデータの取得 ❖ UIと取得したデータの統合 ❖ データのキャッシング ❖ ビルド時のバリデーション などが挙げられる。 https://graphql.org/code/#language-support
- 12. ➢ タグ付きテンプレートリテラル JavaScriptにおいて、テンプレートリテラルに 与えられた形式のひとつで、"タグ関数"による 解析・操作が可能なもの。 参考 ： Template literals (Template strings) 人気のGraphQLクライアントの一つである Apollo Client（JavaScript）は、GraphQL クエリの作成にタグ付きテンプレートリテラル を活用している。 タグ関数の例
- 13. ➢ Apollo Clientの使用例 GraphQLコミュニティとPrismaによる、"React + Apollo Tutorial"の内容を一部抜粋して 紹介する。 ソースコード ： https://github.com/howtographql/react-apollo Hackernewsのクローン（ローカルホスト）
- 14. ➢ Apollo Clientの使用例 ☞ Apollo ClientのセットアップおよびQuery/Mutation/Subscriptionの実行箇所を コードリーディング >> ❖ セットアップ react-apollo/src/index.js ❖ Query/Subscription react-apollo/src/components/LinkList.js ❖ Mutation react-apollo/src/components/CreateLink.js
- 15. §1.4 GraphQLサーバーについて アプリケーションのもつ多くのデータは、 ❖ ノード ： オブジェクト ❖ エッジ ： ノードどうしのリレーション を用いて"グラフ"として表現することが できる。 GraphQLサーバーがクエリを受信すると、 アプリケーションのデータグラフから 必要な部分を抜き出してレスポンスする。 注意︎ 悪意︎のあるユーザーから、必要以上に複雑で 大きなデータを要求するクエリが送信される 危険もある。 そのため、タイムアウトやスロットリング といった対策を組み込むことが好ましい。 https://www.apollographql.com/blog/graphql/basics/ the-concepts-of-graphql/
- 16. ➢ リゾルバー GraphQL SDLで定義されたスキーマにおいて、１つ１つの型に存在するフィールドには それぞれに"リゾルバー"という関数が紐づけられる。 リゾルバー関数は、対応したフィールドのデータを取得するよう、GraphQLサーバーの 開発者によって実装される。 GraphQLサーバーは、受信したクエリに含まれるフィールドを解析し、対応する リゾルバー関数を実行して得られたデータからレスポンスを作成する。 オブジェクトが得られた場合、さらにそのオブジェクトのフィールドに対応した リゾルバー関数が連鎖的に呼び出される。 リゾルバー関数には、４つの引数がある。 引数 説明 obj 連鎖的な実行において、直前に呼び出されたリゾルバー関数の返り値。 args GraphQLクエリのフィールドに渡された引数。 context データベースアクセスなど、それぞれのリゾルバー関数に共通して渡される値。 info GraphQLクエリのフィールドに関するスキーマなどの情報。
- 17. ➢ Apollo Serverの使用例 Apollo Server（Node.js）は、人気のGraphQLサーバーの一つに挙げられる。 GraphQLコミュニティとPrismaによる、"JavaScript + Apollo Server Tutorial"の内容を 一部抜粋して紹介する。 ソースコード ： https://github.com/howtographql/graphql-js ☞ Apollo ServerのセットアップおよびQuery/Mutation/Subscriptionの実行箇所を コードリーディング >> ❖ セットアップ graphql-js/src/index.js graphql-js/src/schema.graphql ❖ Query graphql-js/src/resolvers/Query.js ❖ Mutation graphql-js/src/resolvers/Mutation.js ❖ Subscription graphql-js/src/resolvers/Subscription.js
- 18. 目次（再掲） §1 GraphQL §1.1 GraphQLとは ➢ RESTとの比較 ➢ エコシステム ➢ ユースケース §1.2 GraphQL SDLについて ➢ GraphQL Playgroundの紹介 §1.3 GraphQLクライアントについて ➢ タグ付きテンプレートリテラル ➢ Apollo Clientの使用例 §1 GraphQL（続き） §1.4 GraphQLサーバーについて ➢ リゾルバー ➢ Apollo Serverの使用例 参考文献
- 19. 参考文献 ➢ GraphQL ❖ GraphQL ❖ GraphQL Playground ❖ How to GraphQL ❖ React + Apollo Tutorial ❖ JavaScript + Apollo Server Tutorial ❖ Apollo Docs ❖ Reasons to use GraphQL | Top 5 Reasons Why and How to use GraphQL ❖ GraphQL Concepts Visualized ❖ Introduction to Graphs – Data Structure and Algorithm Tutorials ❖ Template literals (Template strings) ❖ declarative programming