- vừa được xem lúc

GraphQL là gì? Bắt đầu với GraphQL

0 0 62

Người đăng: Ngô Tiến Phát

Theo Viblo Asia

Chào mọi người. Sau khi tìm hiểu về GraphQL, mình xin mạo muội chia sẻ chút kiến thức về nó cho mọi người cùng tiếp cận và cách sử dụng GraphQL như thế nào nhé.

I. Giới thiệu về GraphQL

1.1 Tổng quan

GraphQL là ngôn ngữ thao tác và truy vấn dữ liệu nguồn mở cho API, cung cấp cho client 1 cách thức dễ dàng để request chính xác những gì họ cần, giúp việc phát triển API dễ dàng hơn theo thời gian. GraphQL được Facebook phát triển nội bộ vào năm 2012 trước khi phát hành công khai vào năm 2015.

GraphQL bao gồm 3 điểm đặc trưng bao gồm:

  • Cho phép client xác định chính xác những dữ liệu gì họ cần
  • GraphQL làm cho việc tổng hợp dữ liệu từ nhiều nguồn dễ dàng hơn
  • Sử dụng một type system để khai báo dữ liệu.

GraphQL

1.2 Trả về chính xác những gì bạn gửi request

  • Khi bạn gửi 1 request GraphQL đến API của bạn, bạn sẽ nhận được chính xác những gì bạn yêu cầu trong request, không hơn không kém.
  • Các truy vấn GraphQL luôn trả về kết quả có thể dự đoán được.
  • Các ứng dụng sử dụng GraphQL rất nhanh và ổn định vì GraphQL kiểm soát dữ liệu mà nó nhận được chứ không phải máy chủ.

GraphQL Query

1.3 Nhận nhiều dữ liệu trong một request duy nhất

  • Các câu query GraphQL không chỉ có thể truy xuất các thuộc tính của một dữ liệu mà còn làm việc trơn tru với các đối tượng khác.
  • Trong khi các API REST chúng ta hay dùng phải yêu cầu request từ nhiều URL thì API GraphQL lại có thể lấy tất cả dữ liệu mà ứng dụng của bạn cần trong một request duy nhất.
  • Các ứng dụng sử dụng GraphQL có tốc độ xử lý rất nhanh ngay cả trên các kết nối chậm. Nhận nhiều dữ liệu trong 1 request duy nhất

1.4 Mô tả những gì có thể với một type system

  • API GraphQL được tổ chức theo types và fields, truy cập toàn bộ dữ liệu của bạn từ một endpoint duy nhất.
  • GraphQL sử dụng các types để đảm bảo ứng dụng của bạn chỉ request những gì có thể, ngoài ra GraphQL còn giải thích các lỗi 1 cách rất dễ hiểu.
  • Ứng dụng của bạn có thể sử dụng các types để tránh viết code phân tích cú pháp thủ công. Mô tả những gì có thể với một type system

OK, như vậy sau 1 hồi đọc lý thuyết thì cũng cần phải có chút thực hành để rõ hơn các bạn nhỉ?

II. Bắt đầu với GraphQL:

2.1 Chuẩn bị

Với GraphQL bạn có thể code bằng nhiều ngôn ngữ khác nhau, như: C# / .NET, Go, Java, PHP, Python, Ruby, Perl, ... Các bạn có thể tham khảo code demo tại đây: https://graphql.org/code/

Trong bài này mình dùng NodeJS 10.15.1 để demo.

2.2 Khởi tạo project

Cách đơn giản nhất để chạy máy chủ API GraphQL là sử dụng module express (một khung ứng dụng web phổ biến cho Node.js). Bạn sẽ cần cài đặt thêm 2 package express-graphql, graphql.

  • express: Chạy máy chủ web và thực hiện truy vấn trực tiếp với hàm graphql
  • express-graphql: Gắn máy chủ API GraphQL trên endpoint HTTP /graphql
  • graphql: Package để sử dụng API GraphQL

Chạy command line:

npm init
npm install express express-graphql graphql --save

Hoặc tạo file package.json với nội dung:

