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

Was ist GraphQL?

GraphQL ist eine serverseitige Technologie der Anwendungsschicht, die von Facebook entwickelt wurde, um Abfragen mit vorhandenen Daten auszuführen. GraphQL kann RESTful-API-Aufrufe optimieren. Es bietet eine deklarative Möglichkeit zum Abrufen und Aktualisieren Ihrer Daten. GraphQL hilft Ihnen, Daten vom Server auf den Client zu laden. Es ermöglicht Programmierern, die Arten von Anfragen auszuwählen, die sie stellen möchten.

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 umzugehen.
• 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 beim Abrufen, Über- oder Unterabruf.
• 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 das schnelle Prototyping von Anwendungen verwendet werden.

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 Abstraktion einer vorhandenen API verwenden, um die Antwortstruktur basierend auf den Benutzeranforderungen festzulegen.

Was müssen Sie lernen, bevor Sie GraphQl lernen?

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

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 gibt lediglich an, dass wir den Server nach bestimmten Informationen fragen. Nachfolgend sehen Sie ein GraphQL-Beispiel für ein Feld in einer GraphQL-Abfrage.

query {
    team {
        id name
    }
}

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

Im obigen GraphQL-Beispiel fragen wir den Server nach dem Feld namens „team“ und seinen Unterfeldern wie „id“ und „name“. Der GraphQL-Server gibt die von uns angeforderten Daten zurück.

2. Argumente

In RESTkönnen wir nur einen einzigen Satz von Argumenten als URL-Segmente und Abfrageparameter übergeben. 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. Es stellt Ihre Daten als GraphQL-API dar, die Ihr Client-Programm abfragen kann Datenbank.

GraphQL-Gateways

Gateway ist ein Microservice-Muster, bei dem Sie einen separaten Service erstellen können, um mit anderen Backend-Services zurechtzukommen. Es bietet eine praktikable Dokumentation und bietet eine bequeme Möglichkeit, mit einer einzigen Anfrage Daten aus mehr als einer Quelle zu sammeln.

GraphQL bietet eine gute Möglichkeit, die dynamischen Werte aus der Abfrage herauszulösen. Es übergibt sie als separates Wörterbuch. Diese Werte werden als Variablen bezeichnet. Wenn wir mit Variablen arbeiten, müssen wir die folgenden drei Dinge tun:

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 es insgesamt aus:

query HeroNameAndFriends($episode: Episode) {
  hero(episode: $episode) {
    name
    friends {
      name
    }
  }
}
{
  "episode": "JEDI"
}
{
  "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.

Unterschied zwischen GraphQL und REST

Die folgende Tabelle zeigt wichtige Unterschiede zwischen GraphQL und REST.

GraphQL	REST
Es folgt einer clientgesteuerten Architektur.	Es folgt einer servergesteuerten Architektur.
GraphQL kann in Form eines Schemas organisiert werden.	REST kann in Bezug auf Endpunkte organisiert werden.
GraphQL ist eine wachsende Community.	REST ist eine sehr große Community.
Die Entwicklungsgeschwindigkeit in GraphQL ist hoch.	Die Entwicklungsgeschwindigkeit in REST ist langsam.
Die Lernkurve in GraphQL ist schwierig.	Die Lernkurve in REST ist moderat.
Die Identität ist davon getrennt, wie Sie sie abrufen.	Der Endpunkt, den Sie in REST aufrufen, ist die Identität eines bestimmten Objekts.
In GraphQL bestimmt der Server die verfügbaren Ressourcen.	Form und Größe der Ressource werden vom Server in REST bestimmt.
GraphQL bietet eine hohe Konsistenz auf allen Plattformen.	Es ist schwierig, auf allen Plattformen Konsistenz zu erreichen.

Von GraphQL verwendete Open-Source-Apps und -Tools

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

• Gatsby: Gastby ist eine von GraphQL betriebene Anwendung, die Daten verwenden kann, die von mehr als einer GraphQL-API-Quelle abgeleitet sind. Sie können damit eine statische und clientbasierte React-Anwendung entwickeln.
• GraphiQL: Es handelt sich um eine ID, die sich in den Browser integriert und auch mit der API von GraphQL interagiert. Einige der Funktionen, die GraphiQL umfasst, sind Mutationen, Datenabfragen und Abfragen mit automatischer Vervollständigung.
• GraphQL-Spielplatz: Es handelt sich um eine leistungsstarke IDE mit einem integrierten Editor für die Bearbeitung von Mutationen, Validierungen, GraphQl-Abfragen, Abonnements usw. Der Entwickler kann diese IDE verwenden, um die Struktur des Schemas zu visualisieren.
• Prisma: Prisma ist eine Datenbankabstraktionsschicht, die Ihre Datenbanken mit CRUD-Operationen (Create, Read, Update und Delete) in GraphQL-APIs umwandelt.
• 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.

Zusammenfassung

• GraphQL ist eine serverseitige Technologie der Anwendungsschicht, die von Facebook entwickelt wurde, um Abfragen mit vorhandenen Daten auszuführen.
• Sie können GraphQL verwenden, um Daten mit einem einzigen API-Aufruf abzurufen.
• GraphQL hilft Ihnen, die Leistung der mobilen App zu verbessern.
• Wichtige GraphQL-Abfragekomponenten sind: 1) Abfrage, 2) Resolver, 3) Schema.
• GraphQL ist stark typisiert. Das bedeutet, dass Abfragen im Kontext eines bestimmten Systems ausgeführt werden.
• Der GraphQL-Client ist ein Code, der POST-Anfragen an einen relevanten GraphQL-Server sendet.
• GraphQL-Server sind serverseitige Implementierungen der GraphQL-Spezifikation.
• Gateway ist ein Microservice-Muster, bei dem Sie einen separaten Service erstellen können, um mit anderen Backend-Services zurechtzukommen.
• GraphQL bietet eine gute Möglichkeit, die dynamischen Werte aus der Abfrage herauszufaktorisieren.
• Eine Mutation ist eine Möglichkeit, den Datensatz in GraphQL zu ändern.
• Die wichtigen Punkte beim Entwurf von GraphQL sind: 1) Benennung, 2) Spezifität, 3) Eindeutiger Nutzlasttyp des Eingabeobjekts und 4) Verschachtelung.
• GraphQL kann in Form eines Schemas organisiert werden, während REST in Form von Endpunkten organisiert werden kann.
• Der Nachteil von GraphQL besteht darin, dass es im Backend-Teil an Ressourcen mangelt.