Softonic

Constructeur de requêtes GraphQL

Étape 1 / 2
Arguments
Construire la requête

Écrire une opération GraphQL à la main signifie garder en ordre les accolades, les arguments et l’indentation. Ce constructeur assemble le document pour vous : choisissez requête, mutation ou abonnement, nommez l’opération, définissez le champ racine, ajoutez des arguments et listez les champs dont vous avez besoin. Vous obtenez une opération formatée à coller directement dans Apollo, urql ou GraphiQL.

Comment construire une opération GraphQL

  1. 1

    Choisissez le type d'opération

    Sélectionnez requête, mutation ou abonnement dans la liste déroulante. Cela définit le type d'opération que le serveur exécute.

  2. 2

    Nommez l'opération

    Donnez-lui un nom comme GetUser afin que le serveur puisse la journaliser et la mettre en cache. Le nom est facultatif ; le constructeur fonctionne sans lui.

  3. 3

    Définissez le champ racine

    Saisissez le champ que vous voulez appeler, par exemple user, createPost ou orderUpdated.

  4. 4

    Ajoutez des arguments

    Ajoutez des paires clé-valeur comme id: "123" ou id: $id. Les lignes dont la clé est vide sont ignorées.

  5. 5

    Listez les champs et copiez

    Saisissez un champ par ligne, générez la requête et copiez le document formaté dans le presse-papiers.

Travailler avec des documents GraphQL

Un document GraphQL est un ensemble d’une ou plusieurs opérations plus tous les fragments qu’elles référencent. Chaque opération nomme un champ racine du type Query, Mutation ou Subscription, et le serveur résout l’ensemble de sélection que vous demandez. Le constructeur écrit le texte de l’opération pour vous, mais il ne connaît pas votre schéma : vérifiez donc chaque nom de champ et d’argument contre votre API avant d’exécuter l’opération.

Anatomie de l’opération

Partie But Exemple
Type d’opération Requête, mutation ou abonnement query, mutation, subscription
Nom de l’opération Utilisé pour le cache et les journaux GetUserById
Arguments Valeurs passées au champ racine user(id: "123")
Ensemble de sélection Champs et sélections imbriquées { user(id: "123") { name posts { title } } }
Variables Entrées typées déclarées avec le nom de l’opération query GetUser($id: ID!) { user(id: $id) { name } }

Pièges courants

  • Les variables requises se terminent par !. Oublier cela sur des arguments marqués NonNull dans le schéma produit une erreur de validation avant que le résolveur ne s’exécute.
  • Les arguments texte ont besoin de guillemets. Une valeur comme 123 est un nombre ; une valeur texte doit s’écrire "123" avec des guillemets doubles dans la ligne d’argument.
  • Les types d’union et d’interface nécessitent des fragments en ligne ... on TypeName pour lire des champs spécifiques au type.
  • L’alias est obligatoire lorsque vous demandez le même champ deux fois avec des arguments différents, par exemple today: stats(period: DAY) et week: stats(period: WEEK).
  • Les connexions (spécification Relay) exposent edges { node { ... } } et pageInfo { endCursor hasNextPage } ; ignorer l’un ou l’autre casse la pagination.

Conseils

  • Gardez les opérations petites et nommées afin qu’Apollo Client puisse les mettre en cache individuellement.
  • Passez les valeurs qui changent sous forme de variables plutôt que de littéraux, afin que le serveur analyse le document une fois et le réutilise ; déclarez-les avec le nom de l’opération, par exemple query GetUser($id: ID!).
  • Si un champ nécessite plusieurs arguments, écrivez-les dans une seule ligne d’argument séparés par des virgules, par exemple filter: { status: ACTIVE } comme valeur.
  • Le constructeur émet exactement le texte que vous configurez. Si une opération échoue, comparez d’abord vos noms de champs avec le schéma actuel.

Questions fréquentes

Non. Il formate uniquement le texte que vous fournissez ; il n’y a aucun point de terminaison à appeler et aucun schéma requis. Remplissez les parties de l’opération et le constructeur assemble le document pour vous.

Oui. Utilisez la liste déroulante d’opération pour passer de la requête à la mutation ou à l’abonnement. Tout le reste fonctionne de la même façon : nom, champ racine, arguments et champs.

Ajoutez des lignes dans la section Arguments. La clé est le nom de l’argument et la valeur est ce que vous passez, par exemple id: “123” ou id: $id. Les lignes dont la clé est vide sont ignorées. Si vous saisissez une variable comme $id, déclarez-la vous-même avec le nom de l’opération, par exemple query GetUser($id: ID!).

Le constructeur émet exactement le texte que vous avez saisi. L’erreur signifie généralement qu’un nom de champ ou d’argument ne correspond pas au schéma de votre serveur : comparez le champ racine et chaque nom de champ avec votre API et corrigez l’orthographe.

Outils similaires

Référence de la table ASCII

Table ASCII complète de 0 à 127 avec décimal, hexadécimal, octal, binaire et référence numérique HTML pour chaque caractère, y compris les codes de contrôle comme NUL, LF et DEL.

Référence des caractères HTML

Liste consultable des entités HTML, de leurs codes nommés et numériques, et un copier-coller en un clic pour les caractères et symboles spéciaux.

Référence des raccourcis clavier

Recherchez les raccourcis par défaut documentés de VS Code, Chrome et Bash avec GNU Readline sous macOS, Windows et Linux.

Générateur de carte CSS

Créez le CSS d’un conteneur de carte : fond, bordure, rayon des angles, espacement intérieur et ombre douce, avec aperçu immédiat et code à copier-coller.

Générateur d’accordéon CSS

Créez un accordéon de trois sections avec details et summary. Personnalisez textes, couleurs, espacements, icône et ouverture, puis copiez ou téléchargez le code.

Recherche de nom de couleur

Trouvez la couleur nommée CSS standardisée la plus proche d’une valeur HEX, RGB ou HSL grâce à l’écart CIEDE2000.

Outil disponible dans d’autres langues