Guide Complet de GraphQL.
JS : De
l'Installation à l'Authentification avec
Express
Plan :
1. Introduction à [Link]
- Présentation générale et objectifs du tutoriel.
2. Prise en main
- Installation et configuration de base pour débuter avec [Link].
3. Exécution d'Express + GraphQL
- Mise en place d'un serveur GraphQL avec Express pour gérer les requêtes.
4. Clients GraphQL
- Utilisation et mise en place de clients plus avancés comme Relay pour la gestion des
requêtes.
5. Types de base
- Utilisation des types scalaires (String, Int, Float, Boolean, ID) dans la définition des
schémas.
6. Passage d'arguments
- Implémentation de fonctions prenant des arguments dans les requêtes GraphQL.
7. Types d'objets
- Définition et utilisation de types d'objets personnalisés dans les schémas GraphQL.
8. Mutations et types d'entrée
- Utilisation des mutations pour modifier les données, ainsi que des types d'entrée pour
simplifier la gestion des paramètres.
9. Authentification et Middleware
- Intégration de middleware avec GraphQL et Express pour gérer l'authentification et
d'autres fonctions de traitement des requêtes.
Démarrer avec [Link]
Prérequis
Avant de commencer, vous devez avoir Node v6 installé, bien que les exemples devraient
également fonctionner dans les versions précédentes de Node. Pour ce guide, nous
n'utiliserons pas de fonctionnalités de langage nécessitant une transpilation, mais nous
utiliserons certaines fonctionnalités ES6 comme les Promises, les classes et les fonctions
fléchées, donc si vous n'êtes pas familier avec elles, vous voudrez peut-être vous renseigner à
leur sujet d'abord.
Pour créer un nouveau projet et installer [Link] dans votre répertoire actuel :
npm init
npm install graphql --save
Écriture du code
Pour gérer les requêtes GraphQL, nous avons besoin d'un schéma qui définit le type Query, et
nous avons besoin d'une racine d'API avec une fonction appelée un "resolver" pour chaque
point de terminaison de l'API. Pour une API qui renvoie simplement "Hello world!", nous
pouvons mettre ce code dans un fichier nommé [Link] :
Explication start
---------------------------------------------------------------------------------------------
chéma GraphQL
Le schéma est une description des types de données et des opérations (queries, mutations,
etc.) que votre API GraphQL peut gérer. C'est une sorte de contrat entre le serveur et les
clients qui consomment l'API.
Dans GraphQL, le type Query est une structure spéciale qui sert de point d'entrée principal
pour lire les données. Par exemple, si vous voulez permettre aux utilisateurs de demander un
message "Hello world!", vous devez définir un type Query dans votre schéma pour cela.
Un exemple de schéma minimal pour répondre à cette requête serait :
graphql
Copier le code
type Query {
hello: String
}
Ici :
hello est une opération disponible via l'API GraphQL.
String est le type de la donnée retournée par cette opération.
2. Resolver
Un resolver est une fonction qui "résout" les requêtes GraphQL, c'est-à-dire qu'elle contient
la logique qui répond à une demande spécifique.
Dans notre exemple, un resolver pour hello pourrait simplement renvoyer la chaîne "Hello
world!".
Exemple de resolver :
javascript
Copier le code
const resolvers = {
Query: {
hello: () => 'Hello world!',
},
};
Ici :
Query correspond au type Query défini dans le schéma.
hello est une fonction qui retourne la chaîne "Hello world!".
Explication End ---------------------------------------------------------------------------------------------
javascript
var { graphql, buildSchema } = require("graphql")
// Construire un schéma en utilisant le langage de schéma GraphQL
var schema = buildSchema(`
type Query {
hello: String
}
`)
// La rootValue fournit une fonction de résolution pour chaque point de
terminaison de l'API
var rootValue = {
hello() {
return "Hello world!"
}
}
// Exécuter la requête GraphQL '{ hello }' et afficher la réponse
graphql({
schema,
source: "{ hello }",
rootValue
}).then(response => {
[Link](response)
})
Si vous exécutez ceci avec :
node [Link]
Vous devriez voir la réponse GraphQL imprimée :
json
{
"data": {
"hello": "Hello world!"
}
}
Félicitations - vous venez d'exécuter une requête GraphQL !
Pour des applications pratiques, vous voudrez probablement exécuter des requêtes GraphQL
depuis un serveur API, plutôt que d'exécuter GraphQL avec un outil en ligne de commande.
Pour utiliser GraphQL pour un serveur API sur HTTP, consultez Exécution d'un serveur
GraphQL avec Express.
Démarrer avec [Link] en utilisant Express
Prérequis
Avant de commencer, assurez-vous d'avoir [Link] installé. Vous pouvez télécharger [Link]
à partir de [Link].
Configuration de l'environnement de développement dans Visual Studio Code
1. Installer [Link] :
o Téléchargez et installez [Link] à partir de [Link].
o Vérifiez l'installation en exécutant node -v et npm -v dans votre terminal pour
vérifier les versions.
2. Installer Visual Studio Code :
o Téléchargez et installez Visual Studio Code à partir de [Link].
3. Créer un nouveau projet et installer les dépendances nécessaires :
o Ouvrez Visual Studio Code.
o Ouvrez le terminal intégré de VS Code en allant dans Affichage > Terminal
ou en utilisant le raccourci `Ctrl + ``.
o Créez un nouveau répertoire pour votre projet et naviguez à l'intérieur :
mkdir mon-projet-graphql
cd mon-projet-graphql
o Initialisez un nouveau projet [Link] :
npm init -y
o Installez Express, GraphQL et graphql-http :
npm install express graphql-http graphql --save
4. Écrire le code pour le serveur GraphQL :
o Dans VS Code, créez un nouveau fichier nommé [Link] dans le répertoire
de votre projet.
o Copiez et collez le code suivant dans [Link] :
javascript
var express = require("express")
var { createHandler } = require("graphql-http/lib/use/express")
var { buildSchema } = require("graphql")
// Construire un schéma en utilisant le langage de schéma
GraphQL
var schema = buildSchema(`
type Query {
hello: String
}
`)
// La root fournit une fonction de résolution pour chaque point
de terminaison de l'API
var root = {
hello() {
return "Hello world!"
},
}
var app = express()
// Créer et utiliser le gestionnaire GraphQL.
[Link](
"/graphql",
createHandler({
schema: schema,
rootValue: root,
})
)
// Démarrer le serveur sur le port 4000
[Link](4000)
[Link]("Running a GraphQL API server at
[Link]
5. Exécuter le serveur :
o Assurez-vous que votre terminal est dans le répertoire de votre projet.
o Exécutez le fichier [Link] avec [Link] :
node [Link]
6. Vous devriez voir le message suivant dans le terminal :
Running a GraphQL API server at [Link]
Utiliser GraphiQL
GraphiQL est l'IDE de GraphQL, un excellent moyen de requêter et d'explorer votre API
GraphQL.
1. Installer le module ruru :
o Installez ruru avec npm :
npm install --save ruru
2. Ajouter GraphiQL à votre serveur :
o Ajoutez le code suivant à votre fichier [Link] :
javascript
var { ruruHTML } = require("ruru/server")
// Servir l'IDE GraphiQL.
[Link]("/", (_req, res) => {
[Link]("html")
[Link](ruruHTML({ endpoint: "/graphql" }))
})
3. Redémarrer le serveur :
o Arrêtez le serveur en cours en appuyant sur Ctrl + C dans le terminal.
o Redémarrez le serveur :
node [Link]
4. Accéder à l'interface GraphiQL :
o Ouvrez votre navigateur et accédez à [Link] Vous devriez voir
une interface qui vous permet de saisir des requêtes GraphQL.
Félicitations, vous avez maintenant un serveur GraphQL en cours d'exécution et une interface
GraphiQL pour explorer votre API ! Le prochain étape est d'apprendre comment émettre des
requêtes GraphQL depuis le code client.
