Loading…

Informazioni Formattatore GraphQL Online

Mantieni leggibili e coerenti i tuoi SDL e operazioni GraphQL. Questo formattatore GraphQL online utilizza il parser GraphQL di Prettier per ri-indentare, avvolgere e normalizzare i tuoi documenti. Funziona nel browser quando possibile e ricade su un formattatore server se necessario, così ottieni un output affidabile senza pensare agli strumenti.

Cosa Fa Questo Formattatore GraphQL

  • Utilizza il parser GraphQL di Prettier per applicare una formattazione coerente e standard della comunità
  • Supporta query, mutazioni, sottoscrizioni, frammenti e SDL di schema completo (tipi, interfacce, unioni, enumerazioni, input, direttive)
  • Indentazione regolabile: scegli spazi o tabulazioni e configura dimensione indentazione (1–8)
  • Controllo opzionale lunghezza riga / avvolgimento tramite larghezza colonna configurabile
  • Mantiene intatte le descrizioni (`"""…"""`) e i commenti in linea normalizzandone il layout
  • Convalida la struttura del documento GraphQL come parte della formattazione; sintassi non valida mostrerà errori invece di alterare silenziosamente il codice
  • Esecuzione ibrida: esegue Prettier nel browser quando disponibile e ricade su un formattatore server se necessario
  • Incolla o carica file `.graphql` / `.gql`, poi visualizza in anteprima, copia o scarica il risultato formattato

📝 Come Formattare GraphQL Online for graphql-formatter

1

Incolla o Carica il Tuo GraphQL

Incolla il tuo schema GraphQL o le query nell'editor, oppure rilascia un file `.graphql` / `.gql`. Il formattatore funziona sia per documenti SDL che per operazioni.

2

Regola le Opzioni di Formattazione

Scegli spazi o tabulazioni, imposta la dimensione del rientro e configura la lunghezza di riga preferita. Queste opzioni vengono passate al formattatore GraphQL di Prettier.

3

Formatta, Rivedi ed Esporta

Clicca Formatta per applicare le modifiche. Rivedi il risultato nel pannello di anteprima, poi copialo nuovamente nel tuo editor o scarica il file formattato.

Specifiche Tecniche

Input Supportato

Progettato per documenti standard di schema e operazioni GraphQL.

TipoEsempiNote
Schema SDLschema.graphql, schema.gqlTipi, interfacce, unioni, enumerazioni, input, direttive, definizione schema
Operazioniqueries.graphql, app.gqlQuery, mutazioni, sottoscrizioni e frammenti
Estensioniestensioni schema in file separaties. blocchi `extend type Query { … }`

Motore di Formattazione

La formattazione viene eseguita utilizzando il supporto GraphQL di Prettier. Nella maggior parte dei casi, Prettier viene eseguito nel browser tramite un runtime leggero. Se il plugin GraphQL non può essere risolto nell'ambiente corrente, il formattatore passa automaticamente a un worker Prettier lato server.

Opzioni Disponibili (Mappate su Prettier)

OpzioneComportamentoValori Tipici
Stile RientroScegli tra spazi e tabulazionispazio (predefinito) o tabulazione
Dimensione RientroNumero di spazi per livello di rientro (quando si usano spazi)1–8, predefinito: 2
Lunghezza RigaColonna target per l'avvolgimento/interruzione di selezioni lunghe0–120 (0 ≈ nessun avvolgimento effettivo)

Limiti e Prestazioni

Lo strumento è ottimizzato per schemi GraphQL tipici e file di operazione. Richieste intorno a poche centinaia di KB fino a ~2 MB sono generalmente sicure; documenti estremamente grandi potrebbero incontrare timeout o limiti di dimensione.

Privacy e Sicurezza

I documenti GraphQL vengono formattati nel tuo browser o sul backend di formattazione di encode64. Non vengono eseguiti o inviati a servizi di terze parti. Per schemi sensibili, puoi replicare la stessa configurazione localmente con Prettier.

Equivalente da Riga di Comando (Prettier)

