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

GraphQLとは何ですか?

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

GraphQL を使用する理由

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

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

GraphQLの応用

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

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

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

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

GraphQL の主要コンポーネント

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

GraphQL の主要コンポーネント
GraphQL の主要コンポーネント

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

クエリー

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

クエリの部分:

Following クエリの重要な部分です

  1. フィールド:

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

query {
    team {
        id name
    }
}

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

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

  1. Arguments

In RESTの場合、URL セグメントおよびクエリ パラメーターとして渡すことができる引数のセットは XNUMX つだけです。 特定のプロファイルを取得するための一般的な REST 呼び出しは次のようになります。wing:

GET /api'team?id=2 Content-Type: application JSON
 {
    "id": 2, 
    "name": "Justice League."
}

解きます

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

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

スキーマ

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

GraphQLの特徴

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

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

GraphQLクライアント

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

この JavaScript ライブラリは、GraphQL を使用して React アプリケーションを作成するために Facebook によって開発されました。 GraphQL クライアントは、 と組み合わせた、シンプルで高性能なLC / MSシステム Drupal、シングルページアプリケーション、モバイルアプリケーションなど。

GraphQLサーバー

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

GraphQL ゲートウェイ

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

GraphQLの変数とは何ですか?

A GraphQLの変数 は、クライアント クエリから動的値を分離し、クエリを一意の辞書として渡すために使用されます。 GraphQL の変数は、クライアントが個別の引数を指定して作成したクエリやミューテーションを再利用するためにも使用できます。 graphQL では、動的引数をクエリ文字列で直接渡すことはできません。 その理由は、クライアント側のコードはプログラムの実行時にクエリ文字列を動的に操作する必要があるためです。

GraphQL には、クエリから動的値を因数分解する優れた方法が XNUMX つあります。 それらを別の辞書として渡します。 これらの値は変数と呼ばれます。 変数を扱うときは、次のことを行う必要があります。wing 三つのこと:

  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の違い

Following 表は、次の重要な違いを示しています GraphQL と REST.

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

GraphQLの欠点

GraphQL の欠点は次のとおりです。

  • ヤング ecosystem
  • バックエンド部分のリソースが不足しています。
  • com のデザイン パターンがありませんplex アプリ。
  • com のパフォーマンスの問題plex クエリ
  • 小規模なアプリケーションには過剰
  • GraphQL は、リクエスト コンテンツの保存を可能にする HTTP キャッシュ メソッドに依存しません。
  • GraphQL はファイルを認識しません。 したがって、ファイルのアップロード機能は含まれていません。
  • 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 の欠点は、バックエンド部分のリソースが不足していることです。