graphQlの練習JavaScript APIでクエリをクエリします

GraphQL APIの構築方法を学ぶことは非常に挑戦的です。ただし、10分でGraphQL APIを使用する方法を学ぶことができます！そして、私はそのための完璧なAPIを持っています：JavaScript GraphQL APIの新しい、新鮮なコード状態。

JavaScript調査の状態は、JavaScriptランドスケープの年次調査です。私たちは4年間それを行っており、最新のエディションは20,000人以上の開発者に到達しました。

私たちは常にショーケースサイトを構築するためにギャツビーに依存してきましたが、今年まで、「Elasticsearch」として単なる人間に知られている何らかの恐ろしい魔法を通じて生成された静的なYAMLファイルの形でギャツビーにデータを提供していました。

しかし、GatsbyはとにかくGraphQLとして食べるすべてのデータソースをうんざりするので、私たちは仲介者をスキップしてGraphQLを直接供給することもできますが！はい、私は知っています、この比phorは2番目にグロッサーになっており、私はすでにそれを後悔しています。私のポイントは、データ用の内部GraphQL APIを構築したことです。今では、あなたもデータセットを簡単に利用できるように、すべての人が利用できるようにしています。

「でも待って」とあなたは言います。 「私は一生、グラフクルを学ぶ時間がなくなった刃を勉強してきました！」心配しないでください：それはこの記事が登場するところです。

graphqlとは何ですか？

そのコアでは、GraphQLはAPIから受け取るデータを指定できる構文です。データベースではなく、 APIと言ったことに注意してください。 SQLとは異なり、GraphQLクエリはデータベースに直接移動するのではなく、GraphQL APIエンドポイントに移動します。これにより、データベースまたはその他のデータソースに接続できます。

休憩のような古いパラダイムよりもGraphQLの大きな利点は、あなたが望むものを尋ねることができることです。例えば：

クエリ{
  ユーザー（ID： "foo123"）{
  名前
 }
}

単一の名前フィールドを持つユーザーオブジェクトを取得します。また、メールが必要ですか？ただしてください：

クエリ{
 ユーザー（ID： "foo123"）{
  名前
  メール
 }
}

ご覧のとおり、この例のユーザーフィールドはID引数をサポートしています。そして今、私たちはGraphQLの最もクールな機能に到達します。

クエリ{
 ユーザー（ID： "foo123"）{
  名前
  メール
    投稿{ 
      タイトル
      体
    }
  }
}

ここでは、ユーザーの投稿を見つけて、タイトルとボディをロードしたいと言っています。 GraphQLの良いところは、APIレイヤーが実際のデータベース内にネストされた形式に保存されていない場合でも、データベースと直接話しかけていないため、その特定の情報をその特定の形式で取得する方法を見つけ出すことができることです。

Sebastian Schollは、GraphQLをカクテルミキサーで初めて会ったかのように、GraphQLを説明する素晴らしい仕事をしています。

graphiqlの紹介

GraphiQL（そこにある「I」に注意）は、最も一般的なGraphQl IDEであり、JavaScript APIの状態を探索するために使用するツールです。 Graphiql.stateofjs.comで今すぐ起動でき、エンドポイント（api.stateofjs.com/graphql）に自動的に接続できます。 UIは、エクスプローラーパネル、クエリビルダー、および結果パネルの3つの主要な要素で構成されています。後でドキュメントパネルを追加しますが、今のところシンプルにしましょう。

Explorer Tabは、OneGraphによって開発および維持されているGraphiQLのターボブーストバージョンの一部です。私たちがそれを統合するのを手伝ってくれた彼らに感謝します。独自のGraphIQLインスタンスを展開する場合は、必ずサンプルリポジトリをご覧ください。

心配しないでください、私はあなたにまだコードを書くようにするつもりはありません。代わりに、過去4年間にわたるReactの開発者エクスペリエンスに対応するものなど、既存のGraphQLクエリから始めましょう。

私たちのサイトを構築するためにGraphQLを内部的に使用していると言ったことを覚えていますか？ APIを公開するだけでなく、クエリ自体も公開しています。小さな「エクスポート」ボタンをクリックし、[GraphQL]タブのクエリをコピーし、GraphIQLのクエリビルダーウィンドウ内に貼り付け、[再生]ボタンをクリックします。

すべてが計画に従って進んだ場合、結果パネルにデータが表示されるのを確認する必要があります。クエリを分析してみましょう。

クエリReact_experienceQuery {
  調査（調査：JS）{
    ツール（ID：React）{
      id
      実在物 {
        ホームページ
        名前
        github {
          URL
        }
      }
      経験 {
        alleears {
          年
          合計
          完了 {
            カウント
            パーセンテージ
          }
          AwarenessEnterestSatisfaction {
            意識
            興味
            満足
          }
          バケツ{
            id
            カウント
            パーセンテージ
          }
        }
      }
    }
  }
}

最初に、クエリの名前であるReact_ExperienceQueryとともに、GraphQLクエリの開始を定義するクエリキーワードが登場します。クエリ名はGraphQLではオプションですが、デバッグの目的に役立ちます。

次に、調査上の議論をする最初の分野である調査を行います。 （CSS調査も持っているため、問題の調査を指定する必要がありました。）その後、ID引数を取得するツールフィールドがあります。そして、その後のすべては、その特定のツールのAPI結果に関連しています。エンティティは、選択された特定のツールに関する情報を提供します（例：反応）。経験には実際の統計データが含まれています。

