, August 13, 2022

0 kết quả được tìm thấy

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

  • Đăng bởi  Groot
  •  Nov 26, 2021

  •   3 min reads
Tại sao bạn nên chọn GraphQL với ReactJS

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ụ:

{
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 liên quan

ReactJS Tutorial for Beginners Phần 2

Trong bài viết này chúng ta sẽ đi qua năm nội dung đầu tiên của tutorial...

ReactJS Tutorial for Beginners Phần 2
ReactJS vs React Native - Gà cùng một mẹ liệu có giống nhau?

Bạn có đang rối giữa ReactJS vs React Native? Nên chọn cái nào thì tốt hơn? Có thể tái sử dụng code của ReactJS cho React Native hay không? Hãy khám phá câu trả lời thông qua bài viết so sánh ReactJS vs React Native này bạn nhé!...

ReactJS vs React Native - Gà cùng một mẹ liệu có giống nhau?
Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 7

Nối tiếp phần 6 của series, trong phần này, chúng ta sẽ bắt tay vào code Sign Up page,config lại phần router để đáp ứng được vấn đề Authentication kèm theo tạo custom hook để listening for Authentication. Không dài dòng nữa, Chúng ta bắt đầu thôi 😁....

Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 7
Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 6

Trong phần này, chúng ta sẽ config React Context firebase cho project của chúng ta, sau đó tạo Sign In Page và apply Authentication màfirebase cung cấp cho project của chúng ta nhé. Bắt đầu thôi 😉!...

Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 6
Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 5

Trong phần 5 này, chúng ta sẽ hoàn thiện Guest Home Page và config để connect với firebase, chuẩn bị cho các phần tiếp theo nhé 😉....

Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 5
You've successfully subscribed to 200Lab Blog
Great! Next, complete checkout for full access to 200Lab Blog
Xin chào mừng bạn đã quay trở lại
OK! Tài khoản của bạn đã kích hoạt thành công.
Success! Your billing info is updated.
Billing info update failed.
Your link has expired.