GraphQL - ไคลเอนต์ Apollo

เราได้ใช้ Apollo Server เพื่อสร้างข้อกำหนด graphql บนฝั่งเซิร์ฟเวอร์ มันง่ายและรวดเร็วในการสร้างเซิร์ฟเวอร์ GraphQL ที่พร้อมใช้งานจริง ตอนนี้ให้เราเข้าใจฝั่งไคลเอ็นต์

Apollo Client เป็นวิธีที่ดีที่สุดในการใช้ GraphQL เพื่อสร้างแอปพลิเคชันไคลเอนต์ ไคลเอนต์ได้รับการออกแบบมาเพื่อช่วยให้นักพัฒนาสร้าง UI ที่ดึงข้อมูลด้วย GraphQL ได้อย่างรวดเร็วและสามารถใช้กับส่วนหน้าของ JavaScript ใดก็ได้

Apollo Client รองรับแพลตฟอร์มต่อไปนี้ -

ซีเนียร์	แพลตฟอร์มและกรอบงาน
1	Javascript ปฏิกิริยาเชิงมุม, Vue, ดาวตก, Ember
2	WebComponents พอลิเมอร์ไลท์อพอลโล
3	Native Mobile Native Android พร้อม Java, Native iOS พร้อม Swift

การแคชเป็นหนึ่งในคุณสมบัติหลักของ Apollo Client apollo-boost เป็นแพ็คเกจอำนวยความสะดวกที่นำมาซึ่งการพึ่งพาอื่น ๆ อีกมากมาย

ภาพประกอบ

ให้เราดูวิธีใช้ Apollo Client เพื่อสร้างแอปพลิเคชันไคลเอนต์โดยใช้ขั้นตอนต่อไปนี้ -

การตั้งค่าเซิร์ฟเวอร์

เราต้องทำตามขั้นตอนด้านล่างเพื่อตั้งค่าเซิร์ฟเวอร์ -

ขั้นตอนที่ 1 - ดาวน์โหลดและติดตั้งการอ้างอิงที่จำเป็นสำหรับโครงการ

สร้างโฟลเดอร์ apollo-server-app เปลี่ยนไดเร็กทอรีของคุณเป็น apollo-server-app จากขั้ว จากนั้นทำตามขั้นตอนที่ 3 ถึง 5 ที่อธิบายไว้ในบทการตั้งค่าสภาพแวดล้อม

ขั้นตอนที่ 2 - สร้างสคีมา

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

type Query
{
   students:[Student]
}

type Student {
   id:ID!
   firstName:String
   lastName:String
   college:College
}

type College {
   id:ID!
   name:String
   location:String
   rating:Float
}

ขั้นตอนที่ 3 - เพิ่มตัวแก้ไข

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

const db = require('./db')

const Query = {
   //resolver function for students returns list
   students:() => db.students.list(),
}

const Student = {
   college:(root) => {
      return db.colleges.get(root.collegeId);
   }
}
module.exports = {Query,Student}

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

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

เปิดเบราว์เซอร์และพิมพ์ URL http://localhost:9000/graphiql. พิมพ์แบบสอบถามต่อไปนี้ในตัวแก้ไข

{
   students{
      id
      firstName
      college{
         name
      }
   }
}

การตอบสนองสำหรับแบบสอบถามมีดังต่อไปนี้ -

{
   "data": {
      "students": [
         {
            "id": "S1001",
            "firstName": "Mohtashim",
            "college": {
               "name": "CUSAT"
            }
         },
         
         {
            "id": "S1002",
            "firstName": "Kannan",
            "college": {
               "name": "AMU"
            }
         },
         
         {
            "id": "S1003",
            "firstName": "Kiran",
            "college": {
               "name": "AMU"
            }
         }
      ]
   }
}

การตั้งค่าไคลเอนต์

เปิดเทอร์มินัลใหม่สำหรับไคลเอนต์ ควรให้เทอร์มินัลเซิร์ฟเวอร์ทำงานต่อไปก่อนที่จะเรียกใช้แอปพลิเคชันไคลเอนต์ แอปพลิเคชัน React จะทำงานบนพอร์ตหมายเลข 3000 และแอปพลิเคชันเซิร์ฟเวอร์บนพอร์ตหมายเลข 9000

ขั้นตอนที่ 1 - สร้างแอปพลิเคชันตอบสนอง

ในไคลเอนต์เทอร์มินัลพิมพ์คำสั่งต่อไปนี้ -

npx create-react-app hello-world-client

สิ่งนี้จะติดตั้งทุกสิ่งที่จำเป็นสำหรับแอปพลิเคชันการตอบสนองทั่วไป ยูทิลิตี้ npx และเครื่องมือสร้างปฏิกิริยาแอปสร้างโปรเจ็กต์ที่มีชื่อhello-world-client. เมื่อการติดตั้งเสร็จสิ้นให้เปิดโครงการใน VSCode

ขั้นตอนที่ 2 - เริ่มสวัสดีลูกค้าทั่วโลก

เปลี่ยนเส้นทางโฟลเดอร์ปัจจุบันในเทอร์มินัลเป็น hello-world-client. พิมพ์ npm start เพื่อเปิดตัวโปรเจ็กต์ การดำเนินการนี้จะเรียกใช้เซิร์ฟเวอร์การพัฒนาที่พอร์ต 3000 และจะเปิดเบราว์เซอร์โดยอัตโนมัติและโหลดหน้าดัชนี

สิ่งนี้แสดงในภาพหน้าจอด้านล่าง -

ขั้นตอนที่ 3 - ติดตั้ง Apollo Client Libraries

