GraphQL - JQuery 整合

Web 應用程式以非同步方式（在後臺）傳送和檢索資料。AJAX 允許網站在不重新整理頁面的情況下將內容載入到螢幕上。jQuery 提供了幾種 AJAX 功能方法，從而簡化了 AJAX 的使用。在本章中，我們將學習如何將 GraphQL 與 jQuery 整合。

考慮一個使用客戶端-伺服器架構的應用程式。我們可以構建一個前端網頁，它從 GraphQL 伺服器請求資料。該網頁將使用 jQuery 向 GraphQL 伺服器發出 AJAX 呼叫。

要將 GraphQL 與 JQuery 整合，讓我們檢查 GraphiQL 請求頭並瞭解請求引數。

啟動 **hello-world** 應用程式（有關相關說明，請參閱第 6 章）。在 GraphiQL 視窗中鍵入 graphql 查詢 {greeting}。右鍵單擊並檢查或在 Chrome 中按 (ctrl + shift + I) 以轉到網路選項卡，如下所示 -

從簡單的 **hello-world** 示例中，我們可以瞭解到使用的 **http 方法** 是 **POST**。現在在瀏覽器中，向下滾動到標題部分以檢視 *請求有效負載*。

單擊 **檢視程式碼** 後，您將在 Chrome 的請求有效負載部分看到以下內容。

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

還要注意請求 URL **https://:9000/graphql**，該 URL 應從客戶端應用程式呼叫。

圖示

讓我們瞭解如何使用分步過程將 GraphQL 與 JQuery 整合。

設定伺服器

我們將學習如何使用以下步驟設定伺服器 -

步驟 1 - 下載並安裝專案所需的依賴項

建立一個名為 **jquery-server-app** 的資料夾。從終端將您的目錄更改為 jquery-server-app。按照環境設定章節中解釋的步驟 3 到 5 進行操作。

步驟 2 - 建立 Schema

在專案資料夾 **jquery-server-app** 中新增 schema.graphql 檔案，並新增以下程式碼 -

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

該檔案定義了兩個查詢 **greeting** 和 **sayHello**。**sayHello** 查詢接受一個字串引數並返回另一個字串。**sayHello()** 函式的引數不為空。

步驟 3 - 建立 Resolver

在專案資料夾中建立一個名為 resolvers.js 的檔案，並新增以下程式碼 -

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

這裡，**greeting** 和 **sayHello** 是兩個 Resolver。在 **sayHello** Resolver 中，傳遞給 name 引數的值可以透過 args 訪問。要從模組外部訪問 Resolver 函式，必須使用 **module.exports** 匯出 Query 物件。

步驟 4 - 執行應用程式

建立一個 server.js 檔案。請參閱環境設定章節中的步驟 8。在終端中執行命令 *npm start*。伺服器將在 9000 埠啟動並執行。在這裡，我們使用 GraphiQL 作為客戶端來測試應用程式。

開啟瀏覽器並鍵入 URL **https://:9000/graphiql**。在編輯器中鍵入以下查詢 -

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

伺服器的響應如下所示 -

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

設定客戶端

由於我們已經設定了伺服器，現在我們將學習如何設定客戶端。

步驟 1 - 在當前專案資料夾外部建立一個名為 jquery-client-app 的新資料夾

首先，我們將在專案資料夾外部建立一個名為 **jquery-client-app** 的資料夾。

步驟 2 - 為 jQuery 整合建立一個 HTML 頁面 index.html

我們將在 jQuery 中建立一個客戶端應用程式並呼叫這兩種方法。以下是 **index.html** 檔案的程式碼。**index.html** 頁面在單擊按鈕 - **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").html('loading....');

               $.ajax({url: "https://:9000/graphql",
                  contentType: "application/json",type:'POST',
                  data: JSON.stringify({ query:`{
                     sayHello(name:"${name}")}`
                  }),
                  success: function(result) {
                     console.log(JSON.stringify(result))
                     $("#SayhelloDiv").html("<h1>"+result.data.sayHello +"</h1>");
                  }
               });
            });
            
            $("#btnGreet").click(function() {
               $("#greetingDiv").html('loading....');
               //https://kannan-first-graphql-app.herokuapp.com/graphql
               $.ajax({url: "https://:9000/graphql",
                  contentType: "application/json",
                  type:'POST',
                  data: JSON.stringify({
                     query:`{greeting}`
                  }),
                  success: function(result) {
                     $("#greetingDiv").html("<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>

在瀏覽器中開啟此檔案並單擊按鈕以檢視響應。輸出將如下所示 -

列印頁面