# GraphQL

## GraphQL là gì ?

&#x20;**GraphQL** là một cú pháp mô tả cách yêu cầu lấy dữ liệu, và thường được dùng để load data từ một server cho client. 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 gì dữ liệu họ cần, làm cho việc tổng hợp dữ liệu từ nhiều nguồn dễ dàng hơn và nó sử dụng một **type system** để mô tả dữ liệu.

![](https://1185482582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M9iStFHsqcx7bX2Ba8R%2F-MA0_ZlgCXouI7s5jfFM%2F-MA0a3huq1kaC7V7aa7M%2Fimage.png?alt=media\&token=9e74b48b-8b3e-4725-aef1-b695924745a9)

## Tại sao cần GraphQL ?!

GraphQL bắt đầu từ ông lớn Facebook, thế nhưng ngay cả những app đơn giản đôi khi vẫn gặp phải trường hợp “nghẽn cổ chai” do sự hạn chế của REST APIs.

Thí dụ bạn muốn hiển thị một list `posts`, và ở dưới mỗi `post` là một list `like`, bao gồm cả tên người dùng và avatar. Cách giải quyết đơn giản là thay đổi API của ‘posts’ để nó bao gồm a ‘like’ array chứa thông tin về người dùng.

Thế nhưng khi làm như vậy cho các app mobile thì bạn sẽ phát hiện ra tốc độ của chúng chạy quá chậm. Vì thế mà giờ đây bạn sẽ cần tới 2 endpoints, một với `likes`và một thiếu chúng.

Giờ thì còn có thêm một vấn đề khác xuất hiện: trong khi `posts`được lưu trữ trong một MySQL database thì `likes` lại được lưu tại Redis store! Bạn biết mình phải làm gì trong trường hợp này không ?

Mở rộng vấn đề trên ra với việc Facebook phải quản lí vô số data source và API clients thì cũng là điều dễ hiểu khi REST APIs bị đánh giá là cũ kĩ bởi những hạn chế của nó.

## Data fetching with REST vs GraphQL

Với REST API, bạn thường thu thập dữ liệu bằng cách truy cập những endpoint

Xét ví dụ sau

![With REST, you have to make three requests to different endpoints to fetch the required data. You’re also overfetching since the endpoints return additional information that’s not needed.](https://1185482582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M9iStFHsqcx7bX2Ba8R%2F-MA0eydvC76iA8zog_rB%2F-MA0jZP0-mA6YoiyXZHO%2Fimage.png?alt=media\&token=d0d5cd7e-9d7f-42de-8acc-9f03facccfae)

Để muốn lấy thông tin người dùng **Mary** đã post bài **Learn GraphQL today** có bao nhiêu người follow thì cần call các API&#x20;

```
/users/<id>
/users/<id>/posts
/users/<id>/fllowers
```

Nhưng trong GraphQL đơn giản bạn chỉ cần gửi một query tới **GraphQL server** với những yêu cầu của bạn và **GraphQL server** sẽ trả về đầy đủ thông tin mà bạn cần

Ví dụ

![Using GraphQL, the client can specify exactly the data it needs in a query. Notice that the structure of the server’s response follows precisely the nested structure defined in the query.](https://1185482582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M9iStFHsqcx7bX2Ba8R%2F-MA0eydvC76iA8zog_rB%2F-MA0k_hBp0jIX8qerfuA%2Fimage.png?alt=media\&token=bd939184-0f54-475b-82fe-17b14984d664)

## Giải pháp

Giải pháp mà Facebook đưa ra đến từ một ý tưởng rất đơn giản: Thay vì có đến hàng tá “endpoint” ngu ngốc, sao lại không dùng chỉ một “endpoint” thông minh với khả năng tiếp thu những Query phức tạp rồi đưa ra output data với loại type tùy theo yêu cầu của client.

Thế tế mà nói, GraphQL như là một layer nằm giữa client và data source, sau khi nhận yêu cầu của client thì nó sẽ kiếm những thông tin cần từ các data source và đưa lại cho client theo format họ muốn. Vẫn chưa hiểu? Thế thì đến lúc dùng ví dụ ẩn dụ rồi đây!

Như bạn thấy đấy, REST model cũ giống y như việc bạn đặt cái bánh Pizza, rồi gọi ship hàng online và kêu bên tiệm giặt ủi đem đồ đến cho bạn. Tất cả diễn ra với 3 cuộc gọi và 3 cửa hàng.\\

![](https://1185482582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M9iStFHsqcx7bX2Ba8R%2F-MA0_ZlgCXouI7s5jfFM%2F-MA0aWz-TltjYyu5C6Ts%2Fimage.png?alt=media\&token=4604e779-9b32-4e62-b1e3-88bc106d6f56)

GraphQL mặt khác lại giống như là thư kí riêng của bạn vậy: Sau khi bạn đưa địa chỉ của 3 cửa hàng và nói yêu cầu của bạn thì GraphQL sẽ làm hết mọi chuyện còn lại trong khi bạn chỉ việc chờ chúng được chuyển đến cho mình.

![](https://1185482582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M9iStFHsqcx7bX2Ba8R%2F-MA0_ZlgCXouI7s5jfFM%2F-MA0adxHMyLPa1kwKVyV%2Fimage.png?alt=media\&token=62f27694-5393-41d0-9859-3b8dc41045af)
