GraphQL là một ngôn ngữ truy vấn mạnh mẽ và linh hoạt được phát triển bởi Facebook. Thư viện GraphQL.js giúp tích hợp ngôn ngữ này vào các ứng dụng JavaScript một cách dễ dàng và hiệu quả. Bài viết này sẽ hướng dẫn cách cài đặt và sử dụng thư viện GraphQL.js trong các dự án JavaScript của bạn, bao gồm việc thiết lập môi trường, tạo schema, truy vấn dữ liệu và xử lý các yêu cầu.
1. Giới thiệu về GraphQL và GraphQL.js
1.1 GraphQL là gì?
GraphQL là một ngôn ngữ truy vấn cho API và runtime để thực thi các truy vấn đó bằng dữ liệu hiện có của bạn. GraphQL cung cấp một cách linh hoạt và hiệu quả để truy vấn dữ liệu bằng cách cho phép người dùng xác định chính xác những gì họ cần từ API.
1.2 GraphQL.js là gì?
GraphQL.js là một thư viện JavaScript giúp bạn xây dựng ứng dụng sử dụng GraphQL một cách dễ dàng. Nó bao gồm những công cụ cần thiết để thực hiện, phân tích cú pháp, và xác thực các truy vấn GraphQL.
2. Thiết lập môi trường làm việc
2.1 Yêu cầu cần thiết
-
Node.js: Bạn cần cài đặt Node.js trên máy tính của mình. Bạn có thể tải Node.js từ trang chủ của Node.js.
-
npm hoặc yarn: Công cụ để quản lý các gói phần mềm. npm đi kèm với Node.js nhưng bạn cũng có thể sử dụng yarn nếu bạn muốn.
2.2 Tạo và khởi tạo dự án mới
Mở terminal và tạo một thư mục mới cho dự án của bạn. Sau đó, di chuyển vào thư mục đó và khởi tạo một dự án npm mới:
mkdir graphql-js-project
cd graphql-js-project
npm init -y
2.3 Cài đặt GraphQL.js
Để cài đặt GraphQL.js, bạn có thể sử dụng npm hoặc yarn:
npm install graphql
Hoặc nếu bạn sử dụng yarn:
yarn add graphql
3. Tạo một server đơn giản với GraphQL.js
3.1 Khởi tạo server với Express và GraphQL
Đầu tiên, chúng ta cần cài đặt các thư viện cần thiết để chạy server, bao gồm express và express-graphql:
npm install express express-graphql
3.2 Tạo server Express với GraphQL.js
Tạo một file mới index.js và thêm mã sau vào file:
const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');
// Khởi tạo một schema GraphQL
const schema = buildSchema(`
type Query {
hello: String
}
`);
// Định nghĩa resolver cho schema
const root = {
hello: () => {
return 'Hello world!';
},
};
// Tạo ứng dụng Express
const app = express();
// Thiết lập endpoint cho GraphQL
app.use('/graphql', graphqlHTTP({
schema: schema,
rootValue: root,
graphiql: true,
}));
// Khởi chạy server
app.listen(4000, () => {
console.log('GraphQL server running at http://localhost:4000/graphql');
});
Bây giờ, bạn có thể chạy server bằng lệnh:
node index.js
Mở trình duyệt và truy cập vào http://localhost:4000/graphql. Bạn sẽ thấy GraphiQL - một công cụ phát triển cho GraphQL, nơi bạn có thể chạy các truy vấn của mình. Thử chạy truy vấn sau:
{
hello
}
Bạn sẽ nhận được kết quả:
{
"data": {
"hello": "Hello world!"
}
}
4. Định nghĩa Schema và Resolver phức tạp hơn
4.1 Tạo Schema phức tạp
Thay đổi schema của bạn để bao gồm nhiều loại khác nhau. Ví dụ, tạo một hệ thống quản lý sách và tác giả:
const schema = buildSchema(`
type Query {
book(id: ID!): Book
books: [Book]
author(id: ID!): Author
authors: [Author]
}
type Book {
id: ID
title: String
author: Author
}
type Author {
id: ID
name: String
books: [Book]
}
`);
4.2 Tạo dữ liệu mẫu
Tạo một tệp chứa dữ liệu mẫu cho các truy vấn:
const authors = [
{ id: '1', name: 'J.K. Rowling' },
{ id: '2', name: 'J.R.R. Tolkien' },
];
const books = [
{ id: '1', title: 'Harry Potter and the Chamber of Secrets', authorId: '1' },
{ id: '2', title: 'Harry Potter and the Prisoner of Azkaban', authorId: '1' },
{ id: '3', title: 'Harry Potter and the Goblet of Fire', authorId: '1' },
{ id: '4', title: 'The Fellowship of the Ring', authorId: '2' },
{ id: '5', title: 'The Two Towers', authorId: '2' },
{ id: '6', title: 'The Return of the King', authorId: '2' },
];
4.3 Định nghĩa Resolver phức tạp
Cập nhật các resolver để xử lý các yêu cầu truy vấn phức tạp:
const root = {
book: ({ id }) => {
return books.find(book => book.id === id);
},
books: () => {
return books;
},
author: ({ id }) => {
return authors.find(author => author.id === id);
},
authors: () => {
return authors;
},
Book: {
author: (book) => {
return authors.find(author => author.id === book.authorId);
},
},
Author: {
books: (author) => {
return books.filter(book => book.authorId === author.id);
},
},
};
4.4 Cập nhật server để sử dụng schema mới
Hãy cập nhật lại file index.js để sử dụng schema và resolver mới:
const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');
const schema = buildSchema(`
type Query {
book(id: ID!): Book
books: [Book]
author(id: ID!): Author
authors: [Author]
}
type Book {
id: ID
title: String
author: Author
}
type Author {
id: ID
name: String
books: [Book]
}
`);
const authors = [
{ id: '1', name: 'J.K. Rowling' },
{ id: '2', name: 'J.R.R. Tolkien' },
];
const books = [
{ id: '1', title: 'Harry Potter and the Chamber of Secrets', authorId: '1' },
{ id: '2', title: 'Harry Potter and the Prisoner of Azkaban', authorId: '1' },
{ id: '3', title: 'Harry Potter and the Goblet of Fire', authorId: '1' },
{ id: '4', title: 'The Fellowship of the Ring', authorId: '2' },
{ id: '5', title: 'The Two Towers', authorId: '2' },
{ id: '6', title: 'The Return of the King', authorId: '2' },
];
const root = {
book: ({ id }) => {
return books.find(book => book.id === id);
},
books: () => {
return books;
},
author: ({ id }) => {
return authors.find(author => author.id === id);
},
authors: () => {
return authors;
},
Book: {
author: (book) => {
return authors.find(author => author.id === book.authorId);
},
},
Author: {
books: (author) => {
return books.filter(book => book.authorId === author.id);
},
},
};
const app = express();
app.use('/graphql', graphqlHTTP({
schema: schema,
rootValue: root,
graphiql: true,
}));
app.listen(4000, () => {
console.log('GraphQL server running at http://localhost:4000/graphql');
});
5. Thực hiện các truy vấn phức tạp
5.1 Truy vấn dữ liệu sách và tác giả
Bây giờ, bạn có thể thực hiện các truy vấn phức tạp hơn từ GraphiQL. Ví dụ:
{
book(id: "1") {
title
author {
name
}
}
}
Sẽ trả về:
{
"data": {
"book": {
"title": "Harry Potter and the Chamber of Secrets",
"author": {
"name": "J.K. Rowling"
}
}
}
}
5.2 Truy vấn nhiều sách và tác giả
Truy vấn danh sách tất cả các sách cùng với thông tin về tác giả:
{
books {
title
author {
name
}
}
}
Sẽ trả về:
{
"data": {
"books": [
{
"title": "Harry Potter and the Chamber of Secrets",
"author": {
"name": "J.K. Rowling"
}
},
{
"title": "Harry Potter and the Prisoner of Azkaban",
"author": {
"name": "J.K. Rowling"
}
},
{
"title": "Harry Potter and the Goblet of Fire",
"author": {
"name": "J.K. Rowling"
}
},
{
"title": "The Fellowship of the Ring",
"author": {
"name": "J.R.R. Tolkien"
}
},
{
"title": "The Two Towers",
"author": {
"name": "J.R.R. Tolkien"
}
},
{
"title": "The Return of the King",
"author": {
"name": "J.R.R. Tolkien"
}
}
]
}
}
6. Kết luận
Trong bài viết này, chúng ta đã đi qua quá trình cài đặt và thiết lập môi trường để sử dụng GraphQL.js trong một dự án JavaScript. Chúng ta đã định nghĩa một schema đơn giản và phức tạp, viết các resolver tương ứng, và thực hiện các truy vấn phức tạp để lấy dữ liệu.
GraphQL và GraphQL.js mang lại những lợi ích lớn về tính linh hoạt và hiệu quả trong việc truy vấn và xử lý dữ liệu. Với các kiến thức cơ bản và nâng cao từ bài viết này, bạn có thể tiếp tục khám phá và triển khai các API mạnh mẽ hơn trong các dự án của mình.
Chúc bạn thành công!
Comments