GraphQL - การรวม JQuery

เว็บแอปพลิเคชันส่งและดึงข้อมูลแบบอะซิงโครนัส (ในพื้นหลัง) AJAX อนุญาตให้เว็บไซต์โหลดเนื้อหาลงบนหน้าจอโดยไม่ต้องรีเฟรชหน้า jQuery มีวิธีการหลายอย่างสำหรับฟังก์ชัน AJAX ซึ่งทำให้การใช้งาน AJAX ง่ายขึ้น ในบทนี้เราจะเรียนรู้วิธีที่เราสามารถรวม GraphQL กับ jQuery

พิจารณาแอปพลิเคชันที่ใช้สถาปัตยกรรมไคลเอนต์เซิร์ฟเวอร์ เราสามารถสร้างหน้าเว็บส่วนหน้าที่ร้องขอข้อมูลจากเซิร์ฟเวอร์ GraphQL หน้าเว็บจะทำการเรียก AJAX โดยใช้ jQuery ไปยังเซิร์ฟเวอร์ GraphQL

ในการผสานรวม GraphQL กับ JQuery ให้เราตรวจสอบส่วนหัวของคำขอ GraphiQL และทำความเข้าใจกับพารามิเตอร์คำขอ

เริ่ม hello-worldแอพ (ดูบทที่ 6 สำหรับภาพประกอบที่เกี่ยวข้อง) พิมพ์คำค้นหา graphql {greeting} ในหน้าต่าง GraphiQL คลิกขวาและตรวจสอบหรือกด (ctrl + shift + I) บน chrome เพื่อไปที่แท็บเครือข่ายดังที่แสดงด้านล่าง -

จากที่เรียบง่าย hello-world ตัวอย่างเช่นเราสามารถเข้าใจได้ http method ใช้คือ POST. ตอนนี้ในเบราว์เซอร์ให้เลื่อนลงไปที่ส่วนหัวเพื่อดู น้ำหนักบรรทุกคำขอ

เมื่อคุณคลิกที่ view codeคุณจะเห็นสิ่งต่อไปนี้ในส่วนเพย์โหลดคำขอของ 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 - สร้างสคีมา

เพิ่มไฟล์ schema.graphql ในโฟลเดอร์โครงการ jquery-server-app และเพิ่มรหัสต่อไปนี้ -

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

ไฟล์ได้กำหนดสองแบบสอบถาม greeting และ sayHello. แบบสอบถาม sayHello ยอมรับพารามิเตอร์สตริงและส่งคืนสตริงอื่น พารามิเตอร์ของฟังก์ชัน sayHello () ไม่เป็นโมฆะ

ขั้นตอนที่ 3 - สร้างตัวแก้ไข

สร้างไฟล์ 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เป็นตัวแก้ไขสองตัว ในตัวแก้ไข sayHello ค่าที่ส่งไปยังพารามิเตอร์ name สามารถเข้าถึงได้ผ่าน args ในการเข้าถึงฟังก์ชันตัวแก้ไขภายนอกโมดูลต้องส่งออกวัตถุแบบสอบถามโดยใช้module.exports.

ขั้นตอนที่ 4 - เรียกใช้แอปพลิเคชัน

สร้างไฟล์ server.js โปรดดูขั้นตอนที่ 8 ในบทการตั้งค่าสภาพแวดล้อม ดำเนินการคำสั่งnpm startในเทอร์มินัล เซิร์ฟเวอร์จะทำงานบนพอร์ต 9000 ที่นี่เราใช้ GraphiQL เป็นไคลเอนต์เพื่อทดสอบแอปพลิเคชัน

เปิดเบราว์เซอร์และพิมพ์ URL http://localhost: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 - สร้างหน้า HTML index.html สำหรับการรวม jQuery

เราจะสร้างแอปพลิเคชันไคลเอนต์ใน 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: "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").html("<h1>"+result.data.sayHello +"</h1>");
                  }
               });
            });
            
            $("#btnGreet").click(function() {
               $("#greetingDiv").html('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").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>

เปิดไฟล์นี้ในเบราว์เซอร์และคลิกที่ปุ่มเพื่อดูการตอบสนอง ผลลัพธ์จะเป็นไปตามที่ระบุด้านล่าง -