GraphQLの初心者向けガイド

今日最も一般的に議論されている用語の1つはAPIです。多くの人は、APIが何であるかを正確に知りません。基本的に、APIはApplication Programming Interfaceの略です。名前が示すように、それは開発者、ユーザー、消費者などの人々がデータとやり取りできるインターフェースです。

APIはバーテンダーと考えることができます。あなたはバーテンダーに飲み物を頼むと、彼らはあなたに欲しいものを与えます。シンプル。では、なぜそれが問題なのでしょうか?

最新のWebが始まって以来、APIの構築は思ったほど難しくありませんでした。しかし、APIの学習と理解はそうでした。開発者は、APIを使用して何かを構築したり、データを消費したりする大多数の人々を形成します。したがって、APIはできる限りクリーンで直感的なものにする必要があります。適切に設計されたAPIは、使用と学習が非常に簡単です。また、直感的でもあり、APIの設計を開始する際に留意するのが良い点です。

長い間、RESTを使用してAPIを構築しています。それに伴い、いくつかの問題が発生します。 REST設計を使用してAPIを構築する場合、次のような問題に直面します。

1)多くのエンドポイントがあります

2)開発者がAPIを習得して理解することははるかに困難になります

3)情報の過剰および過少取得があります

これらの問題を解決するために、FacebookはGraphQLを作成しました。今日、GraphQLがAPIを構築する最良の方法だと思います。この記事では、今日から学習を開始する理由を説明します。

この記事では、GraphQLの仕組みを学びます。 GraphQLを使用して、非常に適切に設計された効率的で強力なAPIを作成する方法を紹介します。

多くの人や企業がGraphQLを使用しているため、おそらくGraphQLについては既に聞いたことがあるでしょう。 GraphQLはオープンソースであるため、そのコミュニティは巨大になりました。

それでは、GraphQLの仕組みとその魔法について、実際に学習してみましょう。

GraphQLとは何ですか?

GraphQLは、Facebookが開発したオープンソースのクエリ言語です。 APIを設計、作成、使用する効率的な方法を提供します。基本的に、RESTの代わりになります。

GraphQLには、次のような多くの機能があります。

  1. 必要なデータを書き込み、必要なデータを正確に取得します。 RESTに慣れているので、情報を過剰に取得する必要はありません。
  2. これにより、単一のエンドポイントが提供され、同じAPIのバージョン2またはバージョン3はなくなりました。
  3. GraphQLは厳密に型指定されているため、実行前にGraphQL型システム内のクエリを検証できます。より強力なAPIを構築するのに役立ちます。

これはGraphQLの基本的な紹介です。なぜそれが非常に強力で、なぜ最近人気が高まっているのか。詳細については、GraphQL Webサイトにアクセスして確認することをお勧めします。

入門

この記事の主な目的は、GraphQLサーバーのセットアップ方法を学ぶことではないため、現時点では深く掘り下げていません。目的は、GraphQLが実際にどのように機能するかを学ぶことです。そこで、Graphpackと呼ばれるゼロ構成のGraphQLサーバーを使用します。

プロジェクトを開始するために、新しいフォルダーを作成し、好きな名前を付けることができます。 graphql-serverという名前を付けます。

ターミナルを開き、次を入力します。

mkdir graphql-server

これで、マシンにnpmまたはyarnがインストールされているはずです。これらが何であるかわからない場合、npmとyarnはJavaScriptプログラミング言語のパッケージマネージャーです。 Node.jsの場合、デフォルトのパッケージマネージャーはnpmです。

作成したフォルダー内に次のコマンドを入力します。

npm init -y

または、糸を使用する場合:

糸の初期化

npmはpackage.jsonファイルを作成し、インストールしたすべての依存関係とコマンドがそこにあります。

そこで、使用する唯一の依存関係をインストールします。

Graph️Graphpackを使用すると、ゼロ構成でGraphQLサーバーを作成できます。 GraphQLから始めたばかりなので、これはサーバーの構成を心配することなく、さらに多くのことを学ぶのに役立ちます。

ターミナルのルートフォルダー内で、次のようにインストールします。

npm install --save-dev graphpack

または、糸を使用する場合は、次のようにする必要があります。

yarn add --dev graphpack

