GraphQL avec Apollo

GraphQL avec Apollo


Création d'un type mutation

Comme pour la query, nous devons définir les mutations possibles. Il s'agit là aussi d'une fonction prenant en entrée un type input et renvoyant un objet.

Type Input

Pour ce tutoriel, nous allons seulement créer un nouvel astronaute. Nous avons donc besoin d'un seul type input pour l'astronaute.

Dans le dossier typedefs vous devez ajouter un fichier astronauteInput.js qui contient :

const AstronauteInput = ` input AstronauteInput { pseudo: String! photo: String } `; export default AstronauteInput;

Ajout de la mutation

Dans le fichier schemas.js vous devez ajouter la mutation :

import { makeExecutableSchema } from 'graphql-tools'; import { resolvers } from './resolver'; import Astronaute from './typedefs/astronaute'; import AstronauteInput from './typedefs/astronauteInput'; import Planet from './typedefs/planet'; import Grade from './typedefs/grade'; const RootQuery = ` type RootQuery { astronaute(id: Int!): Astronaute, astronautes: [Astronaute] planet(id: Int!): Planet } `; const RootMutation = ` type RootMutation { saveAstronaute(input: AstronauteInput!): Astronaute } `; const SchemaDefinition = ` schema { query: RootQuery, mutation: RootMutation } `; export default makeExecutableSchema({ typeDefs: [SchemaDefinition, RootQuery, RootMutation, AstronauteInput, Astronaute, Planet, Grade], resolvers: resolvers, });

Resolver de mutation

Dans le resolver du fichier astronaute.js vous devez ajouter la fonction permettant la mutation :

import pg from './../pg'; import Astronaute from '../typedefs/astronaute'; const resolvers = { RootMutation: { async saveAstronaute(value, { input }, context, infos) { const astronaute = await pg('astronaute').returning(['id', 'pseudo']).insert(input); return astronaute.pop(); } }, RootQuery: { async astronautes() { return await pg.select().table('astronaute'); }, async astronaute(obj, args, context, info) { return (await pg .select() .table('astronaute') .where('id', args.id) .limit(1)).pop(); }, }, Astronaute: { async grade(astronaute) { return (await pg .select() .table('grade') .where('id', astronaute.grade_id) .limit(1)).pop(); }, async planet(astronaute) { return ( await pg .select() .table('planet') .innerJoin('planet-astronaute', 'planet-astronaute.planet_id', '=', 'planet.id') .where('planet-astronaute.astronaute_id', astronaute.id) .limit(1)).pop(); } }, }; export default resolvers;

La fonction saveAstronaute prend l'input en entrée, sauvegarde dans la base et renvoie l'objet sauvegardé :

Testons

Dans GraphiQL vous pouvez mettre la query suivante :

mutation saveAstronaute($astronaute: AstronauteInput!) { saveAstronaute(input: $astronaute) { id pseudo } }

Puis dans query variables en bas à gauche :

{ "astronaute": { "pseudo": "test" } }

Si tout est ok pour devriez avoir cela comme réponse :

{ "data": { "saveAstronaute": { "id": 1, "pseudo": "test" } } }

Retrouvez le code directement ici

Conclusion

Je vous invite à lire la documentation de GraphQL et de Apollo pour voir l'ensemble des fonctionnalités disponible dans GraphQL.

Auteur(s)

Jonathan Jalouzot

Jonathan Jalouzot

Lead développeur au @lemondefr, mes technologies sont le symfony depuis 2009, le nodejs, l'angularjs, rabbitMq etc ... J'adore les médias et aimerai continuer dans ce secteur plein de surprise. Vous pouvez me retrouver sur les réseaux sociaux: Twitter: @captainjojo42 Instagram: @captainjojo42 Linkedin: https://fr.linkedin.com/in/jonathanjalouzot Github: https://github.com/captainjojo

Voir le profil

Vous souhaitez en savoir plus sur le sujet ?
Organisons un échange !

Notre équipe d'experts répond à toutes vos questions.

Nous contacter

Découvrez nos autres contenus dans le même thème

À la découverte de l'Anchor positioning API

La nouvelle Anchor positioning API en CSS

L'Anchor positioning API est arrivée en CSS depuis quelques mois. Expérimentale et uniquement disponible à ce jour pour les navigateurs basés sur Chromium, elle est tout de même très intéressante pour lier des éléments entre eux et répondre en CSS à des problématiques qui ne pouvaient se résoudre qu'en JavaScript.