{ "name": "graph_ql", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "express": "^4.17.1", "express-graphql": "^0.11.0", "graphql": "^15.3.0" }
}

2.3 Tạo server

Tiếp đến tạo file server.js để chạy server:

//Import các thư viện cần dùng
var express = require('express');
var { graphqlHTTP } = require('express-graphql');
var { buildSchema } = require('graphql'); // Xây dựng một Schema, sử dụng ngôn ngữ Schema GraphQL
var schema = buildSchema(` type Query { hello: String }
`); // Root cung cấp chức năng phân giải cho mỗi endpoint API
var root = { hello: () => { return 'Hello world!'; },
}; //Tạo server với express
var app = express(); //Khai báo API graphql
app.use('/graphql', graphqlHTTP({ schema: schema, rootValue: root, graphiql: true, //sử dụng công cụ GraphiQL để đưa ra các query GraphQL theo cách thủ công
})); // Khởi tạo server tại port 4000
app.listen(4000);
console.log('Running a GraphQL API server at http://localhost:4000/graphql');

2.4 Start server

Sau khi đã tạo được file server, mình sẽ khởi chạy server node vừa tạo với command:

node server.js

Node server

2.5 Test

Nếu bạn truy cập trong trình duyệt web http://localhost:4000/graphql, bạn sẽ thấy một giao diện cho phép bạn nhập các truy vấn.

Trên browser: Demo GraphQL

Test trên Postman: Test GraphQL

GraphiQL là một công cụ tuyệt vời để debug và kiểm tra server, vì vậy mình khuyên bạn nên chạy nó bất cứ khi nào ứng dụng của bạn ở chế độ develop.

Như vậy, mình vừa test thử cho các bạn cách chạy máy chủ và sử dụng trên giao diện GraphiQL để đưa ra các truy vấn. Bước tiếp theo là tìm hiểu cách đưa ra các truy vấn GraphQL từ client.

GraphQL Clients

Thực hiện test curl trên command line:

curl -X POST \
-H "Content-Type: application/json" \
-d '{"query": "{ hello }"}' \
http://localhost:4000/graphql

Data response:

{"data":{"hello":"Hello world!"}}

GraphQL Client

III. Tổng kết

Ok, Như vậy dựa trên kiến thức của mình và các tài liệu tham khảo, mình đã giới thiệu tới các bạn về ngôn ngữ truy vấn GraphQL, có thể nói đây là 1 ngôn ngữ của tương lai ? theo mình với thời điểm hiện tại thì là như vậy!

Mong rằng sau bài viết này các bạn có thể tiếp cận được GraphQL 1 cách nhanh chóng và dễ dàng hơn...

Cảm ơn các bạn đã đọc bài viết của mình!

Thao khảo

  1. https://graphql.org/
  2. https://topdev.vn/blog/graphql/
  3. https://www.bravebits.co/bat-dau-voi-graphql-api/

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 500

- vừa được xem lúc

Cài đặt WSL / WSL2 trên Windows 10 để code như trên Ubuntu

Sau vài ba năm mình chuyển qua code trên Ubuntu thì thật không thể phủ nhận rằng mình đã yêu em nó. Cá nhân mình sử dụng Ubuntu để code web thì thật là tuyệt vời.

0 0 374

- vừa được xem lúc

Đặt tên commit message sao cho "tình nghĩa anh em chắc chắn bền lâu"????

. Lời mở đầu. .

1 1 701

- vừa được xem lúc

Tìm hiểu về Resource Controller trong Laravel

Giới thiệu. Trong laravel, việc sử dụng các route post, get, group để gọi đến 1 action của Controller đã là quá quen đối với các bạn sử dụng framework này.

0 0 335

- vừa được xem lúc

Phân quyền đơn giản với package Laravel permission

Như các bạn đã biết, phân quyền trong một ứng dụng là một phần không thể thiếu trong việc phát triển phần mềm, dù đó là ứng dụng web hay là mobile. Vậy nên, hôm nay mình sẽ giới thiệu một package có thể giúp các bạn phân quyền nhanh và đơn giản trong một website được viết bằng PHP với framework là L

0 0 421

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 414