GraphQL - Ví dụ

Trong chương này, chúng ta sẽ tạo một API đơn giản trả về một thông điệp chào mừng, HelloWorld và truy cập nó bằng GraphiQL.

Thí dụ

Ví dụ này dựa trên máy chủ NodeJS, Express và Apollo. Chúng ta sẽ học cách đặt tất cả các khái niệm lại với nhau theo các bước sau:

Bước 1 - Thiết lập Express

ExpressJS là một khung ứng dụng web giúp xây dựng các trang web và ứng dụng web. Trong ví dụ này, chúng tôi sẽ xây dựng một API GraphQL trên đầu khung Express.

Bước tiếp theo là tạo một thư mục hello-world-servervà điều hướng đến cùng một thư mục từ thiết bị đầu cuối. Thêm package.json và đặt tên cho gói. Vì gói này chỉ được sử dụng trong nội bộ nên chúng ta có thể khai báo nó là private.

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

Cài đặt các phụ thuộc cho máy chủ Express như hình dưới đây -

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

body-parser là một gói phần mềm trung gian giúp Express xử lý các yêu cầu HTTP Post một cách hiệu quả. cors là một gói phần mềm trung gian khác xử lý việc chia sẻ tài nguyên nguồn gốc chéo.

Tạo một server.js tệp trong thư mục dự án và nhập thông tin sau vào đó:

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}`)

Để xác minh xem máy chủ Express có đang hoạt động hay không, hãy thực thi mã sau trong cửa sổ dòng lệnh -

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

Kết quả sau được hiển thị trong bảng điều khiển máy chủ. Điều này cho thấy rằng máy chủ express đang chạy trên cổng 9000.

server is up and running at 9000

Nếu bạn mở trình duyệt và gõ http://localhost:9000, bạn sẽ nhận được màn hình sau:

Để dừng máy chủ, nhấn Ctrl + C.

Bước 2 - Cài đặt GraphQL và Apollo Server

Bây giờ Express đã được định cấu hình, bước tiếp theo là tải xuống các phụ thuộc GraphQL sau:

graphql
graphql-tools
apollo-server-express@1

Chúng tôi sẽ sử dụng máy chủ Apollo v1.0 vì đây là một phiên bản ổn định. Nhập các lệnh sau để cài đặt các phần phụ thuộc này:

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

Chúng tôi có thể xác minh nếu các phần phụ thuộc này được cài đặt thành công bằng cách kiểm tra package.json tệp mà chúng tôi đã tạo trước đó.

{
   "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"
   }
}

Bước 3 - Xác định lược đồ

Một lược đồ GraphQL xác định loại đối tượng nào có thể được tìm nạp từ một dịch vụ và nó có những trường nào. Lược đồ có thể được xác định bằng cách sử dụngGraphQL Schema Definition Language. Bây giờ, hãy thêm đoạn mã sau vàoserver.js tập tin -

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

Ở đây, truy vấn chứa thuộc tính lời chào trả về giá trị chuỗi .

Bước 4 - Tạo trình phân giải

Bước đầu tiên trong việc tạo trình phân giải là thêm một số mã để xử lý yêu cầu cho trường lời chào. Điều này được chỉ định trong mộtresolver. Cấu trúc của hàm phân giải phải phù hợp với lược đồ. Thêm đoạn mã sau vàoserver.js tập tin.

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

Bước thứ hai là liên kết lược đồ và trình phân giải bằng cách sử dụng makeExecutableSchema. Hàm này được xác định trước trong mô-đun graphql-tools. Thêm đoạn mã sau vào server.js tập tin.

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

Bước 5 - Xác định các tuyến để tìm nạp dữ liệu từ ứng dụng ReactJS / GraphiQL

Thêm đoạn mã sau vào server.js tập tin -

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

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

Hàm graphqlExpress giúp đăng ký lộ trìnhhttp://localhost:9000/graphql. Ứng dụng ReactJS có thể sử dụng điểm cuối này để truy vấn dữ liệu. Tương tự, hàm graphqliExpress giúp đăng ký lộ trìnhhttp://localhost:9000/graphiql. Điều này sẽ được ứng dụng khách trình duyệt GraphiQL sử dụng để kiểm tra API.

Mã server.js hoàn chỉnh như dưới đây:

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}`))

Bước 6 - Khởi động ứng dụng

Hành hình server.js sử dụng Node.js như sau:

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

Bước 7 - Kiểm tra API GraphQL

Mở trình duyệt và nhập http://localhost:9000/graphiql. Trong tab truy vấn của GraphiQL, nhập thông tin sau:

{
   greeting
}

Phản hồi từ máy chủ được đưa ra dưới đây:

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

Hình ảnh sau đây minh họa phản ứng -

Note - Hãy đảm bảo rằng Apollo Server Phiên bản 1.0 đã được sử dụng.