GraphQL-Tutorial für Anfänger: Was ist, Funktionen und Beispiele

Was ist GraphQL?

GraphQL GraphQL ist eine serverseitige Technologie der Anwendungsschicht, die von Facebook (heute Meta) entwickelt wurde, um Abfragen mit vorhandenen Daten auszuführen. Sie wurde 2015 veröffentlicht und unterliegt der GraphQL-Definition. Foundation GraphQL optimiert seit 2018 RESTful-API-Aufrufe und ermöglicht das deklarative Abrufen und Aktualisieren von Daten. Es unterstützt das Laden von Daten vom Server zum Client und gibt Programmierern die Möglichkeit, die gewünschten Anfragetypen auszuwählen.

Was muss man lernen, bevor man GraphQL lernt?

Dieses GraphQL-Tutorial basiert auf Express und NodeJs. Daher können Sie GraphQL mit einem Grundverständnis von NodeJS sehr einfach erlernen.

Warum GraphQL verwenden?

Im Folgenden sind die Gründe für die Verwendung von GraphQL aufgeführt:

• Es bietet eine für Menschen lesbare Abfrage.
• In GraphQL ist es sehr einfach, mit vielen Datenbanken zu arbeiten.
• Es eignet sich für Microservices und komplexe Systeme.
• Sie können Daten mit einem einzigen API-Aufruf abrufen.
• Es hilft Ihnen beim Batching und Caching von Abfragen.
• Sie haben keine Probleme mit Über- oder Unterlieferung.
• Anpassung der Anfragen an Ihre Bedürfnisse.
• Es hilft Ihnen, das Schema im geeigneten Format zu finden.
• GraphQL hält die Dokumentation automatisch mit API-Änderungen synchronisiert.
• Eine API-Entwicklung ist ohne Versionierung möglich.
• GraphQL-Felder werden in mehreren Abfragen verwendet, die zur Wiederverwendung auf einer höheren Komponentenebene freigegeben werden können.
• Sie können auswählen, welche Funktionen verfügbar gemacht werden sollen und wie sie funktionieren.
• Es kann für schnelle Anwendungsprototypen verwendet werden.ping.

Anwendungen von GraphQL

Hier sind die wichtigen Anwendungen von GraphQL:

• Es stellt Relay und andere Client-Frameworks bereit
• GraphQL hilft Ihnen, die Leistung der mobilen App zu verbessern.
• Es kann das Problem des übermäßigen Abrufs reduzieren, den serverseitigen Cloud-Dienst verringern und die clientseitige Netzwerknutzung verringern.
• Es kann verwendet werden, wenn die Clientanwendung angeben muss, welche Felder im langen Abfrageformat benötigt werden.
• GraphQL kann vollständig genutzt werden, wenn Sie Ihrer alten oder vorhandenen API Funktionalität hinzufügen müssen.
• Es wird verwendet, wenn Sie komplexe APIs vereinfachen müssen.
• Mischen und vermischen Sie Fassadenmuster, die häufig in der objektorientierten Programmierung verwendet werden.
• Wenn Sie Daten von mehr als einem Ort in einer praktischen API zusammenfassen müssen.
• Sie können GraphQL als absolutestraction auf einer bestehenden API, um die Antwortstruktur basierend auf den Benutzerbedürfnissen festzulegen.

Diese Vorteile beruhen allesamt auf dem Zusammenspiel dreier Faktoren.

GraphQL-Schlüsselkomponenten

In diesem GraphQL-Tutorial lernen wir nun die Schlüsselkomponenten von GraphQL kennen:

Wie in der obigen Abbildung dargestellt, gibt es drei Schlüsselkomponenten von GraphQL: 1) Abfrage, 2) Resolver und 3) Schema.

Abfrage

Die Abfrage ist eine API-Anfrage, die von der Client-Computeranwendung gestellt wird. Es unterstützt Erweiterungen und zeigt auf Arrays. Die Abfrage wird zum Lesen oder Abrufen von Werten verwendet.

Teile der Abfrage:

Im Folgenden sind die wichtigen Teile der Abfrage aufgeführt

1. Feld:

Ein Feld zeigt lediglich an, dass wir vom Server bestimmte Informationen anfordern. Im Folgenden finden Sie ein GraphQL-Beispiel für ein Feld in einer GraphQL-Abfrage.

query {
    team {
        id
        name
    }
}

Der Server antwortet mit einem JSON-Dokument, dessen Struktur der Anfrage entspricht:

{
    "data": {
        "team": [
            {
                "id": 1,
                "name": "Avengers"
            }
        ]
    }
}

