GraphQL Fragments: Để mỗi Component tự quản lý dữ liệu của chính nó

Các truy vấn GraphQL ban đầu trông có vẻ rất gọn gàng. Chỉ một yêu cầu là lấy được toàn bộ dữ liệu. Nhưng rồi ứng dụng của bạn lớn dần lên.

Truy vấn trang của bạn bắt đầu thu thập các trường (fields) cho nhiều component con khác nhau. Bạn thêm một trường cho một component mới. Sáu tuần sau, bạn xóa component đó. Bạn quên xóa trường đó khỏi truy vấn chính. Giờ đây, không ai biết liệu việc xóa nó có an toàn hay không. Truy vấn cứ thế phình to mãi mãi.

Fragments giải quyết vấn đề này. Hầu hết các đội ngũ sử dụng chúng như một cách để sao chép và dán các trường. Đây là cách làm sai. Fragments nên là một mô hình cho quyền sở hữu component.

Một fragment là một nhóm các trường được đặt tên cho một kiểu (type) cụ thể.

Ví dụ:

fragment UserBadge on User {
  id
  name
  avatarUrl
}

Bạn sử dụng toán tử spread fragment này vào bất kỳ truy vấn nào cần một User.

Giá trị thực sự đến từ nơi bạn lưu trữ fragment. Đừng để chúng trong một file dùng chung. Hãy đặt fragment trong cùng một file với component sử dụng nó.

Điều này được gọi là co-location. Mỗi component tự khai báo nhu cầu dữ liệu của riêng mình.

Khi một component cần một trường mới, bạn thêm nó vào fragment của component đó. Truy vấn cha sẽ tự động cập nhật. Khi bạn xóa một component, bạn xóa luôn fragment của nó. Truy vấn sẽ thu gọn lại. Component cha không cần phải biết về các trường nội bộ của các component con.

Data masking giúp điều này trở nên tốt hơn nữa. Khi tính năng masking được bật, một component chỉ thấy các trường mà nó đã yêu cầu trong fragment của chính nó. Ngay cả khi máy chủ gửi thêm dữ liệu, component của bạn cũng không thể truy cập được.

Điều này tạo ra một hợp đồng (contract) chặt chẽ.

  • TypeScript biết chính xác mỗi component có những dữ liệu gì.
  • Nếu bạn xóa một trường khỏi fragment, TypeScript sẽ hiển thị mọi lỗi liên quan.
  • Việc refactor trở thành một bước kiểm tra kiểu (type-check) đơn giản thay vì phải tìm kiếm trong toàn bộ codebase.

Sử dụng fragments khi:

  • Nhiều component sử dụng cùng một kiểu như User hoặc Product.
  • Các truy vấn trang của bạn quá dài.
  • Bạn vô tình để lại các trường không còn sử dụng (dead fields) trong các truy vấn.
  • Bạn muốn có sự an toàn về kiểu (type safety) cho dữ liệu của mình với TypeScript.

Hãy bắt đầu từ những việc nhỏ. Tìm một component đang nhận dữ liệu từ một truy vấn cha. Chuyển các trường của nó vào một fragment. Đặt fragment đó vào file của component.

Fragments đảm bảo việc lấy dữ liệu khớp với UI của bạn khi ứng dụng phát triển.

Source: https://dev.to/grimicorn/graphql-fragments-let-each-component-own-its-data-5359