API GraphQL: Truy vấn và đột biến

Mặc dù REST rất lý tưởng cho việc tích hợp tiêu chuẩn, nhưng các kiến ​​trúc Headless hiện đại (như Next.js, Nuxt.js hoặc Gatsby) thường được hưởng lợi từ độ chính xác của GraphQL.

PolyCMS cung cấp điểm cuối GraphQL mạnh mẽ, được hỗ trợ bởi Nuwave/Lighthouse, cho phép giao diện người dùng của bạn yêu cầu chính xác dữ liệu mà nó cần—không hơn, không kém.

Điểm cuối GraphQL được đặt tại: http://localhost:8000/graphql

Xác thực

Xác thực cho API GraphQL hoạt động giống hệt như API REST. Bạn phải chuyển mã thông báo Sanctum Bearer Laravel trong tiêu đề Ủy quyền.

Authorization: Bearer YOUR_TOKEN_HERE

Sân chơi GraphQL

Để khám phá lược đồ và kiểm tra các truy vấn một cách tương tác, PolyCMS bao gồm sân chơi GraphQL.

Trong môi trường phát triển cục bộ của bạn, hãy điều hướng đến http://localhost:8000/graphql để xem lược đồ tự ghi tài liệu và viết truy vấn kiểm tra. (Lưu ý: Điểm cuối này bị vô hiệu hóa trong môi trường sản xuất để bảo mật).

Viết truy vấn

Truy vấn được sử dụng để đọc dữ liệu từ hệ thống.

Ví dụ: Tìm nạp danh sách bài viết được phân trang

Truy vấn này tìm nạp 10 bài đăng được xuất bản đầu tiên, bao gồm tiêu đề, phần mở rộng và tên của các danh mục mà chúng thuộc về. Lưu ý cách chúng tôi tránh tìm nạp quá mức bằng cách chỉ yêu cầu cụ thể các trường chúng tôi cần.

query {
  posts(first: 10, status: "publish") {
    data {
      id
      title
      slug
      categories {
        name
      }
    }
    paginatorInfo {
      currentPage
      lastPage
      total
    }
  }
}

Ví dụ: Tìm nạp một sản phẩm bằng Slug

query {
  product(slug: "iphone-15-pro") {
    id
    name
    price
    description_html
    stock_status
  }
}

Viết đột biến

Đột biến được sử dụng để tạo, cập nhật hoặc xóa dữ liệu.

Ví dụ: Tạo nội dung bình chọn (Reaction)

PolyCMS có hệ thống bỏ phiếu nội dung chung. Đây là cách một ứng dụng giao diện người dùng có thể gửi phiếu bầu "hữu ích" thông qua GraphQL:

mutation {
  createContentVote(
    votable_type: "App\\Models\\Post",
    votable_id: 42,
    type: "helpful",
    ip_address: "192.168.1.1"
  ) {
    id
    type
    created_at
  }
}

Tích hợp với Frontend

Nếu bạn đang xây dựng Headless SPA, chúng tôi khuyên bạn nên sử dụng ứng dụng khách GraphQL như Apollo Client (dành cho React/Vue) hoặc URQL để xử lý bộ nhớ đệm, quản lý trạng thái và yêu cầu phân nhóm khi giao tiếp với điểm cuối PolyCMS GraphQL.