Trang chủ Kiến Thức Công Nghệ Tại sao bạn nên chọn GraphQL với ReactJS
Công Nghệ

Tại sao bạn nên chọn GraphQL với ReactJS

Chia sẻ
Tại sao bạn nên chọn GraphQL với ReactJS
Chia sẻ

GraphQL là một ngôn ngữ truy vấn mã nguồn mở cho Web APIs được tạo ra bởi facebook vào năm 2012. Nó không phải là một architectural pattern hay một web service. Nó đóng vai trò trung gian giúp truy vấn dữ liệu nhận được từ các nguồn dữ liệu khác nhau. Các nguồn dữ liệu này có thể là databases hoặc web services.

Ngày nay, React được sử dụng trong các dự án khác nhau để tạo giao diện người dùng thân thiện. Hầu hết mọi người đang sử dụng Rest Api để truy xuất và thao tác dữ liệu.

GraphQL cho phép bạn viết các truy vấn bằng cách sử dụng cấu trúc đối tượng chứ không phải là một chuỗi văn bản.

Vì vậy, thay vì sử dụng một truy vấn SQL như:

SELECT name, id, description FROM projects

Bạn chỉ cần mô tả đối tượng và các trường bạn muốn từ đối tượng đó. Ví dụ:

GraphQL

{
projects {
id
name
description
}
}

GraphQL tập trung vào cấu trúc truy vấn dễ dàng và tất cả các yêu cầu đều được gửi đến một điểm endpoint duy nhất /graphql.

Tại sao điều này lại quan trọng? Việc truyền thực tế các yêu cầu và dữ liệu được trừu tượng hóa đi. Chúng ta không còn phải lo lắng về những thứ như response codes hay lên cấu trúc cho các url như: /project/item/somethingElse/youGetThePoint.

Vậy tại sao chúng ta nên sử dụng GraphQL?

Không giống như REST, GraphQL dễ hơn, linh động hơn, mọi cuộc gọi chỉ trả về dữ liệu được chỉ định trong yêu cầu.

Điều này có một vài lợi ích. Thứ nhất, nó giải quyết hoàn toàn vấn đề over-fetching của reactjs bằng cách để client xử lý hoàn toàn. Thứ hai, nó loại bỏ việc quá nhiều request bằng cách cho phép client yêu cầu tất cả mọi thứ họ cần cùng một lúc.

Giờ đây, chúng ta có thể đánh dấu một trường là không được dùng nữa, điều này cho phép các integrators mới biết rằng không nên sử dụng nó, sau đó lấy danh sách tất cả các integration hiện có và liên hệ để đưa ra đường dẫn nâng cấp.

Tất cả các giải pháp được thảo luận ở trên đều tương tự các giải pháp có trong công cụ rest API. Và nó cũng có một cộng đồng tương đối tích cực hỗ trợ. Nhưng GraphQL dường như vượt lên trên và vượt xa hai giải pháp còn lại. Xuất phát từ Facebook, GraphQL hầu hết đã được chấp nhận trong cộng đồng react, một cộng đồng rất lớn và rất tích cực. Điều này có nghĩa là có vô số công cụ tuyệt vời có sẵn để làm cho trải nghiệm của các developer trở nên tốt nhất có thể.

Sức mạnh thực sự của GraphQL là có thể triển khai các design patterns nhất định trên các dịch vụ web mới hoặc web hiện có.

Về mặt kỹ thuật, đúng là bất kỳ patterns nào trong số này đều có thể được thực hiện bằng một công cụ khác. Nhưng việc sử dụng GraphQL sẽ có ý nghĩa nhất bởi vì yêu cầu/thao tác dữ liệu (query) hoàn toàn được tách biệt khỏi việc thực thi các hành động đó (resolvers).

Ví dụ: Chúng ta có một giao diện người dùng được sử dụng để hiển thị các dự đoán và tiên đoán bằng cách sử dụng biểu đồ. Vì vậy, cần phải tạo một số lượng lớn Rest Api để hiển thị dữ liệu trên giao diện người dùng đó. Đối với các developer Java, phải mất một khoảng thời gian nhất định để tạo các Api đó với các endpoint khác nhau. Giờ đây với GraphQL, việc làm này trở nên dễ dàng vì bây giờ chỉ có một endpoint duy nhất mà chúng ta có thể tìm nạp dữ liệu và cập nhật trên giao diện người dùng.

Bài viết cùng chuyên mục
Tối ưu ứng dụng với cấu trúc dữ liệu cơ bản và bitwise
Công Nghệ

Tối ưu ứng dụng với cấu trúc dữ liệu cơ bản và bitwise

Trong bài viết này, 200Lab sẽ chia sẻ những trường hợp dễ...

Công Nghệ

So sánh Flutter vs React Native: Framework nào đáng học năm 2021

Điểm chung của Flutter, React Native đều là Cross-platform Mobile, build native...

HTTP/2 là gì? So sánh HTTP/2 và HTTP/1
Công Nghệ

HTTP/2 là gì? So sánh HTTP/2 và HTTP/1

Từ khi Internet ra đời, sự phát triển về các giao thức...

Upload File từ Frontend đến Backend mà rất nhiều bạn vẫn đang làm sai!!
Công Nghệ

Upload File từ Frontend đến Backend mà rất nhiều bạn vẫn đang làm sai!!

1. Client encode file (base64) rồi gởi về backend 200Lab đã từng...

Công Nghệ

React Native – Hướng dẫn làm việc với Polyline và Animated-Polyline trên Map

Vẽ đường đi trên bản đồ là một nghiệp vụ vô cùng...

Công Nghệ

Hybrid App và Native App: Những khác biệt to lớn

Bất cứ khi nào một công ty quyết định làm ứng dụng...

Web/System Architecture 101 – Kiến trúc web/hệ thống cơ bản cho người mới
Công Nghệ

Web/System Architecture 101 – Kiến trúc web/hệ thống cơ bản cho người mới

Đây là một kiến trúc cơ bản mà bất kì một người...

Công Nghệ

Tư duy kiến trúc thông qua các trò chơi mà rất nhiều bạn không biết

Tư duy kiến trúc là gì? Tư duy kiến trúc có thể...