Verwenden Sie den GraphQL -Spielplatz mit Gatsby

Gatsby, ein beliebter React Static Site Generator, vereinfacht die Erstellung der Website, indem die Datenbeschaffung, das Erstellen und die Bereitstellung von Daten optimiert werden. Der Prozess beinhaltet normalerweise:

1. Datenerfassung: Sammeln von Daten aus verschiedenen Quellen (CMS, Markdown, Datenbanken usw.).
2. Build-Prozess (GraphQL-betrieben): Verwaltung von GraphQL zum Verwalten und Verarbeiten von Daten für die Website der Website.
3. Bereitstellung: Veröffentlichung der statischen Site auf einer Hosting -Plattform (Netlify, Vercel usw.).

Dieser Artikel konzentriert sich auf die Verbesserung des Build-Prozesses, insbesondere durch den Austausch von Gatsbys Standard-GraphiQL-IDE durch den merkmalreichen GraphQL-Spielplatz.

Graphiql vs. GraphQl Playground

Während Graphiql als Standard -IDE von Gatsby dient, bietet GraphQL Playground mehrere Vorteile:

• Verbessertes Schema-Dokumentation: Bietet eine interaktive Dokumentation von Multi-Säulen-Schema.
• Automatische Updates: Das Schema lädt automatisch neu.
• Abonnementunterstützung: Unterstützt GraphQL -Abonnements.
• Verbesserte Benutzererfahrung: Beinhaltet Funktionen wie Abfragemestramm, HTTP -Header -Konfiguration, Registerkarten und Themenverdienbarkeit.

Die Wahl zwischen ihnen hängt von den Bedürfnissen Ihres Projekts ab. Dieses Tutorial zeigt den GraphQL -Spielplatz aufgrund seiner fortschrittlichen Funktionen.

Einrichten des GraphQL -Spielplatzes mit Gatsby

Dieser Leitfaden führt Sie durch die Einrichtung eines neuen Gatsby -Projekts und die Integration von GraphQL -Spielplatz.

1. Installieren Sie Gatsby CLI:

 npm install -g gatsby -cli

2. Erstellen Sie ein neues Gatsby -Projekt:

 Gatsby New Gatsby-Playground
CD Gatsby-Playground

3. Starten Sie den Entwicklungsserver:

 Gatsby entwickelt sich

Greifen Sie auf die Standard -Graphiql -IDE unter http://localhost:8000/__graphql zu. Während eine GraphQL Playground-Desktop-App vorhanden ist, zeigt dieses Tutorial einen praktischen Ansatz zur direkten Integration.

4. Konfigurieren von Umgebungsvariablen:

Umgebungsvariablen ermöglichen eine Anpassung in verschiedenen Umgebungen (Entwicklung, Produktion). Erstellen Sie eine .env.development -Datei in der Projektstamme:

 <code>GATSBY_GRAPHQL_IDE=playground</code>

5. Umgebungsvariablen in JavaScript verwalten:

Die Umgebungsvariablen von Gatsby sind während der Build Time und der Node.js -Laufzeit zugänglich. Um sie zur Laufzeit dynamisch zu verwenden, installieren Sie env-cmd :

 Garn add Env-CMD ---dev // oder NPM Install ---Save-dev env-cmd

Ändern Sie das Skript "develop" in package.json :

 "Entwickeln": "Env-CMD-File .Env.Development--Fallback Gatsby Develop"

Dadurch wird env-cmd angewiesen, Variablen von .env.development oder Fallback zu .env zu laden, wenn vorhanden.

6. Starten Sie den Server neu:

Starten Sie den Entwicklungsserver neu:

 Garnstart // oder NPM Run entwickeln

Aktualisieren Sie http://localhost:8000/__graphql in Ihrem Browser. Sie sollten jetzt den GraphQL -Spielplatz sehen!

Abschluss

In diesem Tutorial wird in einem Gatsby -Projekt von GraphiQL zu GraphQL Playground wechseln und die verbesserten Funktionen des Spielplatzes für einen verbesserten Entwicklungsworkflow nutzen. Die Entscheidung zum Wechseln hängt von Ihren spezifischen Anforderungen ab.

Weitere Ressourcen:

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

Das obige ist der detaillierte Inhalt vonVerwenden Sie den GraphQL -Spielplatz mit Gatsby. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!