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

GraphQLとは何ですか?

GraphQL は、既存のデータを使用してクエリを実行するために Facebook によって開発されたアプリケーション層のサーバー側テクノロジーです。 GraphQL は RESTful API 呼び出しを最適化できます。 これは、データを取得して更新するための宣言的な方法を提供します。 GraphQL は、サーバーからクライアントにデータをロードするのに役立ちます。 これにより、プログラマは希望するリクエストの種類を選択できます。

GraphQL を使用する理由

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

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

GraphQLの応用

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

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

GraphQl を学ぶ前に何を学ぶ必要がありますか?

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

GraphQL の主要コンポーネント

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

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

クエリー

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

クエリの部分:

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

1. フィールド：

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

query {
    team {
        id name
    }
}

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

上記の GraphQL の例では、サーバーにチームと呼ばれるフィールドとそのサブフィールド (id や名前など) を要求します。 GraphQL サーバーは、要求したデータを返します。

2. Arguments

In REST、URL セグメントとクエリ パラメータとして渡すことができる引数のセットは 1 つだけです。特定のプロファイルを取得するには、一般的な 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 ゲートウェイ

ゲートウェイは、他のバックエンド サービスに対応する別のサービスを構築できるマイクロサービス パターンです。 実用的なドキュメントを提供し、XNUMX 回のリクエストで複数のソースからデータを収集する便利な方法を提供します。

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 を最大限に活用できるようになります。

GraphQLとRESTの違い

次の表は、 GraphQL と REST.

GraphQL	REST
クライアント主導のアーキテクチャに従います。	サーバー駆動型アーキテクチャに従います。
GraphQL はスキーマの観点から編成できます。	REST はエンドポイントの観点から編成できます。
GraphQL は成長を続けるコミュニティです。	REST は非常に大きなコミュニティです。
GraphQLの開発スピードは速いです。	RESTでの開発速度は遅いです。
GraphQL の学習曲線は困難です。	REST の学習曲線は中程度です。
ID は、それを取得する方法とは切り離されています。	REST で呼び出すエンドポイントは、特定のオブジェクトの ID です。
GraphQL では、サーバーが利用可能なリソースを決定します。	リソースの形状とサイズは、REST のサーバーによって決定されます。
GraphQL は、すべてのプラットフォームにわたって高い一貫性を提供します。	すべてのプラットフォームで一貫性を保つのは困難です。

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

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

• ギャツビー: Gastby は、複数の GraphQL API ソースから派生したデータを使用できる GraphQL を利用したアプリケーションです。 これを使用して、静的およびクライアントベースの React アプリケーションを開発できます。
• グラフィQL: ブラウザと統合され、GraphQL の API とも連携する ID です。 GraphiQL に含まれる機能には、ミューテーション、データ クエリ、オートコンプリート クエリなどがあります。
• GraphQLプレイグラウンド: これは、ミューテーション、検証、GraphQl クエリ、サブスクリプションなどを処理するためのエディターが組み込まれた強力な IDE です。開発者は、この IDE を使用してスキーマの構造を視覚化できます。
• プリズム: Prisma は、データベースを CRUD (作成、読み取り、更新、削除) 操作を備えた GraphQL API に変換するデータベース抽象化レイヤーです。
• ビット: これは、再利用可能なコードをコンポーネントに変換するオープンソースのツールおよびプラットフォームです。 開発者はそれらを使用して、さまざまなプロジェクトを共有および開発できます。

まとめ

• GraphQL は、既存のデータを使用してクエリを実行するために Facebook によって開発されたアプリケーション層のサーバー側テクノロジーです。
• GraphQL を使用すると、XNUMX 回の API 呼び出しでデータをフェッチできます。
• GraphQL は、モバイル アプリのパフォーマンスの向上に役立ちます。
• 重要な GraphQL クエリ コンポーネントは、1) クエリ、2) リゾルバー、3) スキーマです。
• GraphQL は厳密に型指定されています。つまり、クエリは特定のシステムのコンテキスト内で実行されます。
• GraphQL クライアントは、関連する GraphQL サーバーに POST リクエストを行うコードです。
• GraphQL サーバーは、GraphQL の仕様をサーバー側で実装したものです。
• ゲートウェイは、他のバックエンド サービスに対応する別のサービスを構築できるマイクロサービス パターンです。
• GraphQL には、クエリから動的値を因数分解する優れた方法が XNUMX つあります。
• ミューテーションは、GraphQL のデータセットを変更する方法です。
• GraphQL を設計する際の重要なポイントは、1) 名前付け、2) 特異性、3) 入力オブジェクトの一意のペイロード タイプ、4) ネストです。
• GraphQL はスキーマの観点から整理できますが、REST はエンドポイントの観点から整理できます。
• GraphQL の欠点は、バックエンド部分のリソースが不足していることです。