初心者向け GraphQL チュートリアル: とは、機能、例

GraphQLとは何ですか?

GraphQL GraphQLは、Facebook（現Meta）が開発したアプリケーション層のサーバーサイド技術で、既存のデータを使用してクエリを実行するために使用されます。2015年に一般公開され、GraphQLによって管理されています。 Foundation 2018年以来、GraphQLはRESTful API呼び出しを最適化できます。データの取得と更新を宣言的に行う方法を提供し、サーバーからクライアントへのデータロードを支援します。また、プログラマーが希望するリクエストの種類を選択できるようにします。

GraphQLを学ぶ前に、何を学んでおく必要がありますか？

この GraphQL チュートリアルは以下に基づいています エクスプレス (NAIST) と NodeJ。 したがって、NodeJS の基本を理解していれば、GraphQL を非常に簡単に学習できます。

GraphQL を使用する理由

GraphQL を使用する理由は次のとおりです。

• 人間が読めるクエリを提供します。
• GraphQLでは、多数のデータベースを扱うのが非常に簡単です。
• マイクロサービスや複雑なシステムに適しています。
• XNUMX 回の API 呼び出しでデータを取得できます。
• クエリのバッチ処理とキャッシュに役立ちます。
• オーバーフェッチやアンダーフェッチの問題は発生しません。
• お客様のニーズに合わせてリクエストを調整します。
• これは、適切な形式のスキーマを見つけるのに役立ちます。
• GraphQL は、API の変更に合わせてドキュメントを自動的に同期します。
• API の進化はバージョン管理なしで可能です。
• GraphQL フィールドは複数のクエリで使用され、再利用のために上位のコンポーネント レベルで共有できます。
• 公開する関数とその動作方法を選択できます。
• 迅速なアプリケーションプロトタイプに使用できますping.

GraphQLの応用

GraphQL の重要なアプリケーションを次に示します。

• Relay およびその他のクライアント フレームワークを提供します
• GraphQL は、モバイル アプリのパフォーマンスの向上に役立ちます。
• オーバーフェッチの問題を軽減してサーバー側のクラウド サービスを低下させ、クライアント側のネットワーク使用量を減らすことができます。
• これは、クライアント アプリケーションが長いクエリ形式で必要なフィールドを指定する必要がある場合に使用できます。
• GraphQL は、古い API または既存の API に機能を追加する必要がある場合に最大限に活用できます。
• 複雑な API を簡素化する必要がある場合に使用されます。
• オブジェクト指向プログラミングで一般的に使用されるファサード パターンをミックスしてマッシュします。
• 複数の場所からのデータを XNUMX つの便利な API に集約する必要がある場合。
• GraphQL を絶対的なtrac既存のAPIを利用して、ユーザーのニーズに基づいてレスポンス構造を指定する。

これらのメリットはすべて、3つの要素が連携して機能することによって成り立っています。

GraphQL の主要コンポーネント

この GraphQL チュートリアルでは、GraphQL の主要なコンポーネントを学びましょう。

上の図に示すように、GraphQL には 1 つの主要なコンポーネントがあります: 2) クエリ、3) リゾルバー、XNUMX) スキーマ。

クエリー

クエリは、クライアント マシン アプリケーションによって作成される API リクエストです。 拡張と配列へのポイントをサポートします。 クエリは値の読み取りまたはフェッチに使用されます。

クエリの部分:

以下はクエリの重要な部分です

1. フィールド：

フィールドは、サーバーに特定の情報を要求していることを示すものです。以下は、GraphQLクエリにおけるフィールドの例です。

query {
    team {
        id
        name
    }
}

サーバーは、クエリを反映した構造のJSONドキュメントで応答します。

{
    "data": {
        "team": [
            {
                "id": 1,
                "name": "Avengers"
            }
        ]
    }
}

上記のGraphQLの例では、サーバーに対してteamというフィールドとそのサブフィールド（idやnameなど）を要求しています。GraphQLサーバーは、要求したデータを正確に返します。

2. Arguments

In REST引数は1セットしか渡せません。 URL セグメントとクエリパラメータ。特定のプロファイルを取得するには、一般的なREST呼び出しは次のようになります。

GET /api/team?id=2
Content-Type: application/json

{
    "id": 2,
    "name": "Justice League"
}

解きます

リゾルバは、GraphQL 操作をデータに変換するための指示を提供します。リゾルバ関数を定義することで、クエリをデータに解決します。

サーバーのプロセスと、特定のフィールドに従ってデータを取得する場所が表示されます。 リゾルバーは、データベース スキーマと API スキーマも分離します。 分離された情報は、データベースから取得したコンテンツを変更するのに役立ちます。

スキーマ

GraphQL スキーマは、GraphQL 実装の中心です。 接続しているクライアントが利用できる機能について説明します。

GraphQLの特徴

GraphQL の重要な機能は次のとおりです。

• これは、必須ではない宣言型クエリ言語を提供します。
• 階層型かつ製品中心です。
• GraphQL は厳密に型指定されています。つまり、クエリは特定のシステムのコンテキスト内で実行されます。
• GraphQL のクエリはサーバーではなくクライアントでエンコードされます。
• OSI モデルのアプリケーション層の機能をすべて備えています。

GraphQLクライアント

GraphQL クライアントは、関連する GraphQL サーバーに POST リクエストを行うコードです。 GraphQL API を直接クエリすることもできますが、Relay を使用して専用のクライアント ライブラリを利用するのが良い方法です。

この Javaスクリプト ライブラリは、GraphQL を使用して React アプリケーションを作成するために Facebook によって開発されました。GraphQL クライアントには、Drupal などの CMS、シングル ページ アプリケーション、モバイル アプリケーションなどがあります。

GraphQLサーバー