Im obigen GraphQL-Beispiel fragen wir den Server nach dem Feld „Team“ und seinen Unterfeldern wie „ID“ und „Name“. Der GraphQL-Server liefert genau die angeforderten Daten.

2. Argumente

In RESTWir können nur einen einzigen Satz von Argumenten übergeben als URL Segmente und Abfrageparameter. Um ein bestimmtes Profil zu erhalten, sieht ein typischer REST-Aufruf wie folgt aus:

GET /api/team?id=2
Content-Type: application/json

{
    "id": 2,
    "name": "Justice League"
}

lösen

Resolver geben die Anweisungen zum Konvertieren von GraphQL-Operationen in Daten vor. Sie lösen die Abfrage in Daten auf, indem sie Resolverfunktionen definieren.

Es zeigt dem Server den Prozess und den Ort zum Abrufen von Daten entsprechend einem bestimmten Feld an. Der Resolver trennt außerdem Datenbankschema und API-Schema. Die getrennten Informationen helfen dabei, den aus der Datenbank erhaltenen Inhalt zu modifizieren.

Schema

Ein GraphQL-Schema ist das Zentrum der GraphQL-Implementierung. Es beschreibt die Funktionalität, die den Clients zur Verfügung steht, die eine Verbindung herstellen.

Funktionen von GraphQL

Hier sind wichtige Funktionen von GraphQL:

• Es stellt eine deklarative Abfragesprache bereit, was nicht zwingend erforderlich ist.
• Es ist hierarchisch und produktzentriert.
• GraphQL ist stark typisiert. Das bedeutet, dass Abfragen im Kontext eines bestimmten Systems ausgeführt werden.
• Abfragen in GraphQL werden im Client codiert, nicht auf dem Server.
• Es verfügt über alle Funktionen der Anwendungsschicht des OSI-Modells.

GraphQL-Clients

Der GraphQL-Client ist ein Code, der POST-Anfragen an einen relevanten GraphQL-Server sendet. Sie können eine GraphQL-API direkt abfragen, aber der gute Ansatz besteht darin, eine dedizierte Client-Bibliothek mithilfe von Relay zu nutzen.

Dieser JavaDie Skriptbibliothek wurde von Facebook entwickelt, um React-Anwendungen mit GraphQL zu erstellen. GraphQL-Clients können ein CMS wie Drupal, eine Einzelseitenanwendung, eine mobile Anwendung usw. sein.

GraphQL-Server

GraphQL-Server sind serverseitige Implementierungen der GraphQL-Spezifikation. Sie stellen Ihre Daten als GraphQL-API dar, die Ihr Clientprogramm abfragen kann. Datenbank.

GraphQL-Gateways

Gateway ist ein Microservice-Muster, mit dem ein separater Dienst zur Verwaltung anderer Backend-Dienste erstellt werden kann. Es bietet eine praktikable Dokumentation und ermöglicht das bequeme Abrufen von Daten aus mehreren Quellen mit einer einzigen Anfrage.

GraphQL bietet eine gute Möglichkeit, die dynamischen Werte aus der Abfrage auszulagern. Sie werden als separates Wörterbuch übergeben. Diese Werte werden als Variablen bezeichnet. Wenn wir mit Variablen arbeiten, müssen wir die folgenden drei Dinge beachten:

1. Ersetzen Sie den statischen Wert in der Abfrage durch einen Variablennamen.
2. Deklarieren Sie den Variablennamen als eine der Variablen, die von der GraphQL-Abfrage akzeptiert werden.
3. Übergeben Sie den Wert im transportspezifischen Variablenwörterbuch.

So sieht das Ganze zusammen aus. Zuerst die Abfrage, die die Variable deklariert:

query HeroNameAndFriends($episode: Episode) {
    hero(episode: $episode) {
        name
        friends {
            name
        }
    }
}

Dann folgt das separate Wörterbuch mit den Variablenwerten, das zusammen mit diesem gesendet wird:

{
    "episode": "JEDI"
}

Und die Antwort des Servers:

{
    "data": {
        "hero": {
            "name": "R2-D2",
            "friends": [
                { "name": "Luke Skywalker" },
                { "name": "Han Solo" },
                { "name": "Leia Organa" }
            ]
        }
    }
}

Wie Sie im obigen GraphQL-Beispiel sehen können, haben wir einfach eine andere Variable übergeben, ohne dass eine neue Abfrage erstellt werden musste.

Was ist Mutation?

Eine Mutation ist eine Möglichkeit, den Datensatz in GraphQL zu ändern. Es ändert Daten im Datenspeicher und gibt einen Wert zurück. Mutationen helfen Ihnen beim Einfügen, Aktualisieren oder Löschen von Daten. Im Allgemeinen werden Mutationen als Schemateil definiert.

