In order to change the data that we can query for in a GraphQL Schema, we have to define what is called a mutation
in GraphQL. Mutations allow us to specify ways to create, update, and delete data. It also provides a way to fetch information after the mutation occurs. In this video, we’ll learn how to create a Mutation Type in GraphQL and specify the information we want returned.
const express = require('express'); const graphqlHttp = require('express-graphql'); const { getVideoById, getVideos, createVideo } = require('./data/index'); const server = express(); const port = process.env.PORT || 3000; const { GraphQLSchema, GraphQLObjectType, GraphQLString, GraphQLList, GraphQLInt, GraphQLNonNull, GraphQLBoolean, GraphQLID } = require('graphql'); const videoType = new GraphQLObjectType({ name : 'video', description : 'A video on Egghead.io', fields : { id : { type : GraphQLID, description : 'The id of the video' }, title : { type : GraphQLString, description : 'The title of the video' }, duration : { type : GraphQLInt, description : 'The duration of the video' }, watched : { type : GraphQLBoolean, description : 'Whether or no the viewer watched the video' } } }); const mutationType = new GraphQLObjectType({ name : 'Mutation', description : 'The root Mutation type', fields : { createVideo : { type : videoType, args : { title : { type : new GraphQLNonNull(GraphQLID), description : 'The title of the video' }, duration : { type : new GraphQLNonNull(GraphQLInt), description : 'The duration of the video' }, watched : { type : new GraphQLNonNull(GraphQLBoolean) } }, resolve : (_, args) => { return createVideo(args) } } } }); const queryType = new GraphQLObjectType({ name : 'QueryType', description : 'The root query type', fields : { videos : { type : new GraphQLList(videoType), resolve : getVideos }, video : { type : videoType, args : { id : { type : new GraphQLNonNull(GraphQLID), description : 'The id of the video' } }, resolve : (_, args) => getVideoById(args.id) } } }); const schema = new GraphQLSchema({ query : queryType, mutation : mutationType }); server.use('/graphql', graphqlHttp({ schema, graphiql : true, // use graphiql interface })); server.listen(port, () => { console.log(`Listening on http`) })
Write mutation in GraphiQL:
mutation video { createVideo(title: "new Redux", duration:450, watched: false) { id, title } }
Data:
const videoA = { id: 'a', title: 'Create a GraphQL Schema', duration: 120, released: true, }; const videoB = { id: 'b', title: 'Ember.js CLI', duration: 240, released: false, }; const videos = [videoA, videoB]; const getVideoById = (id) => new Promise((resolve) => { const [video] = videos.filter((video) => { return video.id === id; }); resolve(video); }); const getVideos = () => new Promise((resolve) => resolve(videos)); const createVideo = ({ title, duration, released }) => { const video = { id: (new Buffer(title, 'utf8')).toString('base64'), title, duration, released, }; videos.push(video); return video; }; exports.getVideoById = getVideoById; exports.getVideos = getVideos; exports.createVideo = createVideo;