GraphQLサーバーは、GraphQL仕様のサーバー側実装です。クライアントプログラムがクエリを実行できるGraphQL APIとしてデータを表現します。 データベース.

GraphQL ゲートウェイ

Gatewayはマイクロサービスパターンの一つで、他のバックエンドサービスに対応する独立したサービスを構築できます。実用的なドキュメントが用意されており、単一のリクエストで複数のソースからデータを収集する便利な方法を提供します。

GraphQLには、クエリから動的な値を分離する優れた方法が1つあります。それは、動的な値を別の辞書として渡すことです。これらの値は変数と呼ばれます。変数を扱う際には、次の3つのことを行う必要があります。

1. クエリ内の静的な値を変数名に置き換えます。
2. GraphQL クエリで受け入れられる変数の XNUMX つとして変数名を宣言します。
3. 値をトランスポート固有の変数ディクショナリに渡します。

全体像は以下のようになります。まず、変数を宣言するクエリです。

query HeroNameAndFriends($episode: Episode) {
    hero(episode: $episode) {
        name
        friends {
            name
        }
    }
}

そして、それと並行して送信される変数値の辞書が別個に存在します。

{
    "episode": "JEDI"
}

サーバーから返された応答は次のとおりです。

{
    "data": {
        "hero": {
            "name": "R2-D2",
            "friends": [
                { "name": "Luke Skywalker" },
                { "name": "Han Solo" },
                { "name": "Leia Organa" }
            ]
        }
    }
}

上記の GraphQL の例でわかるように、新しいクエリを構築する必要がある以外は、単に別の変数を渡しているだけです。

突然変異とは何ですか?

ミューテーションは、GraphQL のデータセットを変更する方法です。 データ ストア内のデータを変更し、値を返します。 ミューテーションは、データの挿入、更新、削除に役立ちます。 一般に、突然変異はスキーマ部分として定義されます。

GraphQL ミューテーションの設計時に考慮すべき点

GraphQL を設計する際の重要なポイントは次のとおりです。

• ネーミング： まず第一に、突然変異に動詞の名前を付ける必要があります。 次に、名詞、または該当する場合は「目的語」。 突然変異に名前を付けるときはキャメルケースを使用してください。
• 特異性： 可能な限り突然変異に特化したものにする必要があります。 突然変異は、ユーザーが実行するセマンティックなアクションを表す必要があります。
• 入力オブジェクト: クライアント上でミューテーションを実行するための引数として、XNUMX つの一意の必須入力オブジェクト タイプを使用します。
• 固有のペイロード タイプ: すべてのミューテーションに対して一意のペイロード タイプを使用する必要があります。 ミューテーション出力をフィールドとして特定のペイロード タイプに追加することもできます。
• 入れ子: 意味のある場合は、ミューテーションにネストを使用します。 これにより、GraphQL API を最大限に活用できるようになります。

クエリは読み取り、ミューテーションは書き込みです。3つ目の操作タイプは、クライアントが接続している間に変更されるデータを対象としています。

GraphQLにおけるサブスクリプションとは何ですか？

A 購読 サブスクリプションは、クエリとミューテーションに続く、GraphQL仕様における3番目の操作タイプです。クエリとミューテーションはそれぞれ1つのリクエストとレスポンスで完了しますが、サブスクリプションは通常WebSocketを介して長時間の接続を維持し、指定されたイベントが発生するたびにサーバーがクライアントに新しい結果をプッシュします。

構文はクエリを反映しており、query の代わりに subscription キーワードが使用されています。

subscription OnCommentAdded($postId: ID!) {
    commentAdded(postId: $postId) {
        id
        content
        author {
            name
        }
    }
}

実際には、購読契約には3つの特徴があります。

• イベント主導型であり、アンケート調査に基づかない： クライアントは一度だけ関心を登録します。サーバーが一致するイベントを発行するまで、それ以上の情報は送信されません。これは、繰り返しポーリングするよりもはるかにコスト効率が良い方法です。
• サブスクリプションごとにルートフィールドは1つです。 仕様では、一度に複数のフィールドを要求できるクエリとは異なり、トップレベルフィールドは1つしか許可されていません。
• 小さく保つのがベスト： インターフェースの更新が必要なフィールドのみをプッシュします。ライブチャット、通知、価格ティッカーなどが典型的な使用例です。

GraphQLとRESTの違い

次の表は、 GraphQL と REST.

GraphQL で使用されるオープンソースのアプリとツール

GraphQL で使用される重要なオープンソース アプリとツールは次のとおりです。

• ギャツビーGatsbyはGraphQLを基盤としたアプリケーションであり、複数のGraphQL APIソースから取得したデータを利用できます。これを使用して、静的かつクライアントベースのReactアプリケーションを開発できます。
• グラフィQL: これはブラウザと統合され、GraphQLのAPIとも連携するIDEです。GraphiQLには、ミューテーション、データクエリ、クエリの自動補完などの機能が含まれています。
• GraphQLプレイグラウンド: これは、ミューテーション、バリデーション、GraphQLクエリ、サブスクリプションなどを扱うための組み込みエディタを備えた強力なIDEです。開発者はこのIDEを使用してスキーマの構造を視覚化できます。このプロジェクトは現在廃止されており、その機能はGraphiQLに統合されています。
• プリズム: Prismaはデータベースですtrac現在は型安全な ORM として提供されている tion レイヤーは、CRUD (作成、読み取り、更新、削除) 操作を公開するために GraphQL サーバーと広く組み合わされています。
• ビット: これは、再利用可能なコードをコンポーネントに変換するオープンソースのツールおよびプラットフォームです。 開発者はそれらを使用して、さまざまなプロジェクトを共有および開発できます。

よくあるご質問