Formateur GraphQL Gratuit | Formatage Basé sur Prettier pour Requêtes et Schémas

Loading…

À propos Formateur GraphQL en ligne

Gardez votre SDL GraphQL et vos opérations lisibles et cohérents. Ce formateur GraphQL en ligne utilise l'analyseur GraphQL de Prettier pour réindenter, ajuster et normaliser vos documents. Il s'exécute dans le navigateur lorsque possible et utilise un formateur serveur si nécessaire, vous obtenez ainsi un résultat fiable sans vous soucier des outils.

Ce que fait ce formateur GraphQL

Utilise l'analyseur GraphQL de Prettier pour appliquer un formatage cohérent et standard de la communauté
Prend en charge les requêtes, mutations, abonnements, fragments et le SDL de schéma complet (types, interfaces, unions, énumérations, entrées, directives)
Indentation ajustable : choisissez des espaces ou des tabulations et configurez la taille de l'indentation (1–8)
Contrôle optionnel de la longueur des lignes / ajustement via une largeur de colonne configurable
Garde les descriptions (`"""…"""`) et les commentaires en ligne intacts tout en normalisant leur disposition
Valide la structure de votre document GraphQL dans le cadre du formatage ; une syntaxe invalide affichera des erreurs au lieu de corrompre silencieusement le code
Exécution hybride : exécute Prettier dans le navigateur lorsque disponible et utilise un formateur serveur si nécessaire
Collez ou téléchargez des fichiers `.graphql` / `.gql`, puis prévisualisez, copiez ou téléchargez le résultat formaté

📝 Comment formater GraphQL en ligne for graphql-formatter

Collez ou téléchargez votre GraphQL

Collez votre schéma GraphQL ou vos requêtes dans l'éditeur, ou déposez un fichier `.graphql` / `.gql`. Le formateur fonctionne à la fois pour les documents SDL et les opérations.

Ajustez les options de formatage

Choisissez les espaces ou les tabulations, définissez la taille de l'indentation et configurez votre longueur de ligne préférée. Ces options sont transmises au formateur GraphQL de Prettier.

Formatez, révisez et exportez

Cliquez sur Formater pour appliquer les modifications. Vérifiez le résultat dans le panneau de prévisualisation, puis copiez-le dans votre éditeur ou téléchargez le fichier formaté.

Spécifications techniques

Entrées prises en charge

Conçu pour les documents standards de schéma et d'opérations GraphQL.

Type	Exemples	Notes
Schéma SDL	schema.graphql, schema.gql	Types, interfaces, unions, énumérations, entrées, directives, définition de schéma
Opérations	queries.graphql, app.gql	Requêtes, mutations, abonnements et fragments
Extensions	extensions de schéma dans des fichiers séparés	par ex., blocs `extend type Query { … }`

Moteur de formatage

Le formatage est effectué en utilisant le support GraphQL de Prettier. Dans la plupart des cas, Prettier s'exécute dans le navigateur via un runtime léger. Si le plugin GraphQL ne peut pas être résolu dans l'environnement actuel, le formateur bascule transparentiellement vers un worker Prettier côté serveur.

Options disponibles (Mappées sur Prettier)

Option	Comportement	Valeurs typiques
Style d'indentation	Choisissez entre espaces et tabulations	espace (par défaut) ou tabulation
Taille d'indentation	Nombre d'espaces par niveau d'indentation (en utilisant des espaces)	1–8, défaut : 2
Longueur de ligne	Colonne cible pour le retour à la ligne des sélections longues	0–120 (0 ≈ pratiquement aucun retour à la ligne)

Limites et performances

L'outil est optimisé pour les schémas GraphQL typiques et les fichiers d'opérations. Les requêtes d'environ quelques centaines de Ko à ~2 Mo sont généralement sûres ; les documents extrêmement volumineux peuvent rencontrer des délais d'attente ou des limites de taille.

Confidentialité & Sécurité

Les documents GraphQL sont formatés soit dans votre navigateur, soit sur le backend de formatage d'encode64. Ils ne sont pas exécutés ni envoyés à des services tiers. Pour les schémas sensibles, vous pouvez reproduire la même configuration localement avec Prettier.

