Loading…

Giới thiệu Công cụ Định dạng GraphQL Trực tuyến

Giữ cho SDL và các thao tác GraphQL của bạn dễ đọc và nhất quán. Công cụ định dạng GraphQL trực tuyến này sử dụng trình phân tích cú pháp GraphQL của Prettier để định dạng lại thụt lề, ngắt dòng và chuẩn hóa tài liệu của bạn. Nó chạy trên trình duyệt khi có thể và chuyển sang công cụ định dạng máy chủ khi cần thiết, giúp bạn nhận được kết quả đáng tin cậy mà không cần quan tâm đến công cụ.

Công cụ Định dạng GraphQL Này Làm Gì

  • Sử dụng trình phân tích cú pháp GraphQL của Prettier để áp dụng định dạng đồng nhất, theo tiêu chuẩn cộng đồng
  • Hỗ trợ truy vấn, biến đổi, đăng ký, đoạn mã và SDL lược đồ đầy đủ (kiểu, giao diện, liên kết, liệt kê, đầu vào, chỉ thị)
  • Thụt lề có thể điều chỉnh: chọn khoảng trắng hoặc tab và cấu hình kích thước thụt lề (1–8)
  • Kiểm soát độ dài dòng / ngắt dòng tùy chọn thông qua chiều rộng cột có thể cấu hình
  • Giữ nguyên mô tả (`"""…"""`) và chú thích nội dòng trong khi chuẩn hóa bố cục của chúng
  • Xác thực cấu trúc tài liệu GraphQL của bạn như một phần của định dạng; cú pháp không hợp lệ sẽ hiển thị lỗi thay vì làm hỏng mã một cách im lặng
  • Thực thi kết hợp: chạy Prettier trên trình duyệt khi có sẵn và chuyển sang công cụ định dạng máy chủ nếu cần
  • Dán hoặc tải lên tệp `.graphql` / `.gql`, sau đó xem trước, sao chép hoặc tải xuống kết quả đã được định dạng

📝 Cách Định dạng GraphQL Trực tuyến for graphql-formatter

1

Dán hoặc Tải lên GraphQL của Bạn

Dán lược đồ hoặc truy vấn GraphQL của bạn vào trình soạn thảo, hoặc thả tệp `.graphql` / `.gql`. Công cụ định dạng hoạt động cho cả tài liệu SDL và thao tác.

2

Điều chỉnh Tùy chọn Định dạng

Chọn khoảng trắng hoặc tab, đặt kích thước thụt lề và cấu hình độ dài dòng ưa thích. Các tùy chọn này được chuyển đến bộ định dạng GraphQL của Prettier.

3

Định dạng, Xem lại & Xuất

Nhấp Định dạng để áp dụng thay đổi. Xem lại kết quả trong khung xem trước, sau đó sao chép lại vào trình soạn thảo hoặc tải xuống tệp đã định dạng.

Thông số Kỹ thuật

Đầu vào Hỗ trợ

Được thiết kế cho lược đồ và tài liệu thao tác GraphQL tiêu chuẩn.

LoạiVí dụGhi chú
Lược đồ SDLschema.graphql, schema.gqlKiểu, giao diện, liên kết, enum, đầu vào, chỉ thị, định nghĩa lược đồ
Thao tácqueries.graphql, app.gqlTruy vấn, biến đổi, đăng ký và đoạn mã
Mở rộngmở rộng lược đồ trong tệp riêng biệtví dụ: khối `extend type Query { … }`

Công cụ Định dạng

Định dạng được thực hiện bằng cách sử dụng hỗ trợ GraphQL của Prettier. Trong hầu hết trường hợp, Prettier chạy trong trình duyệt qua một thời gian chạy nhẹ. Nếu plugin GraphQL không thể giải quyết trong môi trường hiện tại, bộ định dạng sẽ chuyển sang một worker Prettier phía máy chủ một cách minh bạch.

Tùy chọn Có sẵn (Ánh xạ đến Prettier)

Tùy chọnHành viGiá trị Thông thường
Kiểu Thụt lềChọn giữa khoảng trắng và tabkhoảng trắng (mặc định) hoặc tab
Kích thước Thụt lềSố khoảng trắng mỗi cấp thụt lề (khi sử dụng khoảng trắng)1–8, mặc định: 2
Độ dài DòngCột mục tiêu để gói / ngắt các lựa chọn dài0–120 (0 ≈ không gói hiệu quả)

Giới hạn & Hiệu suất

Công cụ được điều chỉnh cho các lược đồ GraphQL và tệp hoạt động điển hình. Các yêu cầu khoảng vài trăm KB đến ~2 MB thường an toàn; các tài liệu cực lớn có thể gặp phải thời gian chờ hoặc bị chặn kích thước.

Quyền Riêng Tư & An Toàn

Các tài liệu GraphQL được định dạng trong trình duyệt của bạn hoặc trên backend định dạng của encode64. Chúng không được thực thi hoặc gửi đến các dịch vụ bên thứ ba. Đối với các lược đồ nhạy cảm, bạn có thể sao chép cấu hình tương tự cục bộ với Prettier.

Tương Đương Dòng Lệnh (Prettier)

Nếu bạn đã cài đặt Node.js và Prettier, bạn có thể tái tạo hành vi này cục bộ.

