, December 05, 2021

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

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
Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 4

Trong phần 4 của series này, chúng ta sẽ tiếp tục hoàn thiện phần Guest Home Page . Lần này, chúng ta sẽ bắt tay vào code phần FAQs component, thực hiện config router để redirects qua lại các page nhé. Cùng bắt đầu thôi 😉....

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

Tiếp tục công việc đang dang dở ở phần 2, trong phần 3 này chúng ta sẽ làm phần Footer ở Guest Home Page này, kèm theo đó chúng ta sẽ apply các tool như ESLint và Prettier vào project của chúng ta nhé....

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

Sau phần 1 của series này, chắc hẵn các bạn đã nóng lòng muốn bắt tay ngay vào code rồi đúng không 😁. Okie, trong phần thứ 2 của series này, chúng ta sẽ cùng nhau tạo phần Story của trang Home dành cho khách trên trang Netflix nhé (Trang lúc ta vào mà chưa login ấy 😁). Nào! bắt đâu thôi!...

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

Hello các bạn, hôm nay mình sẽ mang đến cho các bạn một series mới về chuyên mục ReactJS đó là series "Netflix Clone with ReactJS, Styled Components and Firebase (Firestore & Auth)". Trong phần đầu tiên của series này, chúng ta sẽ setup project của chúng ta trước nhé. Nào bắt đầu thôi 😉....

Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 1
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.