Beim Entwerfen von GraphQL-Mutationen zu berücksichtigende Punkte

Hier sind die wichtigen Punkte beim Entwerfen von GraphQL:

• Benennung: Zunächst müssen Sie Ihrem Mutationsverb einen Namen geben. Dann das Substantiv oder ggf. „Objekt“. Verwenden Sie camelCase beim Benennen von Mutationen.
• Spezifität: Sie müssen so viel wie möglich mutationsspezifisch machen. Mutationen sollten semantische Aktionen des Benutzers darstellen.
• Eingabeobjekt: Verwenden Sie einen einzigen, eindeutigen, erforderlichen Eingabeobjekttyp als Argument für die Ausführung der Mutation auf dem Client.
• Einzigartiger Nutzlasttyp: Sie sollten für jede Mutation einen eindeutigen Nutzlasttyp verwenden. Sie können die Mutationsausgabe auch als Feld zu diesem bestimmten Nutzlasttyp hinzufügen.
• Verschachtelung: Nutzen Sie die Verschachtelung Ihrer Mutation überall dort, wo es sinnvoll ist. Damit können Sie die GraphQL-API vollständig nutzen.

Abfragen lesen, Änderungen schreiben. Ein dritter Operationstyp umfasst Daten, die sich ändern, während der Client noch verbunden ist.

Was ist ein Abonnement in GraphQL?

A Abonnement Das Subscription ist neben Query und Mutation der dritte Operationstyp in der GraphQL-Spezifikation. Sowohl eine Query als auch eine Mutation werden in einer einzigen Anfrage und Antwort abgeschlossen. Im Gegensatz dazu hält eine Subscription eine dauerhafte Verbindung aufrecht, üblicherweise über WebSockets, sodass der Server dem Client bei jedem Eintreten eines bestimmten Ereignisses ein neues Ergebnis sendet.

Die Syntax entspricht einer Abfrage, wobei das Schlüsselwort „subscription“ die Abfrage ersetzt:

subscription OnCommentAdded($postId: ID!) {
    commentAdded(postId: $postId) {
        id
        content
        author {
            name
        }
    }
}

In der Praxis unterscheiden sich Abonnements durch drei Punkte.

• Ereignisgesteuert, nicht abfragegesteuert: Der Client meldet sein Interesse einmalig an. Es werden keine weiteren Daten gesendet, bis der Server ein entsprechendes Ereignis veröffentlicht, was wesentlich ressourcenschonender ist als wiederholtes Abfragen.
• Ein Stammfeld pro Abonnement: Die Spezifikation erlaubt nur ein einziges Feld auf oberster Ebene, im Gegensatz zu einer Abfrage, die mehrere Felder gleichzeitig anfordern kann.
• am besten klein halten: Es werden nur die Felder angezeigt, die die Benutzeroberfläche aktualisieren muss. Typische Anwendungsfälle sind Live-Chat, Benachrichtigungen und Kursanzeigen.

Unterschied zwischen GraphQL und REST

Die folgende Tabelle zeigt wichtige Unterschiede zwischen GraphQL und REST.

Von GraphQL verwendete Open-Source-Apps und -Tools

Die wichtigsten von GraphQL verwendeten Open-Source-Apps und -Tools sind folgende:

• GatsbyGatsby ist eine GraphQL-basierte Anwendung, die Daten aus mehreren GraphQL-API-Quellen nutzen kann. Sie eignet sich zur Entwicklung statischer und clientseitiger React-Anwendungen.
• GraphiQL: Es handelt sich um eine IDE, die sich in den Browser integriert und mit der GraphQL-API interagiert. Zu den Funktionen von GraphiQL gehören Mutationen, Datenabfragen und die automatische Vervollständigung von Abfragen.
• GraphQL-Spielplatz: Es handelt sich um eine leistungsstarke IDE mit integriertem Editor für Mutationen, Validierungen, GraphQL-Abfragen, Subscriptions usw. Entwickler können mit dieser IDE die Schemastruktur visualisieren. Das Projekt wurde eingestellt, und seine Funktionen sind in GraphiQL integriert worden.
• Prisma: Prisma ist eine DatenbankabstracDie Translationsschicht wird nun als typsicheres ORM bereitgestellt und wird häufig mit einem GraphQL-Server kombiniert, um CRUD-Operationen (Erstellen, Lesen, Aktualisieren und Löschen) zu ermöglichen.
• Bit: Es handelt sich um ein Open-Source-Tool und eine Open-Source-Plattform, die wiederverwendbaren Code in Komponenten umwandelt. Entwickler können damit verschiedene Projekte teilen und entwickeln.

Häufig gestellte Fragen