Trình tạo truy vấn GraphQL — Xây dựng query trực quan

Dán schema SDL, chọn một operation và tick các trường bạn cần, kể cả object lồng nhau và tham số. Query, variables và đoạn mã fetch sẽ được tạo tự động cho bạn.

Cập nhật
Schema (SDL)
Truy vấn
Variables
fetch()

Dữ liệu của bạn không bao giờ rời khỏi máy tính. Mọi xử lý diễn ra 100% cục bộ trong trình duyệt của bạn.

Công cụ này có hữu ích không?0.0 0 lượt đánh giá
Định dạng, thu gọn và kiểm tra cú pháp GraphQLCông cụ định dạng & kiểm tra GraphQL →

Cách dùng Trình tạo truy vấn GraphQL

  1. Mở Schema (SDL) và dán schema của bạn, hoặc dùng schema mẫu.
  2. Chọn Query, Mutation hoặc Subscription.
  3. Tick các trường trong cây; mở rộng object để chọn trường con và điền tham số.
  4. Sao chép query đã tạo, JSON variables hoặc lệnh fetch() có sẵn.

Trình tạo hoạt động như thế nào

Schema được phân tích bằng graphql-js và chuyển thành một cây bắt đầu từ root type của operation bạn chọn. Tick một trường sẽ thêm nó vào phần chọn; tick một trường kiểu object sẽ mở rộng để bạn chọn các trường con. Các tham số bạn điền sẽ trở thành variables với đúng kiểu GraphQL ($id: ID!), nhờ vậy query có thể tái sử dụng và an toàn trước injection, còn JSON variables được tạo ngay bên cạnh.

Mẹo sử dụng

  • Các trường kiểu interface hoặc union sẽ hiển thị các implementation dưới dạng inline fragment (... on Book).
  • Tham số bắt buộc được đánh dấu !; để trống tham số tùy chọn nếu bạn muốn bỏ qua.
  • Dùng ô lọc để tìm nhanh một trường trong schema lớn.

Định dạng hoặc kiểm tra một query có sẵn bằng công cụ format & kiểm tra GraphQL, và xem phản hồi JSON trong trình xem JSON.

Cũng được tìm dưới tên: trình tạo query graphql, graphql query builder, tạo truy vấn graphql, graphql query generator, công cụ graphql online, graphql explorer, graphql mutation builder, thay thế graphql playground.

Các công cụ dùng kèm tốt với Trình tạo truy vấn GraphQL

  • Chuyển cURL sang Code — Dán lệnh curl từ tài liệu API hoặc “Copy as cURL” trong DevTools của trình duyệt, rồi nhận ngay đoạn code chạy được cho sáu ngôn ngữ, giữ nguyên header, body và thông tin xác thực.
  • Kiểm tra OpenAPI / Swagger — Dán đặc tả API vào để kiểm tra theo schema OpenAPI chính thức, phát hiện tham chiếu hỏng và tham số path không nhất quán, đồng thời xem toàn bộ endpoint chỉ trong một cái nhìn.
  • JSON sang Types — Dán phản hồi API và nhận ngay model sẵn sàng sử dụng bằng 8 ngôn ngữ: TypeScript, Python (dataclass, TypedDict hoặc Pydantic), Go, Java, C#, Kotlin, Swift và Rust.
  • Kiểm tra JSON Schema — Dán schema và dữ liệu JSON để xem chính xác giá trị nào vi phạm quy tắc nào, hoặc tạo schema ban đầu từ dữ liệu mẫu.

Câu hỏi thường gặp

Làm sao để lấy schema SDL của tôi?
Nhiều server cung cấp tại /graphql/schema hoặc trong repository (schema.graphql). Bạn cũng có thể xuất bằng rover graph introspect hoặc npx get-graphql-schema https://api.example.com/graphql.
Công cụ có gửi query tới API của tôi không?
Không. Trình tạo chỉ sinh ra văn bản ngay trên trình duyệt của bạn. Hãy sao chép đoạn fetch để tự chạy.
Có hỗ trợ fragment không?
Các trường kiểu interface và union sẽ tạo inline fragment cho từng kiểu có thể xảy ra. Bạn có thể tự thêm named fragment và kiểm tra bằng công cụ format GraphQL.
Tôi có thể cài Trình tạo truy vấn GraphQL như một ứng dụng web và dùng khi không có mạng không?
Có. Trình tạo truy vấn GraphQL là một ứng dụng web (PWA) có thể cài đặt — cài trực tiếp từ trình duyệt, không cần tải từ cửa hàng ứng dụng. Trên Chrome hoặc Edge (Windows, macOS, Linux, ChromeOS) hoặc Android, bấm Cài đặt ứng dụng ở đầu trang này; trên iPhone và iPad, dùng Chia sẻ → Thêm vào Màn hình chính; trên Mac, dùng File → Add to Dock trong Safari 17 trở lên. Sau đó ứng dụng mở trong cửa sổ riêng với biểu tượng riêng, và vì chạy hoàn toàn trên trình duyệt nên vẫn hoạt động khi không có mạng. Firefox trên máy tính không thể cài ứng dụng web. Cách cài đặt hoạt động thế nào.

Công cụ liên quan