Qu’est-ce que GraphQL ?<\/h2>\n
Extrait de la documentation officielle<\/a>: \u00ab GraphQL est un langage de requ\u00eate pour les API et un runtime pour remplir ces requ\u00eates avec vos donn\u00e9es existantes. GraphQL fournit une description compl\u00e8te et compr\u00e9hensible des donn\u00e9es de votre API, donne aux clients le pouvoir de demander exactement ce dont ils ont besoin et rien de plus, facilite l’\u00e9volution des API au fil du temps et permet d’utiliser de puissants outils de d\u00e9veloppement. \u00bb<\/p>\n GraphQL est un runtime c\u00f4t\u00e9 serveur permettant d’ex\u00e9cuter des requ\u00eates \u00e0 l’aide du syst\u00e8me de types que vous avez d\u00e9fini pour vos donn\u00e9es. En outre, GraphQL n’est pas li\u00e9 \u00e0 une base de donn\u00e9es ou \u00e0 un moteur de stockage sp\u00e9cifique. Au lieu de cela, il s’appuie sur votre code et votre magasin de donn\u00e9es existants. Vous pouvez obtenir une comparaison d\u00e9taill\u00e9e de ces technologies avec le guide GraphQL vs. RESTful API<\/a>.<\/p>\n Pour cr\u00e9er un service GraphQL, vous commencez par d\u00e9finir des types de sch\u00e9ma et cr\u00e9er des champs \u00e0 l’aide de ces types. Ensuite, vous fournissez un r\u00e9solveur de fonctions \u00e0 ex\u00e9cuter sur chaque champ et chaque type chaque fois que des donn\u00e9es sont demand\u00e9es par le c\u00f4t\u00e9 client.<\/p>\n Le syst\u00e8me de types GraphQL est utilis\u00e9 pour d\u00e9crire les donn\u00e9es qui peuvent \u00eatre interrog\u00e9es et celles que vous pouvez manipuler. Il s’agit du c\u0153ur de GraphQL. Discutons des diff\u00e9rentes fa\u00e7ons dont nous pouvons d\u00e9crire et manipuler les donn\u00e9es dans GraphQ.<\/p>\n Les types d’objets GraphQL sont des mod\u00e8les de donn\u00e9es contenant des champs fortement typ\u00e9s. Il devrait y avoir une correspondance 1 \u00e0 1 entre vos mod\u00e8les et les types GraphQL. Vous trouverez ci-dessous un exemple de type GraphQL :<\/p>\n GraphQL Query d\u00e9finit toutes les requ\u00eates qu’un client peut ex\u00e9cuter sur l’API GraphQL. Par convention, vous devez d\u00e9finir un Ci-dessous, nous d\u00e9finissons et mappons les requ\u00eates \u00e0 l’API RESTful correspondante :<\/p>\n Si les requ\u00eates GraphQL sont des demandes Nous allons mettre toutes les mutations dans un seul Vous avez remarqu\u00e9 l’utilisation de types Vous pouvez d\u00e9finir les types d’entr\u00e9e comme celui ci-dessous :<\/p>\n Les r\u00e9solveurs indiquent \u00e0 GraphQL ce qu’il doit faire lorsque chaque requ\u00eate ou mutation est demand\u00e9e. Il s’agit d’une fonction de base qui fait le travail difficile de frapper la couche de base de donn\u00e9es pour effectuer les op\u00e9rations CRUD (cr\u00e9ation, lecture, mise \u00e0 jour, suppression), de frapper un point de terminaison interne RESTful API, ou d’appeler un microservice<\/a> pour r\u00e9pondre \u00e0 la demande du client.<\/p>\n Vous pouvez cr\u00e9er un nouveau fichier resolvers.js<\/strong> et ajouter le code suivant :<\/p>\n Le sch\u00e9ma GraphQL est ce que GraphQL expose au monde. Par cons\u00e9quent, les types, les requ\u00eates et les mutations seront inclus dans le sch\u00e9ma pour \u00eatre expos\u00e9s au monde.<\/p>\n Voici comment exposer les types, les requ\u00eates et les mutations au monde :<\/p>\n Dans le script ci-dessus, nous avons inclus le GraphQL fournit une impl\u00e9mentation pour tous les principaux langages de programmation, et Node.js n’est pas exempt\u00e9. Sur le site officiel de GraphQL<\/a>, il y a une section pour le support JavaScript<\/a>, et aussi, il y a d’autres impl\u00e9mentations de GraphQL pour rendre l’\u00e9criture et le codage simple.<\/p>\n GraphQL Apollo fournit une impl\u00e9mentation pour Node.js et Express.js et facilite la prise en main de GraphQL.<\/p>\n Vous apprendrez comment cr\u00e9er et d\u00e9velopper votre premi\u00e8re application GraphQL dans Node.js et le cadre backend Express.js<\/a> \u00e0 l’aide de GraphQL Apollo dans la section suivante.<\/p>\n La mise en place d’un serveur d’API GraphQL avec Express.js est tr\u00e8s simple pour commencer. Dans cette section, nous allons explorer comment construire un serveur GraphQL.<\/p>\n Tout d’abord, vous devez installer et configurer un nouveau projet Express.js. Cr\u00e9ez un dossier pour votre projet et installez Express.js en utilisant cette commande :<\/p>\n La commande ci-dessus cr\u00e9e un nouveau fichier package.json<\/strong> et installe la biblioth\u00e8que Express.js dans votre projet.<\/p>\n Ensuite, nous allons structurer notre projet comme indiqu\u00e9 dans l’image ci-dessous. Il contiendra diff\u00e9rents modules pour les fonctionnalit\u00e9s du projet telles que les utilisateurs, les todos, etc.<\/p>\n Commen\u00e7ons par installer les d\u00e9pendances GraphQL Express.js. Ex\u00e9cutez la commande suivante pour les installer :<\/p>\n Ensuite, nous allons cr\u00e9er un fichier index.js<\/strong> dans le dossier modules et ajouter l’extrait de code suivant :<\/p>\n Passons en revue cet extrait de code et d\u00e9composons-le :<\/p>\n Tout d’abord, nous avons import\u00e9 les biblioth\u00e8ques requises et cr\u00e9\u00e9 des types de requ\u00eate et de mutation par d\u00e9faut. Pour l’instant, la requ\u00eate et la mutation ne d\u00e9finissent que la version de l’API GraphQL. Cependant, nous \u00e9tendrons la requ\u00eate et la mutation pour inclure d’autres sch\u00e9mas au fur et \u00e0 mesure.<\/p>\n Nous avons ensuite cr\u00e9\u00e9 un nouveau type scalaire pour le temps et notre premier r\u00e9solveur pour la requ\u00eate et la mutation cr\u00e9\u00e9es ci-dessus. En outre, nous avons \u00e9galement g\u00e9n\u00e9r\u00e9 un sch\u00e9ma \u00e0 l’aide de la fonction Le sch\u00e9ma g\u00e9n\u00e9r\u00e9 inclut tous les autres sch\u00e9mas que nous avons import\u00e9s et en inclura \u00e9galement d’autres lorsque nous les cr\u00e9erons et les importerons.<\/p>\n L’extrait de code ci-dessus montre que nous avons import\u00e9 diff\u00e9rents sch\u00e9mas dans la fonction makeExecutableSchema. Cette approche nous aide \u00e0 structurer l’application pour la complexit\u00e9. Ensuite, nous allons cr\u00e9er les sch\u00e9mas Todo et User que nous avons import\u00e9s.<\/p>\n Le sch\u00e9ma Todo montre les op\u00e9rations CRUD simples que les utilisateurs de l’application peuvent effectuer. Voici le sch\u00e9ma qui impl\u00e9mente l’op\u00e9ration CRUD Todo.<\/p>\n Passons en revue l’extrait de code et d\u00e9composons-le :<\/p>\n Tout d’abord, nous avons cr\u00e9\u00e9 un sch\u00e9ma pour notre Todo en utilisant GraphQL Ensuite, nous avons cr\u00e9\u00e9 un r\u00e9solveur, qui est utilis\u00e9 pour r\u00e9cup\u00e9rer les donn\u00e9es correctes lorsqu’une requ\u00eate ou une mutation particuli\u00e8re est appel\u00e9e.<\/p>\n Une fois la fonction r\u00e9solveur en place, nous pouvons cr\u00e9er des m\u00e9thodes individuelles pour la logique commerciale et la manipulation de la base de donn\u00e9es, comme le montre l’exemple create-todo.js<\/strong>.<\/p>\n Cr\u00e9ez un fichier create-user.js<\/strong> dans le dossier L’extrait de code ci-dessus est une fa\u00e7on simplifi\u00e9e de cr\u00e9er un nouveau Todo dans notre base de donn\u00e9es en utilisant l’ORM Sequelize. Vous pouvez en savoir plus sur Sequelize et comment le configurer avec Node.js<\/a>.<\/p>\n Vous pouvez suivre la m\u00eame \u00e9tape pour cr\u00e9er plusieurs sch\u00e9mas en fonction de votre application ou vous pouvez cloner le projet complet depuis GitHub<\/a>.<\/p>\n Ensuite, nous allons configurer le serveur avec Express.js et ex\u00e9cuter l’application Todo nouvellement cr\u00e9\u00e9e avec GraphQL et Node.js.<\/p>\nTerminologie GraphQL<\/h2>\n
Types d’objets<\/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>\nRequ\u00eates<\/h3>\n
RootQuery<\/code> qui contiendra toutes les requ\u00eates existantes.<\/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>\nMutations<\/h3>\n
GET<\/code>, les mutations sont des requ\u00eates POST<\/code>, PUT<\/code>, PATCH<\/code>, et DELETE<\/code> qui manipulent l’API GraphQL.<\/p>\nRootMutation<\/code> pour faire la d\u00e9monstration :<\/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> pour les mutations tels que UserInput<\/code>, TodoInput<\/code>. La meilleure pratique consiste toujours \u00e0 d\u00e9finir des types Input pour la cr\u00e9ation et la mise \u00e0 jour de vos ressources.<\/p>\ninput UserInput {\n firstname: String!\n lastname: String\n email: String!\n username: String!\n}<\/code><\/pre>\nR\u00e9solveurs<\/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>\nSch\u00e9ma<\/h3>\n
schema {\n query: RootQuery\n mutation: RootMutation\n}<\/code><\/pre>\nRootQuery<\/code> et le RootMutation<\/code> que nous avons cr\u00e9\u00e9s plus t\u00f4t pour \u00eatre expos\u00e9s au monde.<\/p>\nComment GraphQL fonctionne-t-il avec Node.js et Express.js ?<\/h2>\n
Mise en place de GraphQL avec Express.js<\/h2>\n
Initialiser le projet avec Express<\/h3>\n
cd <project-name> && npm init -y\nnpm install express<\/code><\/pre>\n![\"Fichiers](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/graphql-todo-structrue.png\")
Initialiser GraphQL<\/h3>\n
npm install apollo-server-express graphql @graphql-tools\/schema --save<\/code><\/pre>\nCr\u00e9ation de sch\u00e9mas et de types<\/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
\u00c9tape 1<\/h5>\n
![\"Importation](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0-1.png\")
\u00c9tape 2 :<\/h5>\n
makeExecutableSchema<\/code>.<\/p>\n![\"Cr\u00e9ation](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0-2.png\")
Cr\u00e9ation du sch\u00e9ma Todo<\/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>\nAnalyse du code<\/h4>\n
\u00c9tape 1 :<\/h5>\n
type<\/code>, input<\/code>, et extend<\/code>. Le mot-cl\u00e9 extend<\/code> est utilis\u00e9 pour h\u00e9riter et ajouter de nouvelles requ\u00eates et mutations \u00e0 la requ\u00eate et \u00e0 la mutation racines existantes que nous avons cr\u00e9\u00e9es ci-dessus.<\/p>\n![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0-3.png\")
\u00c9tape 2 :<\/h5>\n
![\"Cr\u00e9ation](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0.png\")
.\/mutations<\/code> et ajoutez la logique m\u00e9tier pour cr\u00e9er un nouveau Todo dans votre base de donn\u00e9es.<\/p>\nconst models = require('..\/..\/..\/models');\nmodule.exports = async (root, { input }, context) => {\n return models.todos.push({ ...input });\n};<\/code><\/pre>\nConfiguration et ex\u00e9cution du serveur<\/h3>\n
![\"L'\u00e9cran](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/new_graphql_playground.png\")