Graphpackのインストール後、package.jsonファイル内のスクリプトに移動し、次のコードをそこに配置します。

srcというフォルダーを作成します。これは、サーバー全体で唯一のフォルダーになります。

srcというフォルダーを作成します。その後、フォルダー内に3つのファイルのみを作成します。

srcフォルダー内にschema.graphqlというファイルを作成します。この最初のファイル内に、次のコードを配置します。

このschema.graphqlファイルでは、GraphQLスキーマ全体になります。内容がわからない場合は、後で説明します。心配しないでください。

次に、srcフォルダー内に2番目のファイルを作成します。 resolvers.jsと呼び、この2番目のファイル内に次のコードを配置します。

このresolvers.jsファイルは、GraphQL操作をデータに変換するための指示を提供する方法になります。

最後に、srcフォルダー内に3番目のファイルを作成します。このdb.jsを呼び出し、この3番目のファイル内に次のコードを配置します。

このチュートリアルでは、実際のデータベースを使用していません。したがって、このdb.jsファイルは、学習目的でのみデータベースをシミュレートします。

これで、srcフォルダーは次のようになります。

src
  | --db.js
  | --resolvers.js
  | --schema.graphql

これで、コマンドnpm run devを実行する場合、またはyarn、yarn devを使用している場合、ターミナルに次の出力が表示されます。

これでlocalhost:4000にアクセスできます。これは、GraphQLで最初のクエリ、ミューテーション、サブスクリプションを書き始める準備ができたことを意味します。

開発ワークフローを改善するための強力なGraphQL IDEであるGraphQL Playgroundが表示されます。 GraphQL Playgroundの詳細については、ここをクリックしてください。

スキーマ

GraphQLには、スキーマの記述に使用される独自の種類の言語があります。これは、スキーマ定義言語(SDL)と呼ばれる人間が読めるスキーマ構文です。使用しているテクノロジーに関係なく、SDLは同じです。必要な言語またはフレームワークでこれを使用できます。

このスキーマ言語は、APIのタイプを理解するのが簡単なので非常に役立ちます。正しく見るだけで理解できます。

タイプ

型は、GraphQLの最も重要な機能の1つです。タイプは、APIの外観を表すカスタムオブジェクトです。たとえば、ソーシャルメディアアプリケーションを作成する場合、APIには投稿、ユーザー、いいね、グループなどのタイプが必要です。

タイプにはフィールドがあり、これらのフィールドは特定のタイプのデータを返します。たとえば、ユーザータイプを作成します。名前、メール、年齢のフィールドが必要です。タイプフィールドは任意で、常にInt、Float、String、Boolean、ID、オブジェクトタイプのリスト、カスタムオブジェクトタイプなどのデータタイプを返します。

したがって、最初のTypeを記述するために、schema.graphqlファイルに移動し、既に存在するQueryタイプを次のように置き換えます。

各ユーザーにはIDが割り当てられるため、IDタイプを指定しました。ユーザーには名前と電子メールも送信されるため、文字列型と年齢を指定し、Int型を指定しました。かなり簡単ですね。

しかし、それらはどうでしょう!すべての行の終わりに?感嘆符は、フィールドがnull不可であることを意味します。つまり、すべてのフィールドは各クエリでデータを返す必要があります。 Userタイプに含めることができる唯一のnull許容フィールドはageです。

GraphQLでは、3つの主要な概念を扱います。

  1. クエリ—サーバーからデータを取得する方法。
  2. 突然変異—サーバー上のデータを変更し、更新されたデータを取得(作成、更新、削除)する方法。
  3. サブスクリプション-サーバーとのリアルタイム接続を維持する方法。

それらすべてを説明します。クエリから始めましょう。

問い合わせ

これを簡単な方法で説明すると、GraphQLのクエリはデータを取得する方法です。 GraphQLのクエリの最も美しい点の1つは、必要なデータを正確に取得することです。これ以上でもそれ以下でもありません。これは、APIに大きなプラスの影響を与えます。RESTAPIのように情報を過剰に取得したり、過剰に取得したりする必要はありません。

GraphQLで最初のタイプのクエリを作成します。すべてのクエリは、このタイプ内で終了します。まず、schema.graphqlに移動して、Queryという新しいタイプを作成します。

