Was ist GraphQL?<\/h2>\n
Aus der offiziellen Dokumentation<\/a>: „GraphQL ist eine Abfragesprache f\u00fcr APIs und eine Laufzeitumgebung, um diese Abfragen mit deinen vorhandenen Daten zu erf\u00fcllen. GraphQL liefert eine vollst\u00e4ndige und verst\u00e4ndliche Beschreibung der Daten in deiner API, gibt den Kunden die M\u00f6glichkeit, genau das abzufragen, was sie brauchen, und nicht mehr, erleichtert die Weiterentwicklung von APIs im Laufe der Zeit und erm\u00f6glicht leistungsstarke Entwicklerwerkzeuge.“<\/p>\n GraphQL ist eine serverseitige Laufzeitumgebung f\u00fcr die Ausf\u00fchrung von Abfragen unter Verwendung des Typsystems, das du f\u00fcr deine Daten definiert hast. Au\u00dferdem ist GraphQL nicht an eine bestimmte Datenbank oder Speicher-Engine gebunden. Stattdessen wird es von deinem bestehenden Code und Datenspeicher unterst\u00fctzt. Einen detaillierten Vergleich dieser Technologien findest du in der Anleitung GraphQL vs. RESTful API<\/a>.<\/p>\n Um einen GraphQL-Dienst zu erstellen, definierst du zun\u00e4chst Schematypen und erstellst Felder, die diese Typen verwenden. Als N\u00e4chstes stellst du einen Funktionsresolver bereit, der f\u00fcr jedes Feld und jeden Typ ausgef\u00fchrt wird, wenn Daten von der Client-Seite angefordert werden.<\/p>\n Das GraphQL-Typensystem wird verwendet, um zu beschreiben, welche Daten abgefragt werden k\u00f6nnen und welche Daten du manipulieren kannst. Es ist der Kern von GraphQL. Im Folgenden werden die verschiedenen M\u00f6glichkeiten zur Beschreibung und Manipulation von Daten in GraphQL erl\u00e4utert.<\/p>\n GraphQL-Objekttypen sind Datenmodelle, die stark typisierte Felder enthalten. Es sollte eine 1:1-Zuordnung zwischen deinen Modellen und GraphQL-Typen geben. Unten findest du ein Beispiel f\u00fcr einen GraphQL-Typ:<\/p>\n GraphQL Query definiert alle Abfragen, die ein Client \u00fcber die GraphQL API ausf\u00fchren kann. Du solltest eine Im Folgenden definieren wir die Abfragen und ordnen sie der entsprechenden RESTful-API zu:<\/p>\n Wenn GraphQL-Abfragen Zur Veranschaulichung f\u00fcgen wir alle Mutationen in eine einzige Sie haben die Verwendung von Du kannst die Eingabearten wie die folgende definieren:<\/p>\n Resolver sagen GraphQL, was zu tun ist, wenn eine Abfrage oder Mutation angefordert wird. Es handelt sich um eine grundlegende Funktion, die die harte Arbeit erledigt, indem sie die Datenbankschicht anspricht, um die CRUD-Operationen (Erstellen, Lesen, Aktualisieren, L\u00f6schen) auszuf\u00fchren, einen internen RESTful API-Endpunkt anspricht oder einen Microservice<\/a> aufruft, um die Anfrage des Kunden zu erf\u00fcllen.<\/p>\n Du kannst eine neue resolvers.js<\/strong>-Datei erstellen und den folgenden Code einf\u00fcgen:<\/p>\n Das GraphQL-Schema ist das, was GraphQL der Welt offenbart. Deshalb werden die Typen, Abfragen und Mutationen in das Schema aufgenommen, um der Welt offenbart zu werden.<\/p>\n Im Folgenden wird beschrieben, wie du Typen, Abfragen und Mutationen der Welt zug\u00e4nglich machst:<\/p>\n Im obigen Skript haben wir GraphQL bietet eine Implementierung f\u00fcr alle wichtigen Programmiersprachen, auch Node.js ist davon nicht ausgenommen. Auf der offiziellen GraphQL-Website<\/a> gibt es einen Abschnitt f\u00fcr die Unterst\u00fctzung von JavaScript<\/a>, und es gibt auch andere Implementierungen von GraphQL, die das Schreiben und Kodieren erleichtern.<\/p>\n GraphQL Apollo bietet eine Implementierung f\u00fcr Node.js und Express.js und macht den Einstieg in GraphQL leicht.<\/p>\n Im n\u00e4chsten Abschnitt erf\u00e4hrst du, wie du deine erste GraphQL-Anwendung in Node.js und dem Backend-Framework Express.js<\/a> mit GraphQL Apollo erstellst und entwickelst.<\/p>\n Der Aufbau eines GraphQL-API-Servers mit Express.js ist ein einfacher Einstieg. In diesem Abschnitt erfahren wir, wie man einen GraphQL-Server aufbaut.<\/p>\n Zuerst musst du ein neues Express.js Projekt installieren und einrichten. Erstelle einen Ordner f\u00fcr dein Projekt und installiere Express.js mit diesem Befehl:<\/p>\n Der obige Befehl erstellt eine neue package.json<\/strong>-Datei und installiert die Express.js-Bibliothek in deinem Projekt.<\/p>\n Als N\u00e4chstes strukturieren wir unser Projekt wie in der Abbildung unten gezeigt. Es wird verschiedene Module f\u00fcr die Funktionen des Projekts enthalten, wie z. B. Benutzer, ToDos usw.<\/p>\n Beginnen wir mit der Installation der GraphQL Express.js-Abh\u00e4ngigkeiten. F\u00fchre den folgenden Befehl aus, um sie zu installieren:<\/p>\n Als N\u00e4chstes erstellen wir eine index.js<\/strong>-Datei im modules-Ordner und f\u00fcgen den folgenden Codeschnipsel hinzu:<\/p>\n Gehen wir den Codeschnipsel durch und schl\u00fcsseln ihn auf:<\/p>\n Zuerst haben wir die erforderlichen Bibliotheken importiert und Standardabfrage- und Mutationstypen erstellt. Die Abfrage und die Mutation legen vorerst nur die Version der GraphQL API fest. Im weiteren Verlauf werden wir die Abfrage und die Mutation jedoch erweitern, um andere Schemata einzubeziehen.<\/p>\n Dann haben wir einen neuen skalaren Typ f\u00fcr Zeit und unseren ersten Resolver f\u00fcr die oben erstellte Abfrage und Mutation erstellt. Au\u00dferdem haben wir mit der Funktion Das generierte Schema enth\u00e4lt alle anderen Schemata, die wir importiert haben, und wird auch weitere enthalten, wenn wir sie erstellen und importieren.<\/p>\n Der obige Codeschnipsel zeigt, dass wir verschiedene Schemata in die Funktion makeExecutableSchema importiert haben. Dieser Ansatz hilft uns dabei, die Anwendung komplexer zu gestalten. Als N\u00e4chstes erstellen wir die Schemata Todo und User, die wir importiert haben.<\/p>\n Das Todo-Schema zeigt einfache CRUD-Operationen, die die Benutzer der Anwendung durchf\u00fchren k\u00f6nnen. Im Folgenden siehst du das Schema, das die Todo-CRUD-Operation implementiert.<\/p>\n Gehen wir das Codeschnipsel durch und schl\u00fcsseln es auf:<\/p>\n Zuerst haben wir ein Schema f\u00fcr unser Todo mit GraphQL Als N\u00e4chstes haben wir einen Resolver erstellt, mit dem wir die richtigen Daten abrufen, wenn eine bestimmte Abfrage oder Mutation aufgerufen wird.<\/p>\n Mit der Resolver-Funktion k\u00f6nnen wir einzelne Methoden f\u00fcr die Gesch\u00e4ftslogik und die Datenbankmanipulation erstellen, wie im Beispiel create-todo.js<\/strong> gezeigt.<\/p>\n Erstelle eine Datei create-user.js<\/strong> im Ordner Das obige Codeschnipsel ist eine vereinfachte Art, ein neues Todo in unserer Datenbank mit dem Sequelize ORM zu erstellen. Du kannst hier mehr \u00fcber Sequelize erfahren und wie du es mit Node.js<\/a> einrichtest.<\/p>\n Du kannst denselben Schritt befolgen, um je nach deiner Anwendung mehrere Schemata zu erstellen, oder du kannst das komplette Projekt von GitHub klonen<\/a>.<\/p>\n Als N\u00e4chstes werden wir den Server mit Express.js einrichten und die neu erstellte Todo-Anwendung mit GraphQL und Node.js ausf\u00fchren.<\/p>\nGraphQL-Terminologie<\/h2>\n
Objekttypen<\/h3>\n
type User {\n id: ID! # The \"!\" means required\n firstname: String\n lastname: String\n email: String\n username: String\n todos: [Todo] # Todo is another GraphQL type\n}<\/code><\/pre>\nAbfragen<\/h3>\n
RootQuery<\/code> definieren, die per Konvention alle bestehenden Abfragen enth\u00e4lt.<\/p>\ntype RootQuery {\n user(id: ID): User # Corresponds to GET \/api\/users\/:id\n users: [User] # Corresponds to GET \/api\/users\n todo(id: ID!): Todo # Corresponds to GET \/api\/todos\/:id\n todos: [Todo] # Corresponds to GET \/api\/todos\n}<\/code><\/pre>\nMutationen<\/h3>\n
GET<\/code> Anfragen sind, sind Mutationen POST<\/code>, PUT<\/code>, PATCH<\/code> und DELETE<\/code> Anfragen, die die GraphQL-API manipulieren.<\/p>\nRootMutation<\/code> ein:<\/p>\ntype RootMutation {\n createUser(input: UserInput!): User # Corresponds to POST \/api\/users\n updateUser(id: ID!, input: UserInput!): User # Corresponds to PATCH \/api\/users\n removeUser(id: ID!): User # Corresponds to DELETE \/api\/users\n createTodo(input: TodoInput!): Todo\n updateTodo(id: ID!, input: TodoInput!): Todo\n removeTodo(id: ID!): Todo\n}<\/code><\/pre>\n-input<\/code>-Typen f\u00fcr die Mutationen bemerkt, wie z.B. UserInput<\/code>, TodoInput<\/code>. Es ist immer die beste Praxis, Input-Typen f\u00fcr das Erstellen und Aktualisieren deiner Ressourcen zu definieren.<\/p>\ninput UserInput {\n firstname: String!\n lastname: String\n email: String!\n username: String!\n}<\/code><\/pre>\nResolver<\/h3>\n
import sequelize from '..\/models';\nexport default function resolvers () {\n const models = sequelize.models;\n return {\n \/\/ Resolvers for Queries\n RootQuery: {\n user (root, { id }, context) {\n return models.User.findById(id, context);\n },\n users (root, args, context) {\n return models.User.findAll({}, context);\n }\n },\n User: {\n todos (user) {\n return user.getTodos();\n }\n },\n }\n \/\/ Resolvers for Mutations\n RootMutation: {\n createUser (root, { input }, context) {\n return models.User.create(input, context); \n },\n updateUser (root, { id, input }, context) {\n return models.User.update(input, { ...context, where: { id } });\n },\n removeUser (root, { id }, context) {\n return models.User.destroy(input, { ...context, where: { id } });\n },\n \/\/ ... Resolvers for Todos go here\n }\n}<\/code><\/pre>\nSchema<\/h3>\n
schema {\n query: RootQuery\n mutation: RootMutation\n}<\/code><\/pre>\nRootQuery<\/code> und RootMutation<\/code>, die wir zuvor erstellt haben, f\u00fcr die Welt zug\u00e4nglich gemacht.<\/p>\nWie funktioniert GraphQL mit Node.js und Express.js?<\/h2>\n
Einrichten von GraphQL mit Express.js<\/h2>\n
Projekt mit Express initialisieren<\/h3>\n
cd <project-name> && npm init -y\nnpm install express<\/code><\/pre>\n![\"Eine](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/graphql-todo-structrue.png\")
GraphQL initialisieren<\/h3>\n
npm install apollo-server-express graphql @graphql-tools\/schema --save<\/code><\/pre>\nSchemas und Typen erstellen<\/h3>\n
const { gql } = require('apollo-server-express');\nconst users = require('.\/users');\nconst todos = require('.\/todos');\nconst { GraphQLScalarType } = require('graphql');\nconst { makeExecutableSchema } = require('@graphql-tools\/schema');\nconst typeDefs = gql`\n scalar Time\n type Query {\n getVersion: String!\n }\n type Mutation {\n version: String!\n }\n`;\nconst timeScalar = new GraphQLScalarType({\n name: 'Time',\n description: 'Time custom scalar type',\n serialize: (value) => value,\n});\nconst resolvers = {\n Time: timeScalar,\n Query: {\n getVersion: () => `v1`,\n },\n};\nconst schema = makeExecutableSchema({\n typeDefs: [typeDefs, users.typeDefs, todos.typeDefs],\n resolvers: [resolvers, users.resolvers, todos.resolvers],\n});\nmodule.exports = schema;<\/code><\/pre>\nCode-Walkthrough<\/h4>\n
Schritt 1<\/h5>\n
![\"Eine](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0-1.png\")
Schritt 2:<\/h5>\n
makeExecutableSchema<\/code>\u00a0ein Schema erstellt.<\/p>\n![\"Eine](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0-2.png\")
Todo-Schema erstellen<\/h3>\n
const { gql } = require('apollo-server-express');\nconst createTodo = require('.\/mutations\/create-todo');\nconst updateTodo = require('.\/mutations\/update-todo');\nconst removeTodo = require('.\/mutations\/delete-todo');\nconst todo = require('.\/queries\/todo');\nconst todos = require('.\/queries\/todos');\nconst typeDefs = gql`\n type Todo {\n id: ID!\n title: String\n description: String\n user: User\n }\n input CreateTodoInput {\n title: String!\n description: String\n isCompleted: Boolean\n }\n input UpdateTodoInput {\n title: String\n description: String\n isCompleted: Boolean\n } extend type Query {\n todo(id: ID): Todo!\n todos: [Todo!]\n }\n extend type Mutation {\n createTodo(input: CreateTodoInput!): Todo\n updateTodo(id: ID!, input: UpdateTodoInput!): Todo\n removeTodo(id: ID!): Todo\n }\n`;\n\/\/ Provide resolver functions for your schema fields\nconst resolvers = {\n \/\/ Resolvers for Queries\n Query: {\n todo,\n todos,\n },\n \/\/ Resolvers for Mutations\n Mutation: {\n createTodo,\n updateTodo,\n removeTodo,\n },\n};\nmodule.exports = { typeDefs, resolvers };<\/code><\/pre>\nCode-Walkthrough<\/h4>\n
Schritt 1:<\/h5>\n
type<\/code>, input<\/code> und extend<\/code> erstellt. Das Schl\u00fcsselwort extend<\/code> wird verwendet, um neue Abfragen und Mutationen an die bestehende Stammabfrage und Mutation, die wir oben erstellt haben, zu vererben und hinzuzuf\u00fcgen.<\/p>\n![\"Eine](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0-3.png\")
Schritt 2:<\/h5>\n
![\"A](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0.png\")
.\/mutations\/<\/code> und f\u00fcge die Gesch\u00e4ftslogik hinzu, um ein neues Todo in deiner Datenbank zu erstellen.<\/p>\nconst models = require('..\/..\/..\/models');\nmodule.exports = async (root, { input }, context) => {\n return models.todos.push({ ...input });\n};<\/code><\/pre>\nEinrichten und Ausf\u00fchren des Servers<\/h3>\n
![\"Eine](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/new_graphql_playground.png\")