GraphQL - Thiết lập môi trường

Trong chương này, chúng ta sẽ tìm hiểu về thiết lập môi trường cho GraphQL. Để thực hiện các ví dụ trong hướng dẫn này, bạn sẽ cần những điều sau:

• Máy tính chạy Linux, macOS hoặc Windows.

• Trình duyệt web, tốt nhất là phiên bản mới nhất của Google Chrome.

• Một phiên bản gần đây của Node.js đã được cài đặt. Phiên bản LTS mới nhất được khuyến nghị.

• Visual Studio Code với phần mở rộng GraphQL cho VSCode được cài đặt hoặc bất kỳ trình soạn thảo mã nào bạn chọn.

Cách xây dựng máy chủ GraphQL với Nodejs

Chúng ta sẽ đi qua một cách tiếp cận chi tiết từng bước để xây dựng máy chủ GraphQL với Nodejs như hình dưới đây:

Bước 1 - Xác minh các phiên bản Node và Npm

Sau khi cài đặt NodeJs, hãy xác minh phiên bản của nút và npm bằng cách sử dụng các lệnh sau trên thiết bị đầu cuối:

C:\Users\Admin>node -v
v8.11.3

C:\Users\Admin>npm -v
5.6.0

Bước 2 - Tạo một thư mục dự án và mở trong VSCode

Thư mục gốc của dự án có thể được đặt tên là test-app.

Mở thư mục bằng trình chỉnh sửa mã studio trực quan bằng cách sử dụng các hướng dẫn bên dưới -

C:\Users\Admin>mkdir test-app
C:\Users\Admin>cd test-app
C:\Users\Admin\test-app>code.

Bước 3 - Tạo package.json và cài đặt các phụ thuộc

Tạo một tệp package.json sẽ chứa tất cả các phần phụ thuộc của ứng dụng máy chủ GraphQL.

{
   "name": "hello-world-server",
   "private": true,
   "scripts": {
      "start": "nodemon --ignore data/ server.js"
   },
   
   "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"
   },
   
   "devDependencies": {
      "nodemon": "1.17.1"
   }
}

Cài đặt các phụ thuộc bằng cách sử dụng lệnh như dưới đây:

C:\Users\Admin\test-app>npm install

Bước 4 - Tạo cơ sở dữ liệu tệp phẳng trong thư mục dữ liệu

Trong bước này, chúng tôi sử dụng các tệp phẳng để lưu trữ và truy xuất dữ liệu. Tạo dữ liệu thư mục và thêm hai tệpstudents.json và colleges.json.

Sau đây là colleges.json tập tin -

[
   {
      "id": "col-101",
      "name": "AMU",
      "location": "Uttar Pradesh",
      "rating":5.0
   },
   
   {
      "id": "col-102",
      "name": "CUSAT",
      "location": "Kerala",
      "rating":4.5
   }
]

Sau đây là students.json tập tin -

[
   {
      "id": "S1001",
      "firstName":"Mohtashim",
      "lastName":"Mohammad",
      "email": "[email protected]",
      "password": "pass123",
      "collegeId": "col-102"
   },
   
   {
      "id": "S1002",
      "email": "[email protected]",
      "firstName":"Kannan",
      "lastName":"Sudhakaran",
      "password": "pass123",
      "collegeId": "col-101"
   },
   
   {
      "id": "S1003",
      "email": "[email protected]",
      "firstName":"Kiran",
      "lastName":"Panigrahi",
      "password": "pass123",
      "collegeId": "col-101"
   }
]

Bước 5 - Tạo lớp truy cập dữ liệu

Chúng ta cần tạo một kho dữ liệu để tải nội dung thư mục dữ liệu. Trong trường hợp này, chúng ta cần các biến tập hợp, sinh viên và trường cao đẳng . Bất cứ khi nào ứng dụng cần dữ liệu, nó sẽ sử dụng các biến thu thập này.

Tạo tệp db.js trong thư mục dự án như sau:

const { DataStore } = require('notarealdb');

const store = new DataStore('./data');

module.exports = {
   students:store.collection('students'),
   colleges:store.collection('colleges')
};

Bước 6 - Tạo tệp lược đồ, schema.graphql

Tạo một tệp giản đồ trong thư mục dự án hiện tại và thêm các nội dung sau:

type Query  {
   test: String
}

Bước 7 - Tạo tệp trình phân giải, giải quyết.js

Tạo tệp trình phân giải trong thư mục dự án hiện tại và thêm nội dung sau:

const Query = {
   test: () => 'Test Success, GraphQL server is up & running !!'
}
module.exports = {Query}

Bước 8 - Tạo Server.js và cấu hình GraphQL

Tạo tệp máy chủ và định cấu hình GraphQL như sau:

const bodyParser = require('body-parser');
const cors = require('cors');
const express = require('express');
const db = require('./db');

const port = process.env.PORT || 9000;
const app = express();

const fs = require('fs')
const typeDefs = fs.readFileSync('./schema.graphql',{encoding:'utf-8'})
const resolvers = require('./resolvers')

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

app.use(cors(), bodyParser.json());

const  {graphiqlExpress,graphqlExpress} = require('apollo-server-express')
app.use('/graphql',graphqlExpress({schema}))
app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))

app.listen(
   port, () => console.info(
      `Server started on port ${port}`
   )
);

Bước 9 - Chạy ứng dụng và kiểm tra bằng GraphiQL

Xác minh cấu trúc thư mục của ứng dụng thử nghiệm dự án như sau:

test-app /
   -->package.json
   -->db.js
   -->data
      students.json
      colleges.json
   -->resolvers.js
   -->schema.graphql
   -->server.js

Chạy lệnh npm start như dưới đây:

C:\Users\Admin\test-app>npm start

Máy chủ đang chạy ở cổng 9000, vì vậy chúng tôi có thể kiểm tra ứng dụng bằng công cụ GraphiQL. Mở trình duyệt và nhập URL http: // localhost: 9000 / graphiql. Nhập truy vấn sau vào trình soạn thảo -

{
   Test 
}

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

{
   "data": {
      "test": "Test Success, GraphQL server is running !!"
   }
}