GraphQL - Beispiel

In diesem Kapitel erstellen wir eine einfache API, die eine Begrüßungsnachricht, HelloWorld, zurückgibt und mit GraphiQL darauf zugreift.

Beispiel

Dieses Beispiel basiert auf NodeJS-, Express- und Apollo-Servern. Wir werden lernen, alle Konzepte mit den folgenden Schritten zusammenzufügen:

Schritt 1 - Express einrichten

ExpressJS ist ein Webanwendungsframework, mit dem Websites und Webanwendungen erstellt werden können. In diesem Beispiel erstellen wir eine GraphQL-API auf dem Express-Framework.

Der nächste Schritt besteht darin, einen Ordner zu erstellen hello-world-serverund navigieren Sie vom Terminal zum selben Ordner. Fügen Sie package.json hinzu und geben Sie dem Paket einen Namen. Da dieses Paket nur intern verwendet wird, können wir es als privat deklarieren.

{
   "name":"hello-world-server",
   "private":true
}

Installieren Sie die Abhängigkeiten für den Express-Server wie unten gezeigt -

C:\Users\Admin\hello-world-server>npm install express body-parser cors

body-parser ist ein Middleware-Paket, mit dem Express HTTP-Post-Anforderungen effizient bearbeiten kann. cors ist ein weiteres Middleware-Paket, das die gemeinsame Nutzung von Ressourcen zwischen verschiedenen Ursprüngen übernimmt.

Ein ... kreieren server.js Datei im Projektordner und geben Sie Folgendes ein -

const bodyParser = require('body-parser')
   const cors = require('cors')
   const express = require('express')
   const port = process.env.PORT|| 9000
   const app = express()
   
   //register middleware
   app.use(bodyParser.json() , cors())
   app.listen(port, () =>  console.log(`server is up and running at ${port}`)

Führen Sie den folgenden Code im Terminalfenster aus, um zu überprüfen, ob der Express-Server betriebsbereit ist:

C:\Users\Admin\hello-world-server>node server.js

Die folgende Ausgabe wird in der Serverkonsole angezeigt. Dies zeigt, dass der Express-Server auf Port 9000 ausgeführt wird.

server is up and running at 9000

Wenn Sie den Browser öffnen und eingeben http://localhost:9000erhalten Sie den folgenden Bildschirm -

Drücken Sie, um den Server zu stoppen Ctrl + C.

Schritt 2 - Installieren Sie GraphQL und Apollo Server

Nachdem Express konfiguriert wurde, müssen Sie im nächsten Schritt die folgenden GraphQL-Abhängigkeiten herunterladen:

graphql
graphql-tools
apollo-server-express@1

Wir werden Apollo Server v1.0 verwenden, da es sich um eine stabile Version handelt. Geben Sie die folgenden Befehle ein, um diese Abhängigkeiten zu installieren:

C:\Users\Admin\hello-world-server>npm install graphql graphql-tools apollo-server-express@1

Wir können überprüfen, ob diese Abhängigkeiten erfolgreich installiert wurden, indem wir das überprüfen package.json Datei, die wir zuvor erstellt haben.

{
   "name": "hello-world-server",
   "private": true,
   
   "dependencies": {
      "apollo-server-express": "^1.4.0",
      "body-parser": "^1.18.3",
      "cors": "^2.8.4",
      "express": "^4.16.3",
      "graphql": "^0.13.2",
      "graphql-tools": "^3.1.1"
   }
}

Schritt 3 - Definieren Sie das Schema

Ein GraphQL-Schema definiert, welche Art von Objekt von einem Dienst abgerufen werden kann und welche Felder es hat. Das Schema kann mit definiert werdenGraphQL Schema Definition Language. Fügen Sie nun das folgende Code-Snippet in das Feld einserver.js Datei -

// Adding Type Definitions
const typeDefinition = `
   type Query  {
      greeting: String
   }

Hier enthält die Abfrage ein Begrüßungsattribut , das einen Zeichenfolgenwert zurückgibt .

Schritt 4 - Erstellen Sie einen Resolver

Der erste Schritt beim Erstellen eines Resolvers besteht darin, Code hinzuzufügen, um das Anforderungsanforderungsfeld zu verarbeiten. Dies ist in a angegebenresolver. Die Struktur der Resolverfunktion muss mit dem Schema übereinstimmen. Fügen Sie das folgende Code-Snippet in das Feld einserver.js Datei.

// Adding resolver
const  resolverObject = {
   Query : {
      greeting: () => 'Hello GraphQL  From TutorialsPoint !!'
   }
}

Der zweite Schritt besteht darin, das Schema und den Resolver mit zu binden makeExecutableSchema. Diese Funktion ist im Modul graphql-tools vordefiniert. Fügen Sie das folgende Code-Snippet in das Feld ein server.js Datei.

const {makeExecutableSchema} = require('graphql-tools')
const schema = makeExecutableSchema({typeDefs:typeDefinition, resolvers:resolverObject})

Schritt 5 - Definieren Sie Routen zum Abrufen von Daten aus der ReactJS / GraphiQL-Anwendung

Fügen Sie das folgende Code-Snippet in das Feld ein server.js Datei -

const {graphqlExpress, graphiqlExpress} = require('apollo-server-express')

   //create routes for graphql and graphiql
   app.use('/graphql',graphqlExpress({schema}))
   
   app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))

Die Funktion graphqlExpress hilft beim Registrieren der Routehttp://localhost:9000/graphql. Die ReactJS-Anwendung kann diesen Endpunkt zum Abfragen von Daten verwenden. Ebenso hilft die graphqliExpress- Funktion beim Registrieren der Routehttp://localhost:9000/graphiql. Dies wird vom GraphiQL-Browser-Client zum Testen der API verwendet.

Der vollständige server.js-Code lautet wie folgt:

const bodyParser = require('body-parser')
const cors = require('cors')
const express = require('express')
const port = process.env.PORT||9000
const app = express()

app.use(bodyParser.json() , cors())
const typeDefinition = `
type Query  {
   greeting: String
}`
const  resolverObject = {
   Query : {
      greeting: () => 'Hello GraphQL  From TutorialsPoint !!'
   }
}
const {makeExecutableSchema} = require('graphql-tools')

const schema = makeExecutableSchema({typeDefs:typeDefinition, resolvers:resolverObject})

const {graphqlExpress,graphiqlExpress} = require('apollo-server-express')

app.use('/graphql',graphqlExpress({schema}))
app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))
app.listen(port, () =>  console.log(`server is up and running ${port}`))

Schritt 6 - Starten Sie die Anwendung

Ausführen server.js Verwenden von Node.js wie folgt -

C:\Users\Admin\hello-world-server>node server.js

Schritt 7 - Testen Sie die GraphQL-API

Öffnen Sie den Browser und geben Sie ein http://localhost:9000/graphiql. Geben Sie auf der Registerkarte "Abfrage" von GraphiQL Folgendes ein:

{
   greeting
}

Die Antwort vom Server ist unten angegeben -

{
   "data": {
      "greeting": "Hello GraphQL From TutorialsPoint !!"
   }
}

Das folgende Bild zeigt die Antwort -

Note - Stellen Sie sicher, dass Apollo Server Version 1.0 verwendet wird.