Also, worüber höre ich immer wieder GraphQL?

Also, worüber höre ich immer wieder GraphQL?

Wenn Sie wie ich sind, durchlaufen Sie wahrscheinlich drei Phasen, wenn Sie von einer neuen Technologie hören:

1. Entlassung

Noch eine JavaScript-Bibliothek?! Verwenden Sie einfach jQuery bereits!

2. Zinsen

Hmm, vielleicht sollte ich mir diese neue Bibliothek ansehen, von der ich immer wieder höre ...

3. Panik

Hilfe! Ich muss diese neue Bibliothek jetzt lernen, sonst bin ich völlig veraltet!

Der Trick, um in diesen schnelllebigen Zeiten Ihre geistige Gesundheit zu erhalten, besteht darin, zwischen den Phasen zwei und drei neue Dinge zu lernen, sobald Ihr Interesse geweckt ist, Sie aber noch der Kurve voraus sind.

Aus diesem Grund ist jetzt der perfekte Zeitpunkt, um zu erfahren, was genau diese GraphQL-Sache ist, von der Sie immer wieder hören.

Die Grundlagen

Kurz gesagt, GraphQL ist eine Syntax, die beschreibt, wie Daten angefordert werden , und wird im Allgemeinen zum Laden von Daten von einem Server auf einen Client verwendet. GraphQL hat drei Hauptmerkmale:

  • Damit kann der Client genau angeben, welche Daten er benötigt.
  • Dies erleichtert das Aggregieren von Daten aus mehreren Quellen.
  • Es verwendet ein Typsystem zur Beschreibung von Daten.

Wie hat GraphQL angefangen? Wie sieht es in der Praxis aus? Und wie fangen Sie an, es zu benutzen? Lesen Sie weiter, um es herauszufinden!

Das Problem

GraphQL hat seinen Anfang bei großen alten Facebook-Anbietern gemacht, aber selbst viel einfachere Apps können häufig auf die Einschränkungen herkömmlicher REST-APIs stoßen.

Stellen Sie sich zum Beispiel vor, Sie müssen eine Liste postsund unter jedem Beitrag eine Liste likesmit Benutzernamen und Avataren anzeigen . Ganz einfach, Sie optimieren Ihre postsAPI so, dass sie ein likesArray enthält, das Benutzerobjekte enthält:

Aber jetzt ist es Zeit, an Ihrer mobilen App zu arbeiten, und es stellt sich heraus, dass das Laden all dieser zusätzlichen Daten die Dinge verlangsamt. Sie benötigen jetzt zwei Endpunkte, einen mit likesund einen ohne.

Fügen Sie dem Mix nun einen weiteren Faktor hinzu: Es stellt sich heraus, dass Sie zwar postsin einer MySQL-Datenbank gespeichert sind, aber likesandererseits in einem Redis-Store leben! Was tust du jetzt?!

Extrapolieren Sie dieses Szenario auf so viele Datenquellen und API-Clients, die Facebook verwalten muss, und Sie können sich vorstellen, warum gute alte REST-APIs ihre Grenzen zeigten.

Die Lösung

Die von Facebook entwickelte Lösung ist konzeptionell sehr einfach: Anstatt mehrere „dumme“ Endpunkte zu haben, sollten Sie einen einzigen „intelligenten“ Endpunkt haben, der komplexe Abfragen aufnehmen kann, und dann die Datenausgabe in die vom Kunden gewünschte Form bringen.

In der Praxis befindet sich die GraphQL-Schicht zwischen dem Client und einer oder mehreren Datenquellen, empfängt Clientanforderungen und ruft die erforderlichen Daten gemäß Ihren Anweisungen ab. Verwirrt? Es ist Metapherzeit!

Das alte REST-Modell ist so, als würde man Pizza bestellen, dann Lebensmittel liefern lassen und dann die chemische Reinigung anrufen, um die Kleidung zu holen. Drei Geschäfte, drei Anrufe.

GraphQL hingegen ist wie ein persönlicher Assistent: Wenn Sie ihnen die Adressen aller drei Orte gegeben haben, können Sie einfach nach Ihren Wünschen fragen („Holen Sie mir meine chemische Reinigung, eine große Pizza und zwei Dutzend Eier“). ) und warten Sie, bis sie zurückkehren.