非常に簡単です。ユーザークエリは、1人以上のユーザーの配列を返します。 nullを返しません。 、これはnull不可クエリです。常に何かを返す必要があります。

しかし、特定のユーザーを返すこともできます。そのために、userという新しいクエリを作成します。 Queryタイプ内に、次のコードを配置します。

これで、クエリタイプは次のようになります。

ご覧のとおり、GraphQLのクエリでは引数を渡すこともできます。この場合、特定のユーザーを照会するために、そのIDを渡します。

しかし、疑問に思うかもしれません。GraphQLは、データの取得先をどのようにして知るのでしょうか。そのため、resolvers.jsファイルが必要です。そのファイルは、GraphQLにデータをフェッチする方法と場所を指示します。

まず、resolvers.jsファイルに移動して、先ほど作成したdb.jsをインポートします。 resolvers.jsファイルは次のようになります。

次に、最初のクエリを作成します。 resolvers.jsファイルに移動して、hello関数を置き換えます。これで、クエリタイプは次のようになります。

さて、それがどのように機能するかを説明するために:

各クエリリゾルバには4つの引数があります。ユーザー関数では、引数としてidを渡し、渡されたidに一致する特定のユーザーを返します。ものすごく単純。

ユーザー関数では、既に存在するユーザー配列を返すだけです。常にすべてのユーザーに返されます。

次に、クエリが正常に機能するかどうかをテストします。 localhost:4000に移動し、次のコードを入力します。

すべてのユーザーに返されるはずです。

または、特定のユーザーを返す場合:

次に、GraphQLの最も重要な機能の1つである突然変異について学習を開始します。

突然変異

GraphQLでは、突然変異はサーバー上のデータを変更し、更新されたデータを取り戻す方法です。 RESTのCUD(作成、更新、削除)のように考えることができます。

GraphQLで最初のタイプの突然変異を作成します。すべての突然変異はこのタイプの内部に配置されます。したがって、開始するには、schema.graphqlに移動して、mutationという新しい型を記述します。

ご覧のとおり、次の3つの突然変異があります。

createUser:ID、名前、電子メール、および年齢を渡す必要があります。新しいユーザーが返されます。

updateUser:ID、および新しい名前、電子メール、または年齢を渡す必要があります。新しいユーザーが返されます。

deleteUser:IDを渡す必要があります。新しいユーザーが返されます。

次に、resolvers.jsファイルに移動し、Queryオブジェクトの下に、次のような新しいMutationオブジェクトを作成します。

これで、resolvers.jsファイルは次のようになります。

次に、突然変異が正常に機能しているかどうかをテストします。 localhost:4000に移動し、次のコードを入力します。

新しいユーザーが返されます。新しい突然変異を作成したい場合は、自分で試してみることをお勧めします!作成したこの同じユーザーを削除して、正常に機能するかどうかを確認してください。

最後に、サブスクリプション、およびサブスクリプションが非常に強力な理由について学習し始めます。

サブスクリプション

前にも言ったように、サブスクリプションは、サーバーとのリアルタイム接続を維持する方法です。つまり、サーバーでイベントが発生するたびに、そのイベントが呼び出されるたびに、サーバーは対応するデータをクライアントに送信します。

サブスクリプションを使用することにより、異なるユーザー間で最新の変更に合わせてアプリを更新し続けることができます。

基本的なサブスクリプションは次のとおりです。

クエリに非常に似ていると言うでしょう。そうです。ただし、動作は異なります。

サーバーで何かが更新されると、サーバーはサブスクリプションで指定されたGraphQLクエリを実行し、新しく更新された結果をクライアントに送信します。

この特定の記事ではサブスクリプションを使用しませんが、サブスクリプションの詳細については、ここをクリックしてください。

結論

これまで見てきたように、GraphQLは本当に強力な新しいテクノロジーです。より良く、適切に設計されたAPIを構築する真の力を与えてくれます。だから、今すぐ学習を始めることをお勧めします。私にとっては、最終的にはRESTに取って代わります。

記事を読んでくれてありがとう、以下のコメントをお願いします!

Twitter Twitterでフォローしてください!
GitHubでフォローしてください!

遠隔の機会を探しているので、もし何か聞きたいことがあれば、Twitterで私に連絡してください!