Se hai già installato Node.js e Prettier, puoi riprodurre questo comportamento localmente.

Node.js (tutte le piattaforme)

Formatta un file di schema GraphQL in loco

npx prettier --write schema.graphql

Prettier rileva automaticamente GraphQL in base all'estensione del file.

Formatta con indentazione personalizzata e lunghezza riga

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

Riflette le opzioni di indentazione e a capo esposte nello strumento online.

Formatta da stdin (ad esempio inviato da un altro strumento)

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

Utile in script shell, pipeline CI o hook Git.

Casi d'Uso Comuni del Formattatore GraphQL

Sviluppo Schema API

  • Mantieni file di schema grandi formattati in modo coerente per una navigazione più facile
  • Riduci le differenze di spazi bianchi rumorose nelle PR dello schema
  • Prepara SDL pulito per strumenti di generazione codice
# Prima
type User{ id:ID! name:String!}

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

Operazioni e Frammenti Frontend

  • Normalizza query condivise tra più app o pacchetti
  • Rendi le selezioni annidate più facili da scansionare durante il debug
  • Mantieni snippet di documentazione ed esempi playground ben formattati

Test, Fixture e Strumenti

  • Standardizza fixture GraphQL usate nei test snapshot
  • Integra la formattazione in hook pre-commit o job CI
  • Fornisci documenti puliti a strumenti di validazione schema o diff

❓ Frequently Asked Questions

Cosa cambia effettivamente il formattatore GraphQL?

Ristruttura i tuoi documenti GraphQL secondo le regole GraphQL di Prettier: indentazione, interruzioni di riga, spaziatura attorno alla punteggiatura e layout di selezioni e campi. Non rinomina campi, aggiunge argomenti o cambia la semantica dello schema.

Supporta sia operazioni che schema SDL?

Sì. Il formattatore funziona per operazioni GraphQL standard (query, mutazioni, sottoscrizioni, frammenti) e linguaggio di definizione schema (tipi, interfacce, enum, union, input, direttive, definizioni schema ed estensioni).

I commenti e le stringhe di descrizione vengono preservati?

Sì. Le stringhe di descrizione tra triple virgolette (`"""…"""`) e i commenti inline `#` vengono preservati. Il formattatore potrebbe riorganizzarli o aggiustare lo spazio bianco circostante ma non li rimuove intenzionalmente.

Il mio codice GraphQL viene eseguito?

No. Lo strumento analizza il tuo GraphQL come testo per riformattarlo, ma non esegue query né si connette a nessun server GraphQL.

Dove viene eseguita la formattazione: client o server?

Il formatter preferisce eseguire Prettier direttamente nel tuo browser per la reattività. Se il plugin GraphQL richiesto non può essere caricato lì, ricade su un worker Prettier sul server con le stesse opzioni.

È gratuito da usare?

Sì. Lo strumento è gratuito con protezioni di uso equo per mantenere stabile le prestazioni. Per carichi di lavoro pesanti o privati, replica la stessa configurazione con Prettier nel tuo ambiente.

Pro Tips

Best Practice

Usa questo formatter per standardizzare schemi legacy prima di aggiungere linting o modifiche di rottura; rende i diff successivi molto più facili da revisionare.

Best Practice

Allinea le impostazioni dello strumento online (dimensione indentazione e lunghezza riga) con la configurazione Prettier del tuo progetto per mantenere identica la formattazione locale e web.

Best Practice

Estrai le lunghe stringhe GraphQL incorporate dal codice in file `.graphql` in modo che possano essere formattate uniformemente e riutilizzate.

Best Practice

Abbina la formattazione al linting (es. GraphQL ESLint) per individuare problemi di schema e query che vanno oltre spazi bianchi e a capo.

Additional Resources

Specifica GraphQL
Documentation
Prettier – Formattazione GraphQL
Documentation
Documentazione Ufficiale GraphQL – Impara
Documentation
GraphQL ESLint (Regole di Lint)
Documentation

Other Tools