Mit anderen Worten, GraphQL etabliert eine Standardsprache für das Gespräch mit diesem magischen persönlichen Assistenten.

In der Praxis besteht eine GraphQL-API aus drei Hauptbausteinen: dem Schema , den Abfragen und den Resolvern .

Abfragen

Die Anfrage, die Sie an Ihren persönlichen GraphQL-Assistenten richten, ist die Abfrage und sieht ungefähr so aus:

query { stuff}

Wir deklarieren eine neue Abfrage mit dem querySchlüsselwort und fragen dann nach einem Feld mit dem Namen stuff. Das Tolle an GraphQL-Abfragen ist, dass sie verschachtelte Felder unterstützen, sodass wir eine Ebene tiefer gehen können:

query { stuff { eggs shirt pizza }}

Wie Sie sehen, muss sich der Client, der die Abfrage durchführt, nicht darum kümmern, aus welchem ​​„Shop“ die Daten stammen. Fragen Sie einfach nach Ihren Anforderungen und lassen Sie den GraphQL-Server den Rest erledigen.

Es ist erwähnenswert, dass Abfragefelder auch auf Arrays verweisen können . Hier ist beispielsweise ein allgemeines Muster bei der Abfrage einer Liste von Posts:

query { posts { # this is an array title body author { # we can go deeper! name avatarUrl profileUrl } }}

Abfragefelder unterstützen auch Argumente . Wenn ich einen bestimmten Beitrag anzeigen möchte, kann ich iddem postFeld ein Argument hinzufügen :

query { post(id: "123foo"){ title body author{ name avatarUrl profileUrl } }}

Wenn ich dieses idArgument dynamisch gestalten möchte , kann ich eine Variable definieren und sie dann in der Abfrage wiederverwenden (beachten Sie, dass wir die Abfrage auch hier benennen ):

query getMyPost($id: String) { post(id: $id){ title body author{ name avatarUrl profileUrl } }}

Eine gute Möglichkeit, dies alles in die Praxis umzusetzen, ist die Verwendung des GraphQL API Explorers von GitHub. Probieren Sie beispielsweise die folgende Abfrage aus:

query { repository(owner: "graphql", name: "graphql-js"){ name description }}

Beachten Sie description, dass die IDE beim Eingeben eines neuen Feldnamens automatisch mögliche Feldnamen anbietet, die direkt von der GraphQL-API selbst automatisch vervollständigt werden. Ordentlich!

Weitere Informationen zu GraphQL-Abfragen finden Sie in der hervorragenden Anatomie eines GraphQL-Abfrage-Artikels.

Resolver

Selbst der beste persönliche Assistent der Welt kann Ihre chemische Reinigung nur durchführen, wenn Sie ihm eine Adresse geben.

Ebenso weiß Ihr GraphQL-Server nicht, was mit einer eingehenden Abfrage zu tun ist, es sei denn, Sie teilen dies mit einem Resolver mit .

Ein Resolver teilt GraphQL mit, wie und wo die einem bestimmten Feld entsprechenden Daten abgerufen werden sollen. So könnte beispielsweise ein Resolver für das postobige Feld aussehen (unter Verwendung des GraphQL-Tools-Schema-Generators von Apollo):

Query: { post(root, args) { return Posts.find({ id: args.id }); }}

Wir setzen den Resolver ein, Queryweil wir postdirekt auf der Stammebene nachfragen möchten . Sie können aber auch Resolver haben für Unterfelder, wie zum Beispiel ein post‚s authorFeld:

Query: { post(root, args) { return Posts.find({ id: args.id }); }},Post: { author(post) { return Users.find({ id: post.authorId}) }}

Beachten Sie auch, dass Ihre Resolver nicht auf die Rückgabe von Datenbankdokumenten beschränkt sind. Vielleicht möchten Sie commentsCountIhrem PostTyp beispielsweise ein hinzufügen :

Post: { author(post) { return Users.find({ id: post.authorId}) }, commentsCount(post) { return Comments.find({ postId: post.id}).count() }}

Das Schlüsselkonzept, das hier zu verstehen ist, ist, dass mit GraphQL Ihr API-Schema und Ihre Datenbankschemata entkoppelt sind . Mit anderen Worten, es könnte nicht sein authorund commentsCountFelder in unserer Datenbank, aber wir können „simulieren“ , um sie durch die Kraft von Resolvern.

Wie Sie gesehen haben, können Sie jeden gewünschten Code in einen Resolver schreiben. Aus diesem Grund können Sie sie auch dazu bringen, den Inhalt Ihrer Datenbank zu ändern. In diesem Fall werden sie als Mutationsauflöser bezeichnet .

Schema

All diese guten Dinge werden durch das typisierte Schemasystem von GraphQL ermöglicht. Mein heutiges Ziel ist es, Ihnen einen schnellen Überblick zu geben, mehr als eine ausführliche Einführung, daher werde ich hier nicht auf Details eingehen.

Abgesehen davon empfehle ich Ihnen, die GraphQL-Dokumentation zu lesen, wenn Sie mehr erfahren möchten.

Häufig gestellte Fragen

Machen wir eine Pause, um einige häufig gestellte Fragen zu beantworten.

Du da hinten. Ja du. Ich kann sehen, dass du etwas fragen willst. Mach weiter, sei nicht schüchtern!

Welche Beziehung besteht zwischen GraphQL und Graphendatenbanken?

GraphQL hat eigentlich nicht viel mit Graphendatenbanken wie Neo4j zu tun. Der Teil „Diagramm“ basiert auf der Idee, mithilfe von Feldern und Unterfeldern über Ihr API-Diagramm zu crawlen. während "QL" für "Abfragesprache" steht.

Ich bin vollkommen zufrieden mit REST. Warum sollte ich zu GraphQL wechseln?

Wenn Sie noch nicht auf die REST-Schwachstellen gestoßen sind, die GraphQL ansprechen soll, dann würde ich sagen, dass das eine gute Sache ist!

Die Verwendung von GraphQL über REST wirkt sich wahrscheinlich nicht so stark auf die allgemeine Benutzererfahrung Ihrer App aus. Der Wechsel zu GraphQL ist also keineswegs eine Frage von Leben oder Tod. Abgesehen davon würde ich definitiv empfehlen, GraphQL in einem kleinen Nebenprojekt auszuprobieren, wenn Sie jemals die Chance dazu bekommen.

Kann ich GraphQL ohne React / Relay / * Bibliothek hier einfügen * verwenden?

Ja, du kannst! Da GraphQL nur eine Spezifikation ist, können Sie es mit jeder Bibliothek auf jeder Plattform verwenden, entweder mit einem Client (zum Beispiel hat Apollo GraphQL-Clients für das Web, iOS, Angular usw.) oder indem Sie selbst GraphQL aufrufen Server.

GraphQL wurde von Facebook erstellt und ich vertraue Facebook nicht

Auch hier ist GraphQL eine Spezifikation, dh Sie können GraphQL-Implementierungen verwenden, ohne eine einzige von Facebook geschriebene Codezeile auszuführen.

Und obwohl die Unterstützung von Facebook definitiv ein gutes Plus für das GraphQL-Ökosystem ist, glaube ich, dass die Community an diesem Punkt groß genug ist, damit GraphQL gedeihen kann, selbst wenn Facebook es nicht mehr nutzt.

Das ganze Geschäft „Lassen Sie den Kunden nach den Daten fragen, die er benötigt“ klingt für mich nicht sehr sicher…

Da Sie Ihre eigenen Resolver schreiben, liegt es an Ihnen, alle Sicherheitsbedenken auf dieser Ebene auszuräumen.

Wenn Sie beispielsweise den Client einen limitParameter angeben lassen , um die Anzahl der empfangenen Dokumente zu steuern, möchten Sie diese Anzahl wahrscheinlich begrenzen, um Denial-of-Service-Angriffe zu vermeiden, bei denen Clients immer wieder Millionen von Dokumenten anfordern.

Was brauche ich also, um loszulegen?

Im Allgemeinen benötigen Sie mindestens zwei Komponenten, um eine GraphQL-basierte App auszuführen:

  • Ein GraphQL-Server , der Ihre API bedient.
  • Ein GraphQL-Client , der eine Verbindung zu Ihrem Endpunkt herstellt.

Lesen Sie weiter, um mehr über die verschiedenen verfügbaren Optionen zu erfahren.

Nachdem Sie eine gute Vorstellung davon haben, wie GraphQL funktioniert, lassen Sie uns über einige der Hauptakteure im Raum sprechen.

GraphQL-Server

Der erste Baustein, den Sie benötigen, ist ein GraphQL-Server. GraphQL selbst ist schließlich nur eine Spezifikation, so dass einige konkurrierende Implementierungen offen bleiben.

GraphQL-JS (Knoten)

Dies ist die ursprüngliche Referenzimplementierung von GraphQL. Sie können es zusammen mit express-graphql verwenden, um Ihren API-Server zu erstellen.

GraphQL-Server (Knoten)

Das Apollo-Team verfügt außerdem über eine eigene All-in-One-Implementierung eines GraphQL-Servers. Es ist noch nicht so weit verbreitet wie das Original, aber es ist sehr gut dokumentiert und unterstützt und gewinnt schnell an Boden.

Andere Plattformen

GraphQL.org bietet eine Liste von GraphQL-Implementierungen für verschiedene andere Plattformen (PHP, Ruby usw.).

GraphQL-Clients

Obwohl Sie Ihre GraphQL-API technisch direkt abfragen können, ohne eine dedizierte Client-Bibliothek zu benötigen, kann dies Ihr Leben definitiv erleichtern.

Relais

Relay ist das GraphQL-Toolkit von Facebook. Ich habe es selbst nicht benutzt, aber nach allem, was ich gehört habe, ist es hauptsächlich auf die eigenen Bedürfnisse von Facebook zugeschnitten und für die meisten Verwendungen möglicherweise etwas überentwickelt.

Apollo Client

Der Neuzugang in diesem Bereich ist Apollo, und es wird schnell übernommen. Der typische Apollo-Client-Stack besteht aus zwei Bausteinen:

  • Apollo-Client, mit dem Sie GraphQL-Abfragen im Browser ausführen und deren Daten speichern können (und der über eine eigene devtools-Erweiterung verfügt).
  • Ein Anschluss für das Front-End-Framework Ihrer Wahl (React-Apollo, Angular-Apollo usw.).

Beachten Sie, dass Apollo-Client seine Daten standardmäßig mit Redux speichert. Dies ist großartig, da Redux selbst eine ziemlich etablierte State-Management-Bibliothek mit einem reichen Ökosystem ist.

Open-Source-Apps

Obwohl GraphQL ziemlich neu ist, gibt es bereits einige vielversprechende Open-Source-Apps, die davon Gebrauch machen.

VulcanJS

Zunächst ein Haftungsausschluss: Ich bin der Hauptbetreuer von VulcanJS. Ich habe VulcanJS erstellt, damit die Benutzer die Leistung des React / GraphQL-Stacks nutzen können, ohne so viel Boilerplate schreiben zu müssen. Sie können es sich als „Schienen für das moderne Web-Ökosystem“ vorstellen, da Sie damit in wenigen Stunden CRUD-Apps (z. B. einen Instagram-Klon) erstellen können.

Gatsby

Gatsby ist ein statischer Site-Generator von React, der ab Version 1.0 von GraphQL unterstützt wird. Während das auf den ersten Blick wie eine seltsame Kombination erscheinen mag, ist es tatsächlich ziemlich mächtig. Während des Erstellungsprozesses kann Gatsby Daten von mehreren GraphQL-APIs abrufen und diese dann verwenden, um eine vollständig statische React-App nur für Clients zu erstellen.

Andere GraphQL-Tools

GraphiQL

GraphiQL ist eine sehr praktische Browser-IDE zum Abfragen von GraphQL-Endpunkten.

DataLoader

Aufgrund der Verschachtelung von GraphQL-Abfragen kann eine einzelne Abfrage leicht Dutzende von Datenbankaufrufen auslösen. Um Leistungseinbußen zu vermeiden, können Sie eine von Facebook entwickelte Batching- und Caching-Bibliothek wie DataLoader verwenden.

Erstellen Sie GraphQL Server

Create GraphQL Server ist ein Befehlszeilenprogramm, mit dem ein GraphQL-Server, der von einem Node-Server und einer Mongo-Datenbank betrieben wird, schnell und einfach erstellt werden kann.

GraphQL-up

Ähnlich wie bei Create GraphQL Server können Sie mit GraphQL-up schnell ein neues GraphQL-Back-End booten, das auf dem GraphCool-Dienst basiert.

GraphQL-Dienste

Schließlich gibt es auch eine Reihe von „GraphQL-Backend-as-a-Service“ -Unternehmen, die sich für Sie um die gesamte Serverseite kümmern und möglicherweise eine gute Möglichkeit sind, Ihre Zehen in das GraphQL-Ökosystem einzutauchen.

Graphcool

Eine flexible Backend-Plattform, die GraphQL und AWS Lambda mit einem kostenlosen Entwicklerplan kombiniert.

Scaphold

Ein weiteres GraphQL-Backend als Service, das ebenfalls einen kostenlosen Plan hat. Es bietet viele der gleichen Funktionen wie Graphcool.

Es gibt bereits einige Stellen, an denen Sie GraphQL auffrischen können.

GraphQL.org

Die offizielle GraphQL-Site enthält einige großartige Dokumentationen, die Ihnen den Einstieg erleichtern.

LearnGraphQL

LearnGraphQL ist ein interaktiver Kurs, der von den Leuten bei Kadira zusammengestellt wurde.

LearnApollo

LearnApollo ist eine gute Fortsetzung von LearnGraphQL und ein kostenloser Kurs von Graphcool.

Der Apollo-Blog

Der Apollo-Blog enthält unzählige detaillierte, gut geschriebene Beiträge zu Apollo und GraphQL im Allgemeinen.

GraphQL Weekly

Ein Newsletter über alles, was GraphQL vom Graphcool-Team kuratiert hat.

Hashbang Weekly

Ein weiterer großartiger Newsletter, der neben GraphQL auch React und Meteor behandelt.

Freecom

Eine Tutorial-Reihe, in der Sie lernen, wie Sie einen Intercom-Klon mit GraphQL erstellen.

Geniales GraphQL

Eine ziemlich umfassende Liste von GraphQL-Links und -Ressourcen.

Wie setzen Sie Ihr neu erworbenes GraphQL-Wissen in die Praxis um? Hier sind einige Rezepte, die Sie ausprobieren können:

Apollo + Graphcool + Next.js

Wenn Sie bereits mit Next.js und React vertraut sind, können Sie in diesem Beispiel Ihren GraphQL-Endpunkt mit Graphcool einrichten und dann mit Apollo abfragen.

VulcanJS

Das Vulcan-Tutorial führt Sie durch das Einrichten einer einfachen GraphQL-Datenschicht sowohl auf dem Server als auch auf dem Client. Da Vulcan eine All-in-One-Plattform ist, ist dies eine gute Möglichkeit, ohne Setup loszulegen. Wenn Sie Hilfe benötigen, zögern Sie nicht, unseren Slack-Kanal zu besuchen!

GraphQL & React Tutorial

Der Chroma-Blog enthält ein sechsteiliges Tutorial zum Erstellen einer React / GraphQL-App nach einem komponentengesteuerten Entwicklungsansatz.

Fazit

GraphQL mag zunächst komplex erscheinen, da es sich um eine Technologie handelt, die sich über viele Bereiche der modernen Entwicklung erstreckt. Wenn Sie sich jedoch die Zeit nehmen, die zugrunde liegenden Konzepte zu verstehen, werden Sie feststellen, dass vieles davon nur Sinn macht.

Egal, ob Sie es tatsächlich verwenden oder nicht, ich glaube, es lohnt sich, sich die Zeit zu nehmen, um sich mit GraphQL vertraut zu machen. Immer mehr Unternehmen und Frameworks übernehmen es, und es könnte in den nächsten Jahren zu einem der wichtigsten Bausteine ​​des Web werden.

Zustimmen? Nicht zustimmen? Fragen? Lass es mich hier in den Kommentaren wissen. Und wenn Ihnen dieser Artikel gefallen hat, denken Sie bitte darüber nach, ihn zu teilen!