Équivalent en Ligne de Commande (Prettier)

Si vous avez déjà Node.js et Prettier installés, vous pouvez reproduire ce comportement localement.

Node.js (toutes plateformes)

Formater un fichier de schéma GraphQL sur place

npx prettier --write schema.graphql

Prettier détecte automatiquement GraphQL en fonction de l'extension du fichier.

Formater avec une indentation et une longueur de ligne personnalisées

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

Reprend les options d'indentation et de retour à la ligne exposées dans l'outil en ligne.

Formater depuis stdin (par exemple, redirigé depuis un autre outil)

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

Utile dans les scripts shell, les pipelines CI ou les hooks Git.

Cas d'Utilisation Courants du Formateur GraphQL

Développement de Schéma d'API

Maintenir les fichiers de schéma volumineux uniformément formatés pour une navigation plus facile
Réduire les différences de whitespace bruyantes dans les PR de schéma
Préparer un SDL propre pour les outils de génération de code

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

# Après
type User {
  id: ID!
  name: String!
}

Opérations Frontend & Fragments

Normaliser les requêtes partagées entre plusieurs applications ou packages
Rendre les sélections imbriquées plus faciles à parcourir lors du débogage
Garder les extraits de documentation et les exemples de playground bien formatés

Tests, Fixtures & Outillage

Standardiser les fixtures GraphQL utilisées dans les tests de snapshot
Intégrer le formatage dans les hooks pre-commit ou les jobs CI
Alimenter des documents propres dans les outils de validation ou de comparaison de schémas

❓ Frequently Asked Questions

Que change réellement le formateur GraphQL ?

Il restructure vos documents GraphQL selon les règles GraphQL de Prettier : indentation, sauts de ligne, espacement autour de la ponctuation et disposition des sélections et champs. Il ne renomme pas les champs, n'ajoute pas d'arguments ni ne modifie la sémantique du schéma.

Prend-il en charge à la fois les opérations et le SDL de schéma ?

Oui. Le formateur fonctionne pour les opérations GraphQL standard (requêtes, mutations, abonnements, fragments) et le langage de définition de schéma (types, interfaces, énumérations, unions, entrées, directives, définitions de schéma et extensions).

Les commentaires et chaînes de description sont-ils préservés ?

Oui. Les chaînes de description entre triples guillemets (`"""…"""`) et les commentaires en ligne `#` sont préservés. Le formateur peut les reformater ou ajuster l'espacement environnant mais ne les supprime pas intentionnellement.

Mon code GraphQL est-il exécuté ?

Non. L'outil analyse votre GraphQL sous forme de texte pour le reformater, mais il n'exécute pas les requêtes ni ne se connecte à un serveur GraphQL.

Où s'effectue le formatage : côté client ou serveur ?

Le formateur privilégie l'exécution de Prettier directement dans votre navigateur pour la réactivité. Si le plugin GraphQL requis ne peut pas y être chargé, il bascule vers un worker Prettier sur le serveur avec les mêmes options.

Est-ce gratuit ?

Oui. L'outil est gratuit avec des protections d'usage raisonnable pour maintenir des performances stables. Pour des charges de travail importantes ou privées, reproduisez la même configuration avec Prettier dans votre propre environnement.

Pro Tips

Best Practice

Utilisez ce formateur pour standardiser les schémas hérités avant d'ajouter du linting ou des changements cassants ; cela rend les diffs suivants beaucoup plus faciles à examiner.

Best Practice

Alignez les paramètres de votre outil en ligne (taille d'indentation et longueur de ligne) avec la configuration Prettier de votre projet pour garder un formatage local et web identique.

Best Practice

Extrayez les longues chaînes GraphQL intégrées du code dans des fichiers `.graphql` pour qu'elles puissent être formatées uniformément et réutilisées.

Best Practice

Associez le formatage au linting (par exemple, GraphQL ESLint) pour détecter les problèmes de schéma et de requête qui vont au-delà des espaces et du retour à la ligne.