GraphQL は、JavaScript アプリケーションが 1 つの要求で必要なデータを正確に取得するのに役立ちます。 この記事では、GraphQL とは何か、使用する理由、および最小限の労力で GraphQL アプリケーションを構築するのに Azure サービスがどのように役立つかについて説明します。 既存の GraphQL アプリケーションを移行する場合でも、新しいアプリケーションを構築する場合でも、Azure にはプロセスを簡略化するためのツールとサービスが用意されています。
GraphQL とは
GraphQL は、Web アプリケーションがサーバーやデータベースと通信するための最新の方法です。 これは、必要な情報を正確に要求するためのよりスマートな方法と考えてください。
- 固定メニューを受け入れるのではなく、自分の好みに合わせて食事を注文するように、あなたが望むものを正確に頼むのです。
- React、Vue、Angular などの JavaScript アプリケーションで適切に動作します
- Web アプリを迅速かつ簡単に構築できます
GraphQL を使用すると、さまざまなサーバー エンドポイント (従来の REST API など) に対して複数の要求を行う代わりに、必要なすべてのデータを取得するための正確な要求を 1 つ行うことができます。
Web アプリで GraphQL を使用する理由
GraphQL を使用すると、次の 3 つの主な方法で JavaScript アプリケーションが向上します。
必要なものを正確に取得する: アプリは、必要なデータだけを今すぐ要求できます。それ以上、少なからず。 これは、ビュッフェに行き、ほとんどの人が無駄になる巨大な固定食を提供されるのではなく、食べるものだけを取るようなものです。 これにより、ダウンロードするデータが少なくなるため、アプリの速度が向上します。
多くの要求ではなく 1 つの要求: 複数の場所からの情報が必要ですか? GraphQL では、5 つの異なるエンドポイントに対して 5 つの異なる要求を行う代わりに、すべてを取得するための要求を 1 つだけ行うことができます。 これは、5つの異なる店に行くのではなく、1人の人にすべての買い物を集めさせるようなものです。
より優れたツールで間違いを減らします。GraphQL には、アプリの実行時ではなく、コーディング中にエラーをキャッチするのに役立つツールが付属しています。 これは、文書を公開した後に入力ミスを発見するのではなく、入力中に機能するスペル チェックを行うのと同じです。
GraphQL 用の一般的な JavaScript ツール
GraphQL と JavaScript を使用してビルドする場合は、次の一般的なツールのいずれかを使用する可能性があります。
- Apollo クライアント: React、Vue、Angular、プレーン JavaScript で動作する最も広く使用されている GraphQL クライアント。
- URQL: 優れたパフォーマンスを備えた軽量の代替手段です。
- リレー: 大規模な React アプリケーションに最適な Facebook (GraphQL も作成したユーザー) によって作成されます。
GraphQL アプリケーション用の Azure サービス
特定のシナリオに基づいてアプローチを選択します。
| 目的 | 次の手順を実行する必要があります。 | これらの Azure サービスの使用 |
|---|---|---|
| 既存の GraphQL アプリを Azure に持ち込む | コードを変更せずにアプリケーションをデプロイする | Azure App Service または Azure Container Apps |
| 既存のデータに GraphQL を追加する | 最小限のコーディングでデータの GraphQL エンドポイントを作成する | データ API ビルダー |
| GraphQL API レイヤーを構築する | 既存の API に対して統合 GraphQL インターフェイスを作成する | GraphQL 変換を活用した Azure API Management |
Azure で GraphQL アプリケーションをホストする
ビルドするアプリケーションの種類に応じて、いくつかの適切なオプションがあります。
App Service: これは従来の Web ホスティング サービスに似ていますが、追加の機能があります。 これは、サーバーを必要とするほとんどの JavaScript アプリケーションに適しています。
Container Apps: アプリケーションがコンテナー (Docker など) にパッケージ化されている場合、このサービスを使用すると、アプリケーションの実行とスケーリングが簡単になります。
GraphQL アプリケーションのデータ ストレージ
GraphQL はデータに接続する必要があります。 Azure には、これを行ういくつかの方法が用意されています。
データベースを GraphQL API に変換する: "データ API ビルダー" ツールは、既存のデータベースから GraphQL エンドポイント (アプリが GraphQL 要求を送信できる URL) を自動的に作成できます。コーディングは必要ありません。
データを格納する: Azure には、さまざまなニーズに対応するデータベースが用意されています。
- SQL Database: 従来のテーブル ベースのデータの場合
- Cosmos DB: 堅牢なスキーマを使用せずに柔軟でスケーラブルなデータ ストレージを実現
GraphQL アプリケーションをセキュリティで保護する
- ユーザー ログインとセキュリティ: Azure の ID プラットフォームは、適切なユーザーのみが GraphQL データにアクセスできるように、アプリケーションにログイン機能を追加するのに役立ちます。
- ロールベースのアクセス: GraphQL エンドポイントを使用して、どのユーザーがどのデータに対してクエリを実行または変更できるかを正確に制御します。
- API 保護: レート制限と監視を追加して、GraphQL API の不正使用を防ぎます。
既存のデータの GraphQL API を作成する
Azure にデータが既にあり、GraphQL を使用してアクセスしたい場合 これを行う簡単な方法があります。
API Management: このサービスでは、既存の API またはデータ ソースの前に GraphQL レイヤーを作成できます。 これは、GraphQL をネイティブに話さないシステムに GraphQL トランスレーターを追加するようなものです。
データ API ビルダー: このツールは、データベースから GraphQL エンドポイントを自動的に作成します。 これは、GraphQL を既存のデータに追加する最も簡単な方法であり、データベースにポイントするだけで実行できます。
簡単な例: 製品データベースの GraphQL API の作成
プロセスのしくみを簡単に次に示します。
- 製品情報 (名前、価格、説明) を含むデータベースがある
- データベースに接続するように Data API Builder を設定する
- Data API Builder によって GraphQL エンドポイントが自動的に作成される
- これで、JavaScript アプリケーションで GraphQL クエリを次のように作成できるようになりました。
{
products(where: { price_lt: 50 }) {
name
price
description
}
}
このクエリでは、50 ドル以下のすべての製品が表示され、名前、価格、説明だけが表示されます。
作業の開始に役立つリソース
Azure で GraphQL の詳細を確認したり、GraphQL を使用して構築を開始したりする場合は、次の役に立つリソースを次に示します。
次のステップ
- Data API Builder のインストール
- Azure Container Apps
- Azure API Management - API の作成と管理
- Azure App Service
- Azure SQL Database - 構造化データを格納する
- Azure Cosmos DB - 柔軟で非構造化データを格納する