Ich gehe davon aus, dass die meisten von Ihnen bereits von Gatsby gehört haben und zumindest grob wissen, dass es sich im Grunde um einen statischen Website-Generator für React-Sites handelt. Er funktioniert im Allgemeinen so:
- Datenquellen → Daten von überall abrufen.
- Erstellen → Generieren Sie Ihre Website mit React und GraphQL.
- Bereitstellen → Senden Sie die Seite an jeden statischen Website-Host.
Das bedeutet typischerweise, dass Sie Ihre Daten aus jeder erkennbaren Datenquelle abrufen können — CMS, Markdown, Dateisysteme und Datenbanken, um nur einige zu nennen — die Daten über GraphQL verwalten, um Ihre Website zu erstellen, und schließlich Ihre Website auf jedem statischen Webhost (wie Netlify oder Zeit) bereitstellen.
In diesem Artikel befassen wir uns mit dem Erstellungsprozess, der von GraphQL angetrieben wird. Dies ist der Teil, in dem Ihre Daten verwaltet werden. Im Gegensatz zu herkömmlichen REST-APIs, bei denen Sie oft anonyme Daten senden müssen, um Ihre Endpunkte zu testen, konsolidiert GraphQL Ihre APIs zu einer selbstdokumentierenden IDE. Mit dieser IDE können Sie GraphQL-Operationen wie Abfragen, Mutationen und Abonnements ausführen sowie Ihr GraphQL-Schema und Ihre Dokumentation anzeigen.
GraphQL hat eine integrierte IDE, aber was, wenn wir etwas Leistungsfähigeres wollen? Hier kommt GraphQL Playground ins Spiel, und wir werden die Schritte durchgehen, um vom Standard zu GraphQL Playground zu wechseln, damit es mit Gatsby funktioniert.
GraphiQL und GraphQL Playground
GraphiQL ist die Standard-IDE von GraphQL zur Erkundung von GraphQL-Operationen, aber Sie könnten zu etwas anderem wechseln, wie z. B. GraphQL Playground. Beide haben ihre Vorteile. Zum Beispiel ist GraphQL Playground im Wesentlichen ein Wrapper über GraphiQL, enthält aber zusätzliche Funktionen wie
- Interaktive, mehrspaltige Schema-Dokumentation
- Automatische Schema-Neuladung
- Unterstützung für GraphQL-Abonnements
- Abfrageverlauf
- Konfiguration von HTTP-Headern
- Tabs
- Erweiterbarkeit (Themes usw.)
Die Wahl zwischen GraphQL Playground und GraphiQL hängt wahrscheinlich davon ab, ob Sie diese zusätzlichen Funktionen nutzen müssen. Es gibt keine strenge Regel, die Sie dazu bringt, bessere GraphQL-Operationen zu schreiben oder eine bessere Website oder App zu erstellen.
Dieser Beitrag soll Sie nicht für das eine oder andere entscheiden lassen. Wir betrachten in diesem Beitrag speziell GraphQL Playground, da es nicht die Standard-IDE ist und es Anwendungsfälle geben kann, in denen Sie die zusätzlichen Funktionen, die es bietet, benötigen und einrichten müssen, damit es mit Gatsby funktioniert. Tauchen wir also ein und richten Sie ein neues Gatsby-Projekt von Grund auf neu ein. Wir werden GraphQL Playground integrieren und es für das Projekt konfigurieren.
Ein Gatsby-Projekt einrichten
Um ein neues Gatsby-Projekt einzurichten, müssen wir zuerst das gatsby-cli installieren. Dies gibt uns Gatsby-spezifische Befehle, die wir im Terminal verwenden können.
npm install -g gatsby-cliJetzt richten wir eine neue Website ein. Ich habe beschlossen, dieses Beispiel "gatsby-playground" zu nennen, aber Sie können es nennen, wie Sie möchten.
gatsby new gatsby-playgroundNavigieren wir zu dem Verzeichnis, in dem es installiert wurde.
cd gatsby-playgroundUnd schließlich aktivieren wir unseren Entwicklungsserver.
gatsby developGehen Sie im Browser zu https://:8000 für die Startseite des Projekts. Ihre Gatsby GraphQL-Operationen befinden sich unter https://:8000/___graphql.
An dieser Stelle halte ich es für erwähnenswert, dass es eine Desktop-App für GraphQL Playground gibt. Sie könnten einfach über den URL-Endpunkt localhost:8000/___graphql auf Ihre Gatsby GraphQL-Operationen zugreifen, ohne diesen Artikel weiter zu verfolgen. Aber wir wollen uns die Hände schmutzig machen und Spaß unter der Haube haben!
Umgebungsvariablen von Gatsby
Immer noch dabei? Gut. Weiter geht's.
Da wir uns nicht auf die Desktop-App verlassen werden, müssen wir ein wenig mit Umgebungsvariablen einrichten.
Umgebungsvariablen sind Variablen, die speziell verwendet werden, um das Verhalten einer Website in verschiedenen Umgebungen anzupassen. Diese Umgebungen können sein, wenn die Website aktiv entwickelt wird, oder vielleicht, wenn sie live in der Produktion ist und für die Welt sichtbar ist. Wir können so viele Umgebungen haben, wie wir möchten, und für jede Umgebung unterschiedliche Umgebungsvariablen definieren.
Erfahren Sie mehr über Umgebungsvariablen in Gatsby.
Gatsby unterstützt zwei Umgebungen: Entwicklung und Produktion. Um eine Entwicklungsumgebungsvariable festzulegen, benötigen wir eine Datei .env.development im Stammverzeichnis des Projekts. Ähnlich für die Produktion, aber es ist .env.production.
Um beide Umgebungen zu tauschen, müssen wir eine Umgebungsvariable auf eine plattformübergreifend kompatible Weise festlegen. Lassen Sie uns eine Datei .env.development im Stammverzeichnis des Projekts erstellen. Hier legen wir ein Schlüssel/Wert-Paar für unsere Variablen fest. Der Schlüssel wird GATSBY_GRAPHQL_IDE sein und der Wert playground, wie folgt
GATSBY_GRAPHQL_IDE=playgroundZugriff auf Umgebungsvariablen in JavaScript
In Gatsby sind unsere Umgebungsvariablen nur zur Build-Zeit oder wenn Node.JS ausgeführt wird (was wir Laufzeit nennen) verfügbar. Da die Variablen clientseitig zur Build-Zeit geladen werden, müssen wir sie zur Laufzeit dynamisch verwenden. Es ist wichtig, dass wir unseren Server neu starten oder unsere Website neu erstellen, jedes Mal, wenn wir eine dieser Variablen ändern.
Um unsere Umgebungsvariablen in unser Projekt zu laden, müssen wir ein Paket installieren
yarn add env-cmd --dev // npm install --save-dev env-cmdDamit ändern wir das Entwicklungs-Skript in package.json als letzten Schritt auf stattdessen dies
"develop": "env-cmd --file .env.development --fallback gatsby develop"Das Entwicklungs-Skript weist das
env-cmdPaket an, Umgebungsvariablen aus einer benutzerdefinierten Umgebungsvariablendatei (.env.development in diesem Fall) zu laden, und wenn es diese nicht finden kann, greift es auf.envzurück (falls Sie eine haben, also erstellen Sie, wenn Sie es für nötig halten, eine Datei.envim Stammverzeichnis Ihres Projekts mit demselben Inhalt wie.env.development).
Und das war's! Aber denken Sie daran, den Server neu zu starten, da wir die Variable geändert haben.
yarn start // npm run developWenn Sie https://:8000/___graphql im Browser aktualisieren, sollten Sie jetzt GraphQL Playground sehen. Cool? Cool!
Und so bringen wir GraphQL Playground dazu, mit Gatsby zu funktionieren!
Das ist also, wie wir von der Standard-GraphiQL-IDE von GraphQL zu GraphQL Playground gelangen. Wie wir bereits besprochen haben, hängt die Entscheidung, ob überhaupt ein Wechsel stattfinden soll, davon ab, ob die zusätzlichen Funktionen, die GraphQL Playground bietet, für Ihr Projekt erforderlich sind. Nochmals, wir arbeiten im Grunde mit einem GraphiQL-Wrapper, der weitere Funktionen hinzufügt.
Ressourcen
Hier sind einige zusätzliche Artikel im Web, die Ihnen den Einstieg in Gatsby erleichtern und Sie mit GraphiQL, GraphQL Playground und Umgebungsvariablen vertrauter machen.