GraphQL-JQuery統合

Webアプリケーションは、データを非同期で（バックグラウンドで）送受信します。 AJAXを使用すると、Webサイトはページを更新せずにコンテンツを画面にロードできます。 jQueryにはAJAX機能用のメソッドがいくつか用意されているため、AJAXの使用が簡単になります。この章では、GraphQLをjQueryと統合する方法を学習します。

クライアントサーバーアーキテクチャを使用するアプリケーションを検討してください。 GraphQLサーバーにデータを要求するフロントエンドWebページを構築できます。 Webページは、jQueryを使用してGraphQLサーバーにAJAX呼び出しを行います。

GraphQLをJQueryに統合するには、GraphiQLリクエストヘッダーを調べて、リクエストパラメーターを理解しましょう。

*hello-world* アプリを起動します（関連する図については、第6章を参照してください）。 GraphiQLウィンドウにgraphqlクエリ\ {greeting}を入力します。 右クリックして検査するか、クロムで（Ctrl + Shift + I）を押して、以下に示すようにネットワークタブに移動します-

Chromeネットワークタブ

単純な hello-world の例から、使用される* httpメソッド*が POST であることがわかります。ブラウザで、ヘッダーセクションまでスクロールダウンして、_requestペイロード_を表示します。

[コードを表示]をクリックすると、Chromeのリクエストペイロードセクションに以下が表示されます。

{"query":"{\n  greeting\n}","variables":null,"operationName":null}

また、クライアントアプリケーションから呼び出す必要がある要求URL http：//localhost：9000/graphql にも注意してください。

図

段階的なプロセスを使用して、GraphQLとJQueryを統合する方法を理解しましょう。

サーバーのセットアップ

私たちは、次の手順を使用してサーバーをセットアップすることを学びます-

ステップ1-プロジェクトに必要な依存関係をダウンロードしてインストールする

*jquery-server-app* という名前のフォルダーを作成します。 ターミナルからディレクトリをjquery-server-appに変更します。 環境設定の章で説明されている手順3〜5に従います。

ステップ2-スキーマを作成する

プロジェクトフォルダ jquery-server-app にschema.graphqlファイルを追加し、次のコードを追加します-

type Query
{
   greeting: String
   sayHello(name:String!):String
}

ファイルには、 greeting と sayHello という2つのクエリが定義されています。 saysayelloクエリは、文字列パラメーターを受け取り、別の文字列を返します。 saysayello（）関数のパラメーターがnullではありません。

ステップ3-リゾルバーを作成する

プロジェクトフォルダにファイルresolvers.jsを作成し、次のコードを追加します-

const Query =
{
   greeting: () => 'Hello GraphQL  From finddevguides !!' ,
   sayHello:(root,args,context,info) =>  `Hi ${args.name} GraphQL server says Hello to you!!`
}
module.exports = {Query}

ここで、 greeting と sayHello は2つのリゾルバです。 sayHelloResolverでは、nameパラメーターに渡された値は、argsを介してアクセスできます。モジュール外のリゾルバー関数にアクセスするには、 module.exports を使用してQueryオブジェクトをエクスポートする必要があります。

ステップ4-アプリケーションを実行する

server.jsファイルを作成します。環境設定の章の手順8を参照してください。ターミナルでコマンド_npm start_を実行します。サーバーは9000ポートで稼働します。ここでは、GraphiQLをクライアントとして使用して、アプリケーションをテストします。

ブラウザを開き、URL http：//localhost：9000/graphiql を入力します。エディタで次のクエリを入力します-

{
   greeting,
   sayHello(name:"Mohtashim")
}

サーバーからの応答は以下のとおりです-

{
   "data": {
      "greeting": "Hello GraphQL From finddevguides !!",
      "sayHello": "Hi Mohtashim GraphQL server says Hello to you!!"
   }
}

クライアントのセットアップ

すでにサーバーをセットアップしているので、今度はクライアントをセットアップする方法を学びます。

手順1-現在のプロジェクトフォルダーの外に新しいフォルダーjquery-client-appを作成します

まず、プロジェクトフォルダーの外に jquery-client-app という名前のフォルダーを作成します。

ステップ2-jQuery統合用のHTMLページindexlを作成する

jqueryでクライアントアプリケーションを作成し、両方のメソッドを呼び出します。以下は、 indexl ファイルのコードです。 indexl ページは、ボタン Greet および SayHello がクリックされると、サーバーにリクエストを送信します。 $ .ajax（）関数を使用して非同期リクエストを作成します。

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script>
         $(document).ready(function() {

            $("#btnSayhello").click(function() {

               const name = $("#txtName").val();
               console.log(name);
               $("#SayhelloDiv")l('loading....');

               $.ajax({url: "http://localhost:9000/graphql",
                  contentType: "application/json",type:'POST',
                  data: JSON.stringify({ query:`{
                     sayHello(name:"${name}")}`
                  }),
                  success: function(result) {
                     console.log(JSON.stringify(result))
                     $("#SayhelloDiv")l("<h1>"+result.data.sayHello +"</h1>");
                  }
               });
            });

            $("#btnGreet").click(function() {
               $("#greetingDiv")l('loading....');
              //https://kannan-first-graphql-app.herokuapp.com/graphql
               $.ajax({url: "http://localhost:9000/graphql",
                  contentType: "application/json",
                  type:'POST',
                  data: JSON.stringify({
                     query:`{greeting}`
                  }),
                  success: function(result) {
                     $("#greetingDiv")l("<h1>"+result.data.greeting+"</h1>");
                  }
               });
            });
         });
      </script>
   </head>

   <body>
      <h1>Jquery Client </h1>

      <hr/>
      <section>
         <button id = "btnGreet">Greet</button>
         <br/> <br/>
         <div id = "greetingDiv"> </div>
      </section>

      <br/> <br/> <br/>
      <hr/>

      <section>
         Enter a name:<input id = "txtName" type = "text" value = "kannan"/>
         <button id = "btnSayhello">SayHello</button>
         <div id = "SayhelloDiv"> </div>
      </section>
   </body>
</html>

ブラウザでこのファイルを開き、ボタンをクリックして応答を確認します。出力は以下のようになります-

jQuery統合のブラウザ出力

Graphql-jquery-integration

目次