Loading…

Tentang Formatter GraphQL Online

Jaga SDL dan operasi GraphQL Anda tetap terbaca dan konsisten. Formatter GraphQL online ini menggunakan parser GraphQL Prettier untuk mengatur ulang indentasi, membungkus, dan menormalkan dokumen Anda. Berjalan di browser jika memungkinkan dan beralih ke formatter server jika diperlukan, sehingga Anda mendapatkan output yang andal tanpa memikirkan alat.

Apa yang Dilakukan Formatter GraphQL Ini

  • Menggunakan parser GraphQL Prettier untuk menerapkan pemformatan yang konsisten dan standar komunitas
  • Mendukung kueri, mutasi, langganan, fragmen, dan SDL skema lengkap (tipe, antarmuka, union, enum, input, direktif)
  • Indentasi yang dapat disesuaikan: pilih spasi atau tab dan atur ukuran indentasi (1–8)
  • Kontrol panjang baris / pembungkusan opsional melalui lebar kolom yang dapat dikonfigurasi
  • Menjaga deskripsi (`"""…"""`) dan komentar sebaris tetap utuh sambil menormalkan tata letaknya
  • Memvalidasi struktur dokumen GraphQL Anda sebagai bagian dari pemformatan; sintaks yang tidak valid akan menampilkan kesalahan alih-alih merusak kode secara diam-diam
  • Eksekusi hibrida: menjalankan Prettier di browser jika tersedia dan beralih ke formatter server jika diperlukan
  • Tempel atau unggah file `.graphql` / `.gql`, lalu pratinjau, salin, atau unduh hasil yang telah diformat

📝 Cara Memformat GraphQL Online for graphql-formatter

1

Tempel atau Unggah GraphQL Anda

Tempel skema atau kueri GraphQL Anda ke editor, atau jatuhkan file `.graphql` / `.gql`. Pemformat bekerja untuk dokumen SDL dan operasi.

2

Sesuaikan Opsi Pemformatan

Pilih spasi atau tab, atur ukuran indentasi, dan konfigurasikan panjang baris yang Anda sukai. Opsi ini diteruskan ke pemformat GraphQL Prettier.

3

Format, Tinjau & Ekspor

Klik Format untuk menerapkan perubahan. Tinjau hasilnya di panel pratinjau, lalu salin kembali ke editor Anda atau unduh file yang telah diformat.

Spesifikasi Teknis

Input yang Didukung

Dirancang untuk skema dan dokumen operasi GraphQL standar.

JenisContohCatatan
Skema SDLschema.graphql, schema.gqlTipe, antarmuka, union, enum, input, direktif, definisi skema
Operasiqueries.graphql, app.gqlKueri, mutasi, langganan, dan fragmen
Ekstensiekstensi skema dalam file terpisahmisalnya, blok `extend type Query { … }`

Mesin Pemformatan

Pemformatan dilakukan menggunakan dukungan GraphQL Prettier. Dalam kebanyakan kasus, Prettier berjalan di browser melalui runtime ringan. Jika plugin GraphQL tidak dapat diselesaikan di lingkungan saat ini, pemformat secara transparan beralih ke pekerja Prettier sisi server.

Opsi Tersedia (Dipetakan ke Prettier)

OpsiPerilakuNilai Umum
Gaya IndentasiPilih antara spasi dan tabspasi (default) atau tab
Ukuran IndentasiJumlah spasi per tingkat indentasi (saat menggunakan spasi)1–8, default: 2
Panjang BarisKolom target untuk membungkus/memutus pilihan panjang0–120 (0 ≈ efektif tanpa pembungkusan)

Batas & Kinerja

Alat ini disetel untuk skema dan file operasi GraphQL yang umum. Permintaan sekitar beberapa ratus KB hingga ~2 MB umumnya aman; dokumen yang sangat besar mungkin mengalami waktu habis atau pembatasan ukuran.

Privasi & Keamanan

Dokumen GraphQL diformat baik di browser Anda atau di backend formatter encode64. Mereka tidak dieksekusi atau dikirim ke layanan pihak ketiga. Untuk skema sensitif, Anda dapat mencerminkan konfigurasi yang sama secara lokal dengan Prettier.

Setara Command Line (Prettier)

Jika Anda sudah menginstal Node.js dan Prettier, Anda dapat mereproduksi perilaku ini secara lokal.