ในการติดตั้ง Apollo Client ให้เปิดเทอร์มินัลใหม่และอยู่ในเส้นทางโฟลเดอร์โครงการปัจจุบัน พิมพ์คำสั่งต่อไปนี้ -

npm install apollo-boost graphql

สิ่งนี้จะดาวน์โหลดไลบรารี graphql สำหรับฝั่งไคลเอ็นต์และแพ็คเกจ Apollo Boost เราสามารถตรวจสอบสิ่งนี้ได้โดยพิมพ์ npm view ใน apollo-boost dependencies สิ่งนี้จะมีการอ้างอิงมากมายดังที่แสดงด้านล่าง -

{
   'apollo-cache': '^1.1.15',
   'apollo-cache-inmemory': '^1.2.8',
   'apollo-client': '^2.4.0',
   'apollo-link': '^1.0.6',
   'apollo-link-error': '^1.0.3',
   'apollo-link-http': '^1.3.1',
   'apollo-link-state': '^0.4.0',
   'graphql-tag': '^2.4.2'
}

เราจะเห็นได้ชัดเจนว่ามีการติดตั้งไลบรารี Apollo-Client

ขั้นตอนที่ 4 - แก้ไขส่วนประกอบของแอพในไฟล์ index.js

ด้วย Apollo Client เราสามารถเรียกเซิร์ฟเวอร์ได้โดยตรงโดยไม่ต้องใช้ fetch API นอกจากนี้ไม่ควรฝังข้อความค้นหาและการกลายพันธุ์ไว้ในสตริงที่สร้างด้วยเครื่องหมายขีดหลัง นี่เป็นเพราะไฟล์gqlฟังก์ชันแยกวิเคราะห์แบบสอบถามโดยตรง ซึ่งหมายความว่าโปรแกรมเมอร์สามารถเขียนแบบสอบถามได้โดยตรงในลักษณะเดียวกันเมื่อเขียนแบบสอบถามในเครื่องมือ GraphiQL gql เป็นฟังก์ชันแท็กซึ่งจะแยกวิเคราะห์สตริงแม่แบบที่เขียนด้วยเครื่องหมายขีดหลังไปยังวัตถุแบบสอบถาม graphql วิธีการสอบถาม Apollo Client ส่งคืนคำสัญญา

ข้อมูลโค้ดต่อไปนี้แสดงวิธีการนำเข้า Apollo Client -

import {ApolloClient, HttpLink, InMemoryCache} from 'apollo-boost'

const endPointUrl = 'http://localhost:9000/graphql'
const client = new ApolloClient({
   link: new HttpLink({uri:endPointUrl}),
   cache:new InMemoryCache()
});

ในบทที่แล้วเราได้พูดถึงวิธีใช้ fetch API สำหรับคำขอ HTTP รหัสต่อไปนี้แสดงวิธีใช้gqlฟังก์ชัน loadStudentsAsync ฟังก์ชันใช้ไคลเอนต์ graphql เพื่อค้นหาเซิร์ฟเวอร์

async function loadStudentsAsync() {
   const query = gql`
   {
      students{
         id
         firstName
         lastName
         college{
            name
         }
      }
   }`
   const {data} = await client.query({query}) ;
   return data.students;
}

คุณจะต้องเก็บไฟล์ index.js ใน srcโฟลเดอร์และ index.html ในโฟลเดอร์สาธารณะ ไฟล์อื่น ๆ ทั้งหมดที่สร้างขึ้นโดยอัตโนมัติสามารถลบออกได้

โครงสร้างไดเร็กทอรีได้รับด้านล่าง -

hello-world-client /
   -->node_modules
   -->public
         index.html
   -->src
         index.js
   -->package.json

ต่อไปนี้คือไฟล์ index.js ในแอปพลิเคชันตอบสนอง -

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

// apollo client

import {ApolloClient, HttpLink, InMemoryCache} from 'apollo-boost'
import gql from 'graphql-tag'

const endPointUrl = 'http://localhost:9000/graphql'
const client = new ApolloClient({
   link: new HttpLink({uri:endPointUrl}),
   cache:new InMemoryCache()
});

async function loadStudentsAsync() {
   const query = gql`
   {
      students{
         id
         firstName
         lastName
         college{
            name
         }
      }
   }
   `
   const {data} = await client.query({query}) ;
   return data.students;
}
class  App  extends Component {
   constructor(props) {
      super(props);
      this.state = {
         students:[]
      }
      this.studentTemplate =  [];
   }
   async loadStudents() {
      const studentData =  await loadStudentsAsync();
      this.setState({
         students: studentData
      })
      console.log("loadStudents")
   }
   render() {
      return(
         <div>
            <input type = "button"  value = "loadStudents" onClick = {this.loadStudents.bind(this)}/>
            <div>
               <br/>
               <hr/>
               <table border = "3">
                  <thead>
                     <tr>
                        <td>First Name</td>
                        <td>Last Name</td>
                        <td>college Name</td>
                     </tr>
                  </thead>
                  
                  <tbody>
                     {
                        this.state.students.map(s => {
                           return (
                              <tr key = {s.id}>
                                 <td>
                                    {s.firstName}
                                 </td>
                                 <td>
                                    {s.lastName}
                                 </td>
                                 <td>
                                    {s.college.name}
                                 </td>
                              </tr>
                           )
                        })
                     }
                  </tbody>
               </table>
            </div>
         </div>
      )
   }
}
ReactDOM.render(<App/>, document.getElementById('root'));

แอปพลิเคชันตอบกลับจะโหลดนักเรียนจากเซิร์ฟเวอร์ GraphQL เมื่อเราคลิกที่ปุ่ม loadStudents ดังที่แสดงด้านล่าง -