GraphQL Playground

GraphQL Playground | Outil en ligne gratuit | Elysia Tools

Guide d'utilisation de l'outil

Découvrez quand utiliser cet outil, ce qu'il prend en charge et comment les utilisateurs l'appliquent.

Points clés

Catégorie: Development
Types d’entrée: text, textarea
Type de sortie: interactive
Exemples associés: 4
API disponible: Oui

Aperçu

GraphQL Playground est un client GraphQL directement intégré à votre navigateur qui vous permet de tester vos requêtes et mutations en temps réel. Saisissez simplement l'URL de votre endpoint, configurez vos variables et en-têtes d'authentification, puis exécutez vos requêtes pour inspecter instantanément les réponses JSON formatées ou analyser les erreurs renvoyées par votre API.

Quand l’utiliser

Lors du développement d'une API GraphQL pour tester rapidement les schémas et les résolveurs sans configurer de client lourd.
Pour déboguer des requêtes ou des mutations spécifiques en envoyant des variables et des en-têtes d'authentification personnalisés.
Pour explorer et valider la structure des réponses JSON renvoyées par un endpoint GraphQL public ou privé.

Fonctionnement

1Renseignez l'adresse de votre endpoint GraphQL dans le champ dédié.
2Saisissez votre requête ou mutation GraphQL, puis ajoutez éventuellement des variables au format JSON et des en-têtes HTTP comme des jetons d'autorisation.
3Cliquez sur le bouton d'envoi pour exécuter la requête.
4Visualisez immédiatement le résultat JSON formaté ou le tableau d'erreurs retourné par le serveur.

Cas d’usage

Test rapide de requêtes complexes avec des variables dynamiques lors du développement d'une application.
Vérification de la structure des données retournées par une API GraphQL tierce.
Débogage d'erreurs d'authentification en testant différents jetons dans les en-têtes HTTP.

Exemples

1. Test d'une API publique de pays

Développeur Front-End

Contexte

Un développeur souhaite récupérer la liste des continents et leurs codes pour alimenter un menu déroulant dans son application.

Problème

Vérifier la structure exacte de la réponse JSON renvoyée par l'API publique des pays avant de coder l'intégration.

Utilisation

Saisir l'endpoint 'https://countries.trevorblades.com/' et copier la requête par défaut pour lister les continents.

Endpoint: https://countries.trevorblades.com/
Query:
query {
  continents {
    code
    name
  }
}

Résultat

L'outil affiche la liste des continents au format JSON avec leurs codes et noms respectifs.

2. Requête sécurisée avec variables

Ingénieur API

Contexte

Un ingénieur doit tester la récupération d'un profil utilisateur spécifique sur un serveur de staging protégé par un jeton d'accès.

Problème

Valider que le serveur renvoie correctement les données de l'utilisateur demandé lorsque le jeton Bearer est fourni.

Utilisation

Renseigner l'endpoint de staging, ajouter l'en-tête d'autorisation, définir la variable 'id' et écrire la requête correspondante.

FAQ

Puis-je envoyer des en-têtes personnalisés avec ma requête ?

Oui, vous pouvez spécifier des en-têtes comme 'Authorization' ou 'x-api-key' dans le champ dédié aux en-têtes.

Comment passer des variables à ma requête GraphQL ?

Saisissez vos variables sous forme d'objet JSON valide dans la zone de texte réservée aux variables.

Le client prend-il en charge les mutations ?

Oui, vous pouvez exécuter aussi bien des requêtes (queries) que des mutations.

Que se passe-t-il en cas d'erreur de syntaxe ou de serveur ?

Le playground affiche directement le tableau d'erreurs retourné par l'endpoint GraphQL pour faciliter le débogage.

Faut-il installer un logiciel pour utiliser cet outil ?

Non, ce client GraphQL fonctionne entièrement dans votre navigateur web sans aucune installation.

Endpoint: https://api.staging.example.com/graphql
Headers:
Authorization: Bearer mon-token-secret
Variables:
{
  "id": "42"
}
Query:
query GetUser($id: ID!) {
  user(id: $id) {
    name
    email
  }
}

Exécuter cet outil

Exemples adaptés à cet outil

Continuer avec des outils et dossiers associés

Découvrez quand utiliser cet outil, ce qu'il prend en charge et comment les utilisateurs l'appliquent.

Points clés

Aperçu

Quand l’utiliser

Fonctionnement

Cas d’usage

Exemples

1. Test d'une API publique de pays

2. Requête sécurisée avec variables

FAQ

Collections Postman - Tests API

Exemples Apache Arrow

Exemples de Traçage Distribué

Exemples AWS EventBridge

Auditeur de dépendances package.json

Visualiseur de Plan d’Exécution SQL

Visionneuse de sauvegardes de jeu

Utilitaire Lodash en ligne