Node.js (semua platform)

Format file skema GraphQL di tempat

npx prettier --write schema.graphql

Prettier mendeteksi GraphQL secara otomatis berdasarkan ekstensi file.

Format dengan indentasi dan panjang baris kustom

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

Mencerminkan opsi indentasi dan pembungkusan yang tersedia di alat online.

Format dari stdin (misalnya dipip dari alat lain)

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

Berguna dalam skrip shell, pipeline CI, atau kait Git.

Kasus Penggunaan Umum GraphQL Formatter

Pengembangan Skema API

  • Jaga file skema besar tetap terformat konsisten untuk navigasi yang lebih mudah
  • Kurangi perbedaan spasi putih yang berisik dalam PR skema
  • Siapkan SDL bersih untuk alat pembuatan kode
# Sebelum
type User{ id:ID! name:String!}

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

Operasi & Fragmen Frontend

  • Normalisasi kueri bersama di beberapa aplikasi atau paket
  • Buat pilihan bersarang lebih mudah dipindai selama debugging
  • Jaga cuplikan dokumentasi dan contoh playground tetap terformat rapi

Tes, Fixture & Alat Bantu

  • Standarisasi fixture GraphQL yang digunakan dalam tes snapshot
  • Integrasikan pemformatan ke dalam kait pra-komit atau pekerjaan CI
  • Masukkan dokumen bersih ke alat validasi atau perbandingan skema

❓ Frequently Asked Questions

Apa yang sebenarnya diubah oleh formatter GraphQL?

Ini menyusun ulang dokumen GraphQL Anda sesuai aturan GraphQL Prettier: indentasi, jeda baris, spasi di sekitar tanda baca, dan tata letak pilihan serta field. Ini tidak mengganti nama field, menambahkan argumen, atau mengubah semantik skema.

Apakah mendukung operasi dan skema SDL?

Ya. Formatter bekerja untuk operasi GraphQL standar (kueri, mutasi, langganan, fragmen) dan bahasa definisi skema (tipe, antarmuka, enum, union, input, direktif, definisi skema, dan ekstensi).

Apakah komentar dan string deskripsi dipertahankan?

Ya. String deskripsi dengan tiga tanda kutip (`"""…"""`) dan komentar inline `#` dipertahankan. Formatter mungkin mengalirkan ulang atau menyesuaikan spasi di sekitarnya tetapi tidak sengaja menghapusnya.

Apakah kode GraphQL saya dieksekusi?

Tidak. Alat ini mengurai GraphQL Anda sebagai teks untuk memformat ulang, tetapi tidak mengeksekusi kueri atau terhubung ke server GraphQL mana pun.

Di mana pemformatan berjalan: klien atau server?

Pemformat lebih memilih menjalankan Prettier langsung di browser Anda untuk responsivitas. Jika plugin GraphQL yang diperlukan tidak dapat dimuat di sana, alat akan beralih ke worker Prettier di server dengan opsi yang sama.

Apakah ini gratis digunakan?

Ya. Alat ini gratis dengan perlindungan penggunaan wajar untuk menjaga kinerja tetap stabil. Untuk beban kerja berat atau pribadi, tiru konfigurasi yang sama dengan Prettier di lingkungan Anda sendiri.

Pro Tips

Best Practice

Gunakan pemformat ini untuk menstandarisasi skema warisan sebelum menambahkan linting atau perubahan besar; ini membuat perbedaan selanjutnya jauh lebih mudah ditinjau.

Best Practice

Sesuaikan pengaturan alat daring (ukuran indentasi dan panjang baris) dengan konfigurasi Prettier proyek Anda agar pemformatan lokal dan web tetap identik.

Best Practice

Ekstrak string GraphQL panjang yang tertanam dalam kode ke file `.graphql` agar dapat diformat secara seragam dan digunakan kembali.

Best Practice

Pasangkan pemformatan dengan linting (misalnya, GraphQL ESLint) untuk menangkap masalah skema dan kueri yang melampaui spasi dan pembungkusan.

Additional Resources

Spesifikasi GraphQL
Documentation
Prettier – Pemformatan GraphQL
Documentation
Dokumen Resmi GraphQL – Belajar
Documentation
GraphQL ESLint (Aturan Lint)
Documentation

Other Tools