ここでこれらのすべてのフィールドを通過し続けるのではなく、小さなトリックを教えます：グラフィクル内のそれらのフィールドをクリック（またはクリックする）コマンドを教えてください。ドキュメントパネルを表示します。おめでとうございます、あなたはちょうどGraphQLの気の利いたトリックの1つ、自己文書を目撃しました！ドキュメントをAPI定義に直接書くことができ、GraphiQLはエンドユーザーが利用できるようになります。

変数の変更

物事を少し調整しましょう。クエリビルダーで、「反応」を「vuejs」に置き換えると、別のクールなgraphqlのことであるauto completionに気付くはずです。これは、間違いを犯さないようにしたり、時間を節約するのに非常に役立ちます！再び「再生」を押すと、同じデータが取得されますが、今回はVueの場合です。

エクスプローラーを使用します

これで、もう1つのGraphQL Power Tool：The Explorerのロックを解除します。エクスプローラーは基本的に、API全体のツリーであり、その構造を視覚化するだけでなく、単一のコードを書くことなくクエリを構築できます。それでは、今回はExplorerを使用してReactクエリを再現してみましょう。

まず、新しいブラウザタブを開いて、Graphiql.stateofjs.comをロードして新たに開始しましょう。 Explorerの調査ノードをクリックし、その下でツールノードをクリックして、[再生]をクリックします。ツールのIDフィールドは結果に自動的に追加される必要があります。これは、デフォルトの引数値（「TypeScript」）を「React」に変更するのに適した機会です。

次に、掘削し続けましょう。サブフィールドのないエンティティを追加する場合、その下に少し波状の赤い線が表示され、少なくとも1つ以上のサブフィールドも指定する必要があることがわかります。それでは、少なくともID、名前、ホームページを追加しましょう。もう1つの有用なトリック：GraphIQLに自動的に指示して、Explorerでオプションコントロールクリックしてフィールドのすべてのサブフィールドを追加するようにできます。

次は経験です。 JavaScriptサイトの状態から最初にコピーされたクエリに近づくものを取得するまで、フィールドとサブフィールドを追加し続けます。選択したアイテムは、クエリビルダーパネル内に即座に反映されます。そこに行くと、最初のGraphQLクエリを書きました！

データのフィルタリング

紫色のフィルターのアイテムが経験していることに気付いたかもしれません。これは、実際に私たちのサイトを閲覧するのではなく、GraphQL APIを使用したい理由です。APIによって提供される集約は、回答者の性別、会社の規模、給与、国など、多くの要因によってフィルタリングできます。

フィルターを展開し、コンパニーズを選択し、次にeqとrange_more_than_1000を選択します。大企業の間でReactの人気を計算したばかりです！代わりにrange_1を選択すると、フリーランサーと独立した開発者の間で同じデータポイントと比較できます。

GraphQLは、フィールドや引数などの非常に低レベルのプリミティブのみを定義するため、これらのEQ、in、ninなどはGraphQL自体の一部ではなく、APIを設定するときに自分自身を定義した単なる引数の一部であることに注意することが重要です。これは最初は多くの作業になる可能性がありますが、クライアントがAPIを照会する方法を完全に制御できます。

結論

GraphQL APIをクエリすることは、特にGraphIQLのような素晴らしいツールでそれを支援することで、それほど大きな取引ではないことを願っています。確かに、実際にGraphQLデータを実際のアプリに統合することは別の問題ですが、これは主にクライアントとサーバー間のデータ転送の複雑さによるものです。 GraphQLパーツ自体は実際には非常に簡単です！

GraphQLを始めたい場合でも、データを照会して驚くべき新しい洞察を思い付くのに十分なことを学びたい場合でも、このガイドが有用であることが証明されることを願っています。

また、次の調査（CSS 2020の状態になるはずです）に参加することに興味がある場合は、メーリングリストにサインアップして、起動時に通知できるようにしてください。

JavaScript APIリファレンスの状態

API.stateofjs.comのAPI（実際のエンドポイントとGitHub Repoへのリンクを含む）の詳細については、詳細を確認できます。

JS APIの州内で使用される用語の簡単な用語集です。

トップレベルのフィールド

• 人口統計：性別、会社の規模、給与など、すべての人口統計情報を再編成します。
• エンティティ：特定の「エンティティ」（ライブラリ、フレームワーク、プログラミング言語など）に関する詳細情報へのアクセスを提供します。
• 機能：特定のJavaScriptまたはCSS機能の使用データ。
• 機能：同じですが、さまざまな機能全体にわたって。
• マトリックス：相互参照的なヒートマップの設定に使用されるデータにアクセスできます。
• 意見：特定の質問の意見データ（「JavaScriptが正しい方向に動いていると思いますか？」）。
• その他ツール： 「その他のツール」セクションのデータ（テキストエディター、ブラウザー、バンドラーなど）。
• リソース： 「リソース」セクション（サイト、ブログ、ポッドキャストなど）のデータ。
• ツール：特定のツール（ライブラリ、フレームワークなど）のデータを体験します。
• ツール：同じですが、さまざまなツールにわたって。
• ツールスランク：さまざまなツールにわたるランキング（認識、関心、満足）。

一般的なフィールド

• 完了：調査回答者のどの割合が特定の質問に答えました。
• バケット：実際のデータを含む配列。
• 年/alleyears：特定の調査年のデータを取得するかどうか。またはすべての年を含む配列。

以上がgraphQlの練習JavaScript APIでクエリをクエリしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。