GraphQL - ตัวอย่าง

ในบทนี้เราจะสร้าง API ง่ายๆที่ส่งคืนข้อความทักทาย HelloWorld และเข้าถึงโดยใช้ GraphiQL

ตัวอย่าง

ตัวอย่างนี้อ้างอิงจากเซิร์ฟเวอร์ NodeJS, Express และ Apollo เราจะเรียนรู้ที่จะรวบรวมแนวคิดทั้งหมดพร้อมกับขั้นตอนต่อไปนี้ -

ขั้นตอนที่ 1 - การตั้งค่า Express

ExpressJS เป็นกรอบงานเว็บแอปพลิเคชันที่ช่วยในการสร้างเว็บไซต์และเว็บแอปพลิเคชัน ในตัวอย่างนี้เราจะสร้าง GraphQL API ที่ด้านบนของเฟรมเวิร์ก Express

ขั้นตอนต่อไปคือการสร้างโฟลเดอร์ hello-world-serverและไปที่โฟลเดอร์เดียวกันจากเทอร์มินัล เพิ่ม package.json และตั้งชื่อให้กับแพ็กเกจ เนื่องจากแพ็คเกจนี้ใช้เป็นการภายในเท่านั้นเราจึงประกาศให้เป็นส่วนตัวได้

{
   "name":"hello-world-server",
   "private":true
}

ติดตั้งการอ้างอิงสำหรับเซิร์ฟเวอร์ Express ดังที่แสดงด้านล่าง -

C:\Users\Admin\hello-world-server>npm install express body-parser cors

body-parserเป็นแพ็กเกจมิดเดิลแวร์ที่ช่วยให้ Express จัดการคำขอ HTTP Post ได้อย่างมีประสิทธิภาพ corsเป็นแพ็คเกจมิดเดิลแวร์อื่นที่จัดการการแชร์ทรัพยากรข้ามแหล่งที่มา

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