Node.js (mọi nền tảng)

Định dạng tệp lược đồ GraphQL tại chỗ

npx prettier --write schema.graphql

Prettier tự động phát hiện GraphQL dựa trên phần mở rộng tệp.

Định dạng với thụt lề và độ dài dòng tùy chỉnh

npx prettier --write schema.graphql --tab-width 2 --use-tabs false --print-width 80

Phản ánh các tùy chọn thụt lề và ngắt dòng được hiển thị trong công cụ trực tuyến.

Định dạng từ stdin (ví dụ: được truyền từ công cụ khác)

cat input.graphql | npx prettier --stdin-filepath input.graphql

Hữu ích trong tập lệnh shell, đường ống CI hoặc hook Git.

Các Trường Hợp Sử Dụng Phổ Biến Của Bộ Định Dạng GraphQL

Phát Triển Lược Đồ API

  • Giữ các tệp lược đồ lớn được định dạng nhất quán để dễ dàng điều hướng
  • Giảm sự khác biệt về khoảng trắng gây nhiễu trong các PR lược đồ
  • Chuẩn bị SDL sạch sẽ cho các công cụ tạo mã
# Trước
type User{ id:ID! name:String!}

# Sau
type User {
  id: ID!
  name: String!
}

Hoạt Động & Đoạn Mã Frontend

  • Chuẩn hóa các truy vấn chia sẻ trên nhiều ứng dụng hoặc gói
  • Làm cho các lựa chọn lồng nhau dễ quét hơn trong quá trình gỡ lỗi
  • Giữ các đoạn mã tài liệu và ví dụ trong playground được định dạng đẹp

Kiểm Thử, Dữ Liệu Mẫu & Công Cụ

  • Chuẩn hóa các dữ liệu mẫu GraphQL được sử dụng trong kiểm thử snapshot
  • Tích hợp định dạng vào hook pre-commit hoặc công việc CI
  • Cung cấp tài liệu sạch cho các công cụ xác thực hoặc so sánh lược đồ

❓ Frequently Asked Questions

Bộ định dạng GraphQL thực sự thay đổi những gì?

Nó cấu trúc lại các tài liệu GraphQL của bạn theo quy tắc GraphQL của Prettier: thụt lề, ngắt dòng, khoảng cách xung quanh dấu câu và bố cục của các lựa chọn và trường. Nó không đổi tên trường, thêm đối số hoặc thay đổi ngữ nghĩa lược đồ.

Nó có hỗ trợ cả hoạt động và SDL lược đồ không?

Có. Bộ định dạng hoạt động cho các hoạt động GraphQL tiêu chuẩn (truy vấn, biến đổi, đăng ký, đoạn mã) và ngôn ngữ định nghĩa lược đồ (kiểu, giao diện, enum, liên kết, đầu vào, chỉ thị, định nghĩa lược đồ và phần mở rộng).

Các chuỗi mô tả và bình luận có được giữ lại không?

Có. Các chuỗi mô tả ba dấu ngoặc kép (`"""…"""`) và bình luận nội tuyến `#` được giữ lại. Bộ định dạng có thể điều chỉnh lại chúng hoặc thay đổi khoảng trắng xung quanh nhưng không cố tình xóa chúng.

Mã GraphQL của tôi có được thực thi không?

Không. Công cụ phân tích cú pháp GraphQL của bạn dưới dạng văn bản để định dạng lại, nhưng nó không thực thi truy vấn hay kết nối với bất kỳ máy chủ GraphQL nào.

Việc định dạng chạy ở đâu: máy khách hay máy chủ?

Bộ định dạng ưu tiên chạy Prettier trực tiếp trong trình duyệt của bạn để đáp ứng nhanh. Nếu plugin GraphQL cần thiết không thể tải ở đó, nó sẽ chuyển sang một worker Prettier trên máy chủ với các tùy chọn tương tự.

Có miễn phí để sử dụng không?

Có. Công cụ miễn phí với các biện pháp bảo vệ sử dụng hợp lý để duy trì hiệu suất ổn định. Đối với khối lượng công việc nặng hoặc riêng tư, hãy sao chép cấu hình tương tự với Prettier trong môi trường của riêng bạn.

Pro Tips

Best Practice

Sử dụng bộ định dạng này để chuẩn hóa các lược đồ cũ trước khi thêm linting hoặc các thay đổi phá vỡ; nó làm cho các khác biệt tiếp theo dễ xem xét hơn nhiều.

Best Practice

Căn chỉnh cài đặt công cụ trực tuyến (kích thước thụt lề và độ dài dòng) với cấu hình Prettier của dự án để giữ cho định dạng cục bộ và web giống nhau.

Best Practice

Trích xuất các chuỗi GraphQL nhúng dài từ mã vào tệp `.graphql` để chúng có thể được định dạng đồng nhất và tái sử dụng.

Best Practice

Kết hợp định dạng với linting (ví dụ: GraphQL ESLint) để phát hiện các vấn đề về lược đồ và truy vấn vượt ra ngoài khoảng trắng và ngắt dòng.

Additional Resources

Đặc tả GraphQL
Documentation
Prettier – Định dạng GraphQL
Documentation
Tài liệu chính thức GraphQL – Học
Documentation
GraphQL ESLint (Quy tắc Lint)
Documentation

Other Tools