Utilisation de GraphQL Playground avec Gatsby

Gatsby, un générateur de sites statique React populaire, simplifie la création de sites Web en rationalisant l'approvisionnement, la construction et le déploiement des données. Le processus implique généralement:

1. Acquisition de données: collecte de données provenant de diverses sources (CMS, Markdown, Bases de données, etc.).
2. Build Process (GraphQL-Powered): Utilisation de GraphQL pour gérer et traiter les données pour la génération de sites Web.
3. Déploiement: publication du site statique vers une plate-forme d'hébergement (Netlify, Vercel, etc.).

Cet article se concentre sur l'amélioration du processus de construction, en particulier en remplaçant le Graphiql GraphQL GraphQL par défaut de Gatsby par le terrain de jeu GraphQL plus riche en fonctionnalités.

Graphiql vs GraphQL Playground

Alors que GraphiQL sert d'IDE par défaut de Gatsby, GraphQL Playground offre plusieurs avantages:

• Documentation du schéma amélioré: fournit une documentation interactive de schéma multi-colonne.
• Mises à jour automatiques: recharge automatiquement le schéma.
• Prise en charge de l'abonnement: prend en charge les abonnements GraphQL.
• Expérience utilisateur améliorée: comprend des fonctionnalités telles que l'historique des requêtes, la configuration de l'en-tête HTTP, les onglets et l'extensibilité du thème.

Le choix entre eux dépend des besoins de votre projet. Ce didacticiel démontre l'utilisation de GraphQL Playground en raison de ses capacités avancées.

Configuration de GraphQL Playground avec Gatsby

Ce guide vous guide en créant un nouveau projet Gatsby et en intégrant GraphQL Playground.

1. Installer Gatsby CLI:

 NPM Install -g Gatsby-Cli

2. Créez un nouveau projet Gatsby:

 Gatsby New Gatsby-Playground
CD Gatsby-Playground

3. Démarrez le serveur de développement:

 Gatsby développe

Accédez à la Graphiql IDE par défaut sur http://localhost:8000/__graphql . Bien qu'une application de bureau GraphQL Playground existe, ce didacticiel montre une approche pratique pour l'intégrer directement.

4. Configurer les variables d'environnement:

Les variables d'environnement permettent la personnalisation dans différents environnements (développement, production). Créez un fichier .env.development à la racine du projet:

 <code>GATSBY_GRAPHQL_IDE=playground</code>

5. Gérer les variables d'environnement en JavaScript:

Les variables d'environnement de Gatsby sont accessibles pendant le temps de construction et le runtime Node.js. Pour les utiliser dynamiquement au moment de l'exécution, installez env-cmd :

 Yarn Ajouter Env-Cmd - Dev // ou NPM Installer --Save-Dev Env-Cmd

Modifiez le script "develop" dans package.json :

 "Développer": "Env-Cmd - File .env.Development - Fallback Gatsby développe"

Cela demande env-cmd de charger des variables de .env.development ou de secours à .env si présente.

6. Redémarrez le serveur:

Redémarrez le serveur de développement:

 Le démarrage du fil // ou le NPM Run se développe

Actualiser http://localhost:8000/__graphql dans votre navigateur. Vous devriez maintenant voir GraphQL Playground!

Conclusion

Ce tutoriel montre comment passer de Graphiql à GraphQL Playground dans un projet Gatsby, en tirant parti des fonctionnalités améliorées de Playground pour un flux de travail de développement amélioré. La décision de changer dépend de vos exigences spécifiques.

Ressources supplémentaires:

• Documentation Gatsby JS
• Documentation GraphQL Playground
• Documentation Env-CMD

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!