const bodyParser = require('body-parser')
   const cors = require('cors')
   const express = require('express')
   const port = process.env.PORT|| 9000
   const app = express()
   
   //register middleware
   app.use(bodyParser.json() , cors())
   app.listen(port, () =>  console.log(`server is up and running at ${port}`)

ในการตรวจสอบว่าเซิร์ฟเวอร์ Express ทำงานอยู่หรือไม่ให้รันโค้ดต่อไปนี้ในหน้าต่างเทอร์มินัล -

C:\Users\Admin\hello-world-server>node server.js

เอาต์พุตต่อไปนี้จะแสดงในคอนโซลเซิร์ฟเวอร์ นี่แสดงว่าเซิร์ฟเวอร์ด่วนกำลังทำงานบนพอร์ต 9000

server is up and running at 9000

หากคุณเปิดเบราว์เซอร์และพิมพ์ http://localhost:9000คุณจะได้รับหน้าจอต่อไปนี้ -

ในการหยุดเซิร์ฟเวอร์กด Ctrl + C.

ขั้นตอนที่ 2 - ติดตั้ง GraphQL และ Apollo Server

เมื่อกำหนดค่า Express แล้วขั้นตอนต่อไปคือการดาวน์โหลดการอ้างอิง GraphQL ต่อไปนี้ -

  • graphql
  • graphql-tools
  • apollo-server-express@1

เราจะใช้ Apollo server v1.0 เนื่องจากเป็นรุ่นที่เสถียร พิมพ์คำสั่งต่อไปนี้เพื่อติดตั้งการอ้างอิงเหล่านี้ -

C:\Users\Admin\hello-world-server>npm install graphql graphql-tools apollo-server-express@1

เราสามารถตรวจสอบได้ว่าการอ้างอิงเหล่านี้ติดตั้งสำเร็จหรือไม่โดยตรวจสอบไฟล์ package.json ไฟล์ที่เราสร้างไว้ก่อนหน้านี้

{
   "name": "hello-world-server",
   "private": true,
   
   "dependencies": {
      "apollo-server-express": "^1.4.0",
      "body-parser": "^1.18.3",
      "cors": "^2.8.4",
      "express": "^4.16.3",
      "graphql": "^0.13.2",
      "graphql-tools": "^3.1.1"
   }
}

ขั้นตอนที่ 3 - กำหนด Schema

สคีมา GraphQL กำหนดชนิดของออบเจ็กต์ที่สามารถดึงข้อมูลจากบริการและฟิลด์ที่มีอยู่ สคีมาสามารถกำหนดได้โดยใช้GraphQL Schema Definition Language. ตอนนี้เพิ่มข้อมูลโค้ดต่อไปนี้ในไฟล์server.js ไฟล์ -

// Adding Type Definitions
const typeDefinition = `
   type Query  {
      greeting: String
   }

ที่นี่แบบสอบถามมีแอตทริบิวต์คำทักทายที่ส่งคืนค่าสตริง

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

ขั้นตอนแรกในการสร้างตัวแก้ไขคือการเพิ่มโค้ดเพื่อประมวลผลฟิลด์การร้องขอสำหรับการทักทาย ระบุไว้ในไฟล์resolver. โครงสร้างของฟังก์ชันตัวแก้ไขต้องตรงกับสคีมา เพิ่มข้อมูลโค้ดต่อไปนี้ในไฟล์server.js ไฟล์.

// Adding resolver
const  resolverObject = {
   Query : {
      greeting: () => 'Hello GraphQL  From TutorialsPoint !!'
   }
}

ขั้นตอนที่สองคือการผูกสคีมาและตัวแก้ไขโดยใช้ makeExecutableSchema. ฟังก์ชันนี้ถูกกำหนดไว้ล่วงหน้าในโมดูล graphql-tools เพิ่มข้อมูลโค้ดต่อไปนี้ในไฟล์ server.js ไฟล์.

const {makeExecutableSchema} = require('graphql-tools')
const schema = makeExecutableSchema({typeDefs:typeDefinition, resolvers:resolverObject})

ขั้นตอนที่ 5 - กำหนดเส้นทางในการดึงข้อมูลจากแอปพลิเคชัน ReactJS / GraphiQL

เพิ่มข้อมูลโค้ดต่อไปนี้ในไฟล์ server.js ไฟล์ -

const {graphqlExpress, graphiqlExpress} = require('apollo-server-express')

   //create routes for graphql and graphiql
   app.use('/graphql',graphqlExpress({schema}))
   
   app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))

graphqlExpressฟังก์ชั่นช่วยในการลงทะเบียนเส้นทางhttp://localhost:9000/graphql. แอปพลิเคชัน ReactJS สามารถใช้จุดสิ้นสุดนี้เพื่อสืบค้นข้อมูล ในทำนองเดียวกันฟังก์ชันgraphqliExpressช่วยในการลงทะเบียนเส้นทางhttp://localhost:9000/graphiql. สิ่งนี้จะถูกใช้โดยไคลเอนต์เบราว์เซอร์ GraphiQL เพื่อทดสอบ API

รหัส server.js ที่สมบูรณ์มีดังต่อไปนี้ -

const bodyParser = require('body-parser')
const cors = require('cors')
const express = require('express')
const port = process.env.PORT||9000
const app = express()

app.use(bodyParser.json() , cors())
const typeDefinition = `
type Query  {
   greeting: String
}`
const  resolverObject = {
   Query : {
      greeting: () => 'Hello GraphQL  From TutorialsPoint !!'
   }
}
const {makeExecutableSchema} = require('graphql-tools')

const schema = makeExecutableSchema({typeDefs:typeDefinition, resolvers:resolverObject})

const {graphqlExpress,graphiqlExpress} = require('apollo-server-express')

app.use('/graphql',graphqlExpress({schema}))
app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))
app.listen(port, () =>  console.log(`server is up and running ${port}`))

ขั้นตอนที่ 6 - เริ่มแอปพลิเคชัน

ดำเนินการ server.js โดยใช้ Node.js ดังนี้ -

C:\Users\Admin\hello-world-server>node server.js

ขั้นตอนที่ 7 - ทดสอบ GraphQL API

เปิดเบราว์เซอร์และพิมพ์ http://localhost:9000/graphiql. ในแท็บแบบสอบถามของ GraphiQL ให้ป้อนข้อมูลต่อไปนี้ -

{
   greeting
}

การตอบสนองจากเซิร์ฟเวอร์ได้รับด้านล่าง -

{
   "data": {
      "greeting": "Hello GraphQL From TutorialsPoint !!"
   }
}

ภาพต่อไปนี้แสดงให้เห็นถึงการตอบสนอง -

Note - โปรดตรวจสอบให้แน่ใจว่าใช้ Apollo Server เวอร์ชัน 1.0