Sử dụng component thay vì đồ thị

Gato GraphQL không dùng đồ thị để biểu diễn mô hình dữ liệu. Thay vào đó, nó sử dụng các component.

Đây không phải là một cách tiếp cận bất ngờ. Dưới tiêu đề Thinking in Graphs, dự án GraphQL phát biểu (phần nhấn mạnh được thêm vào):

Đồ thị là những công cụ mạnh mẽ để mô hình hóa nhiều hiện tượng trong thế giới thực, vì chúng giống với các mô hình tư duy tự nhiên và mô tả bằng lời của chúng ta về quá trình cơ bản. Với GraphQL, bạn mô hình hóa lĩnh vực kinh doanh của mình như một đồ thị bằng cách định nghĩa schema; trong schema của bạn, bạn định nghĩa các loại node khác nhau và cách chúng kết nối/liên hệ với nhau. Về phía client, điều này tạo ra một pattern tương tự như Lập trình Hướng Đối Tượng: các kiểu tham chiếu đến các kiểu khác. Về phía server, vì GraphQL chỉ định nghĩa interface, bạn có quyền tự do sử dụng nó với bất kỳ backend nào (mới hoặc kế thừa!).

Điều rút ra từ định nghĩa này là:

Mặc dù phản hồi có hình dạng của một đồ thị, điều này không có nghĩa là dữ liệu thực sự được biểu diễn dưới dạng đồ thị khi xử lý ở phía server. Đồ thị chỉ là một mô hình tư duy, không phải là một triển khai thực tế.

Đây là tin tốt, vì làm việc với đồ thị (hoặc cây) không hề đơn giản. Các component, ngược lại, dễ triển khai hơn nhiều và cung cấp tất cả các lợi ích tương tự.

Đơn giản hóa mô hình dữ liệu thông qua các component

Sử dụng các component để biểu diễn cấu trúc dữ liệu ở phía server là tối ưu về mặt đơn giản, vì nó cho phép hợp nhất các mô hình khác nhau cho dữ liệu của chúng ta vào một cấu trúc duy nhất. Thay vì có luồng như thế này:

xây dựng query để cung cấp cho component (client) => xử lý dữ liệu dưới dạng đồ thị/cây (server) => cung cấp dữ liệu cho component (client)

...luồng của chúng ta sẽ như thế này:

component (client) => component (server) => component (client)

Điều này khả thi vì yêu cầu GraphQL có thể được coi là có cấu trúc dữ liệu "phân cấp component", trong đó mỗi kiểu đối tượng đại diện cho một component, và mỗi trường quan hệ từ kiểu đối tượng này sang kiểu đối tượng khác đại diện cho một component bao bọc component khác.

Hãy dùng một ví dụ để trực quan hóa mối quan hệ này từ component sang GraphQL query. Giả sử chúng ta muốn xây dựng widget "Đạo diễn nổi bật" sau đây:

Sử dụng Vue hoặc React (hoặc bất kỳ thư viện dựa trên component nào khác), trước tiên chúng ta sẽ xác định các component. Trong trường hợp này, chúng ta sẽ có một component bên ngoài <FeaturedDirector> (màu đỏ), bao bọc một component <Film> (màu xanh lam), bản thân nó bao bọc một component <Actor> (màu xanh lá):

Pseudo-code sẽ trông như thế này:

<!-- Component: <FeaturedDirector> -->
<div>
  Country: {country}
  {foreach films as film}
    <Film film={film} />
  {/foreach}
</div>
 
<!-- Component: <Film> -->
<div>
  Title: {title}
  Pic: {thumbnail}
  {foreach actors as actor}
    <Actor actor={actor} />
  {/foreach}
</div>
 
<!-- Component: <Actor> -->
<div>
  Name: {name}
  Photo: {avatar}
</div>

Sau đó chúng ta xác định dữ liệu cần thiết cho mỗi component. Với <FeaturedDirector> chúng ta cần name, avatar và country. Với <Film> chúng ta cần thumbnail và title. Và với <Actor> chúng ta cần name và avatar:

Và chúng ta xây dựng GraphQL query để lấy dữ liệu cần thiết:

query {
  featuredDirector {
    name
    country
    avatar
    films {
      title
      thumbnail
      actors {
        name
        avatar
      }
    }
  }
}

Có thể thấy rõ, có một mối quan hệ trực tiếp giữa phân cấp component ở trên và GraphQL query này.

​Đơn giản hóa mô hình dữ liệu thông qua các component

Đơn giản hóa mô hình dữ liệu thông qua các component