GraphQL - Exemple

Dans ce chapitre, nous allons créer une API simple qui renvoie un message d'accueil, HelloWorld, et y accéder en utilisant GraphiQL.

Exemple

Cet exemple est basé sur les serveurs NodeJS, Express et Apollo. Nous apprendrons à rassembler tous les concepts avec les étapes suivantes -

Étape 1 - Configuration d'Express

ExpressJS est un cadre d'application Web qui aide à créer des sites Web et des applications Web. Dans cet exemple, nous allons créer une API GraphQL au-dessus du framework Express.

La prochaine étape consiste à créer un dossier hello-world-serveret accédez au même dossier depuis le terminal. Ajoutez package.json et donnez un nom au package. Comme ce package n'est utilisé qu'en interne, nous pouvons le déclarer privé.

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

Installez les dépendances pour le serveur Express comme indiqué ci-dessous -

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

body-parser est un package middleware qui aide Express à gérer efficacement les requêtes HTTP Post. cors est un autre package middleware qui gère le partage de ressources entre origines.

Créer un server.js fichier dans le dossier du projet et tapez ce qui suit -

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}`)

Pour vérifier si le serveur Express est opérationnel, exécutez le code suivant dans la fenêtre du terminal -

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

La sortie suivante s'affiche dans la console du serveur. Cela montre que le serveur express fonctionne sur le port 9000.

server is up and running at 9000

Si vous ouvrez le navigateur et tapez http://localhost:9000, vous obtiendrez l'écran suivant -

Pour arrêter le serveur, appuyez sur Ctrl + C.

Étape 2 - Installez GraphQL et Apollo Server

Maintenant qu'Express est configuré, l'étape suivante consiste à télécharger les dépendances GraphQL suivantes -

graphql
graphql-tools
[email protected]

Nous utiliserons le serveur Apollo v1.0 car il s'agit d'une version stable. Tapez les commandes suivantes pour installer ces dépendances -

C:\Users\Admin\hello-world-server>npm install graphql graphql-tools [email protected]

Nous pouvons vérifier si ces dépendances sont installées avec succès en vérifiant le package.json fichier que nous avons créé précédemment.

{
   "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"
   }
}

Étape 3 - Définissez le schéma

Un schéma GraphQL définit le type d'objet qui peut être récupéré à partir d'un service et les champs dont il dispose. Le schéma peut être défini en utilisantGraphQL Schema Definition Language. Maintenant, ajoutez l'extrait de code suivant dans leserver.js fichier -

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

Ici, la requête contient un attribut de salutation qui renvoie une valeur de chaîne .

Étape 4 - Créer un résolveur

La première étape de la création d'un résolveur consiste à ajouter du code pour traiter la demande de champ de message d'accueil. Ceci est spécifié dans unresolver. La structure de la fonction de résolution doit correspondre au schéma. Ajoutez l'extrait de code suivant dans leserver.js fichier.

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

La deuxième étape consiste à lier le schéma et le résolveur en utilisant makeExecutableSchema. Cette fonction est prédéfinie dans le module graphql-tools. Ajoutez l'extrait de code suivant dans le server.js fichier.

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

Étape 5 - Définissez les routes pour récupérer les données de l'application ReactJS / GraphiQL

Ajoutez l'extrait de code suivant dans le server.js fichier -

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

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

La fonction graphqlExpress permet d'enregistrer l'itinérairehttp://localhost:9000/graphql. L'application ReactJS peut utiliser ce point de terminaison pour interroger des données. De même, la fonction graphqliExpress permet d'enregistrer l'itinérairehttp://localhost:9000/graphiql. Cela sera utilisé par le client du navigateur GraphiQL pour tester l'API.

Le code server.js complet est comme indiqué ci-dessous -

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}`))

Étape 6 - Démarrez l'application

Exécuter server.js en utilisant Node.js comme suit -

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

Étape 7 - Testez l'API GraphQL

Ouvrez le navigateur et saisissez http://localhost:9000/graphiql. Dans l'onglet de requête de GraphiQL, saisissez ce qui suit -

{
   greeting
}

La réponse du serveur est donnée ci-dessous -

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

L'image suivante illustre la réponse -

Note - Veuillez vous assurer que Apollo Server version 1.0 est utilisé.

↰ Previous page Next page ↱