Softonic

Pembuat Kueri GraphQL

Langkah 1 / 2
Argumen
Buat kueri

Menulis operasi GraphQL secara manual berarti harus menjaga kerapian tanda kurung, argumen, dan indentasi. Alat pembangun ini merangkai dokumennya untuk Anda: pilih kueri, mutasi, atau langganan, beri nama operasi, tentukan field akar, tambahkan argumen, dan tuliskan field yang Anda butuhkan. Hasilnya adalah operasi yang terformat dan bisa langsung ditempelkan ke Apollo, urql, atau GraphiQL.

Cara membuat operasi GraphQL

  1. 1

    Pilih jenis operasi

    Pilih kueri, mutasi, atau langganan dari menu tarik turun. Ini menentukan jenis operasi yang dijalankan server.

  2. 2

    Beri nama operasi

    Beri nama seperti GetUser agar server dapat mencatat dan menyimpannya dalam cache. Nama bersifat opsional; alat ini tetap berfungsi tanpa nama.

  3. 3

    Tentukan field akar

    Ketik field yang ingin Anda panggil, misalnya user, createPost, atau orderUpdated.

  4. 4

    Tambahkan argumen

    Tambahkan pasangan kunci-nilai seperti id: "123" atau id: $id. Baris dengan kunci kosong dilewati.

  5. 5

    Tuliskan field dan salin

    Ketik satu field per baris, bangun kuerinya, lalu salin dokumen yang terformat ke papan klip.

Bekerja dengan dokumen GraphQL

Dokumen GraphQL adalah kumpulan satu atau lebih operasi beserta fragmen-fragmen yang dirujuknya. Setiap operasi menunjuk sebuah field akar bertipe Query, Mutation, atau Subscription, dan server akan menyelesaikan set pemilihan yang Anda minta. Alat pembangun menuliskan teks operasinya untuk Anda, tetapi tidak mengenal skema Anda, jadi periksa setiap nama field dan argumen terhadap API Anda sebelum menjalankan operasi.

Anatomi operasi

Bagian Tujuan Contoh
Jenis operasi Kueri, mutasi, atau langganan query, mutation, subscription
Nama operasi Digunakan untuk cache dan log GetUserById
Argumen Nilai yang diberikan ke field akar user(id: "123")
Set pemilihan Field dan pemilihan bersarang { user(id: "123") { name posts { title } } }
Variabel Input bertipe yang dideklarasikan bersama nama operasi query GetUser($id: ID!) { user(id: $id) { name } }

Kesalahan umum

  • Variabel wajib diakhiri dengan !. Jika Anda melupakannya pada argumen yang ditandai NonNull dalam skema, kesalahan validasi muncul sebelum resolver dijalankan.
  • Argumen teks butuh tanda kutip. Nilai seperti 123 adalah angka; nilai teks harus ditulis "123" dengan tanda kutip ganda di dalam baris argumen.
  • Tipe union dan interface memerlukan fragmen inline ... on TypeName untuk membaca field yang spesifik sesuai tipenya.
  • Alias wajib digunakan ketika Anda meminta field yang sama dua kali dengan argumen berbeda, misalnya today: stats(period: DAY) dan week: stats(period: WEEK).
  • Koneksi (spesifikasi Relay) menampilkan edges { node { ... } } dan pageInfo { endCursor hasNextPage }; melewatkan salah satunya akan merusak paginasi.

Tips

  • Pertahankan operasi dalam skala kecil dan beri nama agar Apollo Client dapat menyimpannya secara terpisah dalam cache.
  • Berikan nilai yang berubah sebagai variabel, bukan literal, sehingga server memproses dokumen sekali lalu menggunakannya kembali; deklarasikan variabel di samping nama operasi, misalnya query GetUser($id: ID!).
  • Jika sebuah field membutuhkan beberapa argumen, tulis semuanya dalam satu baris argumen yang dipisah koma, misalnya filter: { status: ACTIVE } sebagai nilainya.
  • Alat ini menghasilkan persis teks yang Anda atur. Jika sebuah operasi gagal, bandingkan dulu nama field Anda dengan skema yang berlaku.

Pertanyaan yang Sering Diajukan

Tidak. Alat ini hanya memformat teks yang Anda berikan; tidak ada endpoint yang dipanggil dan skema tidak diperlukan. Isi bagian-bagian operasinya, dan alat ini akan merangkai dokumen untuk Anda.

Ya. Gunakan menu tarik turun operasi untuk berpindah antara kueri, mutasi, dan langganan. Hal lainnya sama saja: nama, field akar, argumen, dan field.

Tambahkan baris di bagian argumen. Kuncinya adalah nama argumen dan nilainya adalah yang Anda berikan, misalnya id: “123” atau id: $id. Baris dengan kunci kosong diabaikan. Jika Anda mengetik variabel seperti $id, deklarasikan sendiri di samping nama operasi, misalnya query GetUser($id: ID!).

Alat ini menghasilkan persis teks yang Anda ketik. Kesalahan tersebut biasanya berarti nama field atau argumen tidak cocok dengan skema server Anda: bandingkan field akar dan setiap nama field dengan API Anda, lalu perbaiki penulisannya.

Alat Terkait

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Referensi pintasan papan ketik

Cari pintasan bawaan terdokumentasi untuk VS Code, Chrome, dan Bash dengan GNU Readline di macOS, Windows, dan Linux.

Pemformat HTML

Format HTML secara lokal di browser dengan inden dua atau empat spasi. HTML tidak diunggah atau divalidasi.

Generator EditorConfig

Buat file .editorconfig dengan gaya dan ukuran indentasi, akhir baris, charset, dan aturan spasi Anda untuk format yang konsisten di berbagai IDE dan editor.

Validator Email

Validasi alamat email: pemeriksaan sintaks RFC 5322, pengecekan live record MX, serta detail bagian lokal, domain, dan panjang. Tidak ada email yang dikirim.

Alat ini tersedia dalam bahasa lain