Ein Front-End-Developer ‘ s Guide to GraphQL

0
12

Egal wie groß oder klein Ihre Anwendung ist, müssen Sie befassen sich mit dem abrufen der Daten von einem remote-server an einem gewissen Punkt. Auf dem front-end, dies ist in der Regel Kollision mit einem REST-Endpunkt, die Umwandlung der Antwort, caching, und die Aktualisierung Ihrer Benutzeroberfläche. Seit Jahren RUHE wurde der status quo für APIs, aber im Laufe des letzten Jahres eine neue API Technologie namens GraphQL hat in der Popularität explodiert aufgrund seiner ausgezeichneten Entwickler, der Erfahrung und der deklarative Ansatz, um Daten abrufen.

In diesem post, wir laufen durch ein paar praktische Beispiele zeigen Ihnen, wie Sie die Integration GraphQL in Ihrer Anwendung wird die Lösung für viele Problembereiche, die Arbeit mit remote-Daten. Wenn Sie das neue GraphQL, keine Panik! Ich werde auch auf einige Ressourcen, damit Sie lernen, GraphQL mit der Apollo-stack, so können Sie beginnen, ab 2018 vor der Kurve.

GraphQL 101

Bevor wir Tauchen Sie ein in wie GraphQL macht Ihr Leben als Frontend-Entwickler einfacher wird, sollten wir zunächst klären, was es ist. Wenn wir darüber sprechen, GraphQL, wir sind entweder unter Bezugnahme auf die Sprache selbst oder seine reiche ökosystem von tools. In seinem Kern, GraphQL ist eine typisierte Anfragesprache entwickelt, die es Ihnen ermöglicht, zu beschreiben, Ihre Daten den Anforderungen in einer deklarativen Weise. Die Form des Ergebnis entspricht die Form Ihrer Suchanfrage: im Beispiel unten, können wir erwarten, zu erhalten, wieder ein Objekt mit einer Währung, Eigentum und Tarife-Eigenschaft enthält ein array von Objekten mit Währungs-und rate-Tasten.

{
Preise(Währung: “USD”) {
Währung
Preise {
Währung
rate
}
}
}

Wenn wir darüber sprechen, GraphQL in einem weiteren Sinne, sind wir oft unter Bezugnahme auf das ökosystem von tools, die Ihnen bei der Umsetzung GraphQL in Ihrer Anwendung. Auf dem back-End verwenden Sie die Apollo-Server zum erstellen eines GraphQL-server, die einen einzigen Endpunkt, der analysiert eine GraphQL Anfrage und gibt Daten zurück. Wie funktioniert der server wissen, welche Daten zurückgeben? Verwenden Sie GraphQL Tools zum erstellen eines Schemas (wie eine Blaupause für Ihre Daten) und eine resolver-Karte (nur eine Reihe von Funktionen, die das abrufen von Daten aus einem REST-Endpunkt -, Datenbank-oder wo immer sonst Sie).

Das alles klingt komplizierter als es tatsächlich ist — mit Apollo Launchpad, ein GraphQL server Spielplatz, können Sie eine funktionierende GraphQL-server im browser in weniger als 60 Zeilen code! 😮 Wir verweisen Sie in diesem Launchpad, die ich erstellt, umschließt die Coinbase API in diesem Beitrag.

Sie verbinden Ihre GraphQL server, um Ihre Anwendung mit dem Apollo-Client, der eine schnelle und flexible client abruft, speichert und aktualisiert Ihre Daten für Sie. Seit dem Apollo-Client ist nicht gekoppelt an Ihre view-Schicht, können Sie es mit Reagieren, Eckig, Vue, oder plain JavaScript. Nicht nur die Apollo-cross-Rahmen, es ist auch cross-Plattform, mit React Native & Ionic out of the box unterstützt.

Let ‘ s give it a try! 🚀

Nun, da bist du gut bewandert in dem, was GraphQL ist, lasst uns unsere Hände schmutzig mit ein paar praktischen Beispielen, die veranschaulichen, wie es ist, entwickeln Sie Ihre front-end mit Apollo. Am Ende, denke ich, werden Sie davon überzeugt sein, dass ein GraphQL-basierten Architektur mit Apollo kann Ihnen helfen, Schiff features schneller als bisher.

1. Fügen Sie neue Daten-Anforderungen ohne hinzufügen eines neuen Endpunkt

Wir haben alle hier schon vor: Sie verbringen Stunden Aufbau einer perfekten UI-Komponente, wenn plötzlich Anforderungen an das Produkt ändern. Sie erkennen schnell, dass die Daten, die Sie benötigen, zu erfüllen diese neuen Anforderungen verlangen eine komplizierte Wasserfall von API Anfragen oder schlimmer noch, eine neue REST-Endpunkt. Nun blockiert, sich auf Ihre Arbeit, Sie stellen dem backend-team bauen Sie einen neuen Endpunkt nur zu erfüllen, müssen die Daten für eine Komponente.

Diese gemeinsame frustration existiert nicht mehr GraphQL, weil die Daten, die Sie verbrauchen auf dem client ist nicht mehr gekoppelt an ein endpoint-Ressourcen. Stattdessen, Sie treffen immer die gleichen Endpunkt für Ihre GraphQL server. Ihr server gibt alle Ressourcen, die er zur Verfügung hat, über Ihr schema und lässt Ihre Abfrage bestimmen die Form des Ergebnisses. Lassen Sie uns zeigen, diese Konzepte mit unserem Launchpad aus, bevor Sie:

In unserem schema, suchen Sie in den Zeilen 22-26, wo wir definieren unsere Wechselkurs-Typ. Liste diese Felder aus allen verfügbaren Ressourcen, die wir Abfragen können in unserer Anwendung.

Typ Wechselkurs {
Währung: String
rate: String
name: String
}

Mit dem REST, Sie sind beschränkt auf die Daten Ihrer Ressourcen bietet. Wenn Ihr /exchange-Tarife Endpunkt nicht werden, umfassen den Namen, dann müssen Sie entweder auf einen anderen Endpunkt wie /Währung, für die Sie Daten oder erstellen Sie, wenn Sie nicht vorhanden sind.

Mit GraphQL, wir wissen, dass der name bereits vorhanden ist, um uns durch Einsicht in unser schema, so können wir die Abfrage für die es in unserer Anwendung. Versuchen Sie, dieses Beispiel im Launchpad durch das hinzufügen des namens-Feld auf der rechten Seite!

{
Preise(Währung: “USD”) {
Währung
Preise {
Währung
rate
name
}
}
}

Jetzt, entfernen Sie das Feld name, und führen Sie die gleiche Abfrage. Sehen Sie, wie die Form von unserem Ergebnis ändert?

Ihre GraphQL server bietet Ihnen immer wieder genau die Daten, die Sie wünschen. Nichts mehr. Dies unterscheidet sich deutlich von dem REST, wo Sie oft zum filtern und transformieren der Daten, die Sie wieder aus dem server in die Form, die Ihre UI-Komponenten benötigen. Das spart nicht nur Zeit, es führt auch kleinere Netzwerk-Nutzlasten und CPU-Einsparungen aus dem laden und Parsen der Antwort.

2. Reduzieren Sie Ihr state-management-boilerplate

Abrufen von Daten fast immer mit aktualisieren den Zustand der Anwendung. In der Regel werden Sie code schreiben, der track mindestens drei Aktionen: eine für, wenn die Daten laden, wenn die Daten erfolgreich ankommt, und eine, wenn die Daten Fehler aus. Sobald die Daten eintreffen, müssen Sie, um es zu transformieren in die Form, die Ihre UI-Komponenten erwarten, normalisieren, cache -, und update-Benutzeroberfläche. Dieser Prozess kann sich wiederholen, erfordern unzählige Zeilen boilerplate-ausführen einer Anfrage.

Mal sehen, wie die Apollo-Client beseitigt diese mühsame Prozess insgesamt durch den Blick auf ein Beispiel Reagieren-app in CodeSandbox. Navigieren Sie zu “list.js” und scrollen Sie nach unten.

export Standard-graphql(ExchangeRateQuery, {
Requisiten: ({ data }) => {
if (Daten.loading) {
return { be: Daten.laden };
}
if (Daten.Fehler) {
return { Fehler: die Daten.”error”};
}
return {
Belastung: false,
Tarife: Daten.Preisen.Preise
};
}
})(ExchangeRateList);

In diesem Beispiel Reagieren, Apollo, Apollo-Kunden Reagieren integration verbindlich ist unsere Wechselkurs-Abfrage, um unsere ExchangeRateList Komponente. Einmal Apollo-Client ausgeführt wird, der Abfrage, tracks laden und der Fehlerzustand automatisch und fügt es auf die Daten Stütze. Wenn Apollo-Client erhält das Ergebnis, wird es die Daten aktualisieren prop mit dem Ergebnis der Abfrage, die Sie aktualisieren Sie Ihre Benutzeroberfläche mit den Preisen, die es braucht zum Rendern.

Unter der Haube, Apollo-Client normalisiert und speichert Ihre Daten für Sie. Versuchen Sie auf einige der Währungen, die in dem panel auf der rechten Seite zu beobachten, die Daten zu aktualisieren. Nun, wählen Sie eine Währung ein zweites mal. Beachten Sie, wie die Daten angezeigt wird, sofort? Das ist der Apollo-cache bei der Arbeit! Sie bekommen all dies kostenlos nur durch die Einrichtung von Apollo-Client ohne zusätzliche Konfiguration. 😍 Zu sehen, den code, wo wir initialisieren Apollo-Client, check out `index.js`.

3. Debug-schnell & schmerzlos mit Apollo DevTools & GraphiQL

Es sieht aus wie Apollo-Client tut viel für Sie! Wie tun wir Blick hinein zu werfen um zu verstehen, was Los ist??? Mit Funktionen wie speichern, Inspektion und vollen Einblick in Ihre Abfragen & Mutationen, Apollo DevTools nicht nur beantwortet diese Frage, sondern macht auch das Debuggen schmerzlos und, ich wage zu sagen, Spaß! 🎉 Es ist verfügbar als Erweiterung für Chrome und Firefox, mit Reagieren Nativen bald.

Wenn Sie möchten, Folgen Sie zusammen, installieren Apollo DevTools für Ihren bevorzugten browser und navigieren Sie zu unserer CodeSandbox aus dem vorherigen Beispiel. Sie müssen, um das Beispiel auszuführen, die lokal durch klicken auf Download in der oberen Navigationsleiste, entpacken Sie die Datei, ausführen von npm install, und schließlich npm start. Sobald Sie öffnen Sie Ihren browser dev tools-panel, finden Sie eine Registerkarte, die sagt Apollo.

Zuerst lassen Sie uns schauen Sie sich unsere Shop-Inspektor. Diese Reiter spiegeln, was gegenwärtig in Ihrer Apollo-Client-cache, so dass es leicht, um zu bestätigen, Ihre Daten auf dem client gespeichert wird korrekt.

Apollo-DevTools können Sie auch testen Sie Ihre Abfragen & Mutationen in GraphiQL, eine interaktive Abfrage-editor und Dokumentation explorer. In der Tat, Sie bereits verwendet GraphiQL im ersten Beispiel, wo wir experimentierten mit dem hinzufügen von Feldern auf die Abfrage. Zur Erinnerung, GraphiQL verfügt über auto-Vervollständigung, wie Sie geben Sie Ihre Anfrage in den editor und automatisch generierte Dokumentation basiert auf GraphQL Typ-system. Es ist extrem nützlich, um Ihr schema, mit zero-maintenance Aufwand für Entwickler.

Probieren Sie die Ausführung von Abfragen mit GraphiQL in der rechten Seitenwand unserer Launchpad. Zeigen Sie in der Dokumentation explorer, können Sie den Mauszeiger über die Felder in den Abfrage-editor, und klicken Sie auf den tooltip. Wenn die Abfrage erfolgreich ausgeführt wird, in GraphiQL, Sie können sein 100% positiv, dass die gleiche Abfrage wird erfolgreich ausgeführt, die in Ihrer Anwendung.

Stufe nach oben Ihre Fähigkeiten GraphQL

Wenn Sie es zu diesem Punkt gemacht, tolle Arbeit! 👏 Ich hoffe, Euch gefallen die übungen und bekam einen Geschmack von dem, was es sein würde, um die Arbeit mit GraphQL auf dem front-end.

Hungrig für mehr? 🌮 Machen Sie 2018 Ihre Auflösung des Neuen Jahres, um mehr zu erfahren über GraphQL, als ich erwarten, seine Popularität zu wachsen, noch mehr im kommenden Jahr. Hier ist eine Beispiel-app, um Sie zu erhalten begann mit den Konzepten, die wir heute gelernt:

  • Reagieren: https://codesandbox.io/s/jvlrl98xw3
  • Eckig (Ionischen): https://github.com/aaronksaunders/ionicLaunchpadApp
  • Vue: https://codesandbox.io/s/3vm8vq6kwq

Gehen Sie weiter und GraphQL (und sicher sein, zu-tag Sie uns auf @apollographql auf dem Weg)! 🚀