Beginning GraphQL with React, NodeJS and Apollo by Lim Greg
Author:Lim, Greg
Language: eng
Format: epub
Published: 2023-03-02T00:00:00+00:00
Figure 1
If you go to your MongoDB Atlas dashboard, under âCollectionsâ, you will see the record added (fig. 2).
Figure 2
So we have our GraphQL API connected to our database and we are able to add a todo.
Go ahead and create more todos and see what happens!
Next, letâs implement deleting a todo.
Delete Todo
In /server/schema.js, in mutation, under addTodo, add the below code:
const mutation = new GraphQLObjectType({
name: 'Mutation',
fields:{
addTodo: {
â¦
},
deleteTodo: {
type: TodoType,
args: {
id: { type: GraphQLNonNull(GraphQLID) },
},
resolve(parent, args) {
return Todo.findByIdAndRemove(args.id);
},
},
}
})
deleteTodo will take in one id argument, and again we specify it to be non-null. For resolve, we use the Mongooseâs findByIdAndRemove method to remove that specified todo.
Running your App
In GraphiQL, run the below delete mutation:
mutation{
deleteTodo(id:"63cf2f87ba6f07707d1f8775"){
id,
title,
completed,
}
}
Include your own id (should be in double quotes ââ). And when you run the query to fetch all todos eg.:
{
todos{
id,
title,
completed
}
}
that todo wonât be there.
Next, letâs implement updating a todo.
Updating a Todo
In /server/schema.js, add:
const mutation = new GraphQLObjectType({
name: 'Mutation',
fields:{
addTodo: {
â¦
},
deleteTodo: {
â¦
},
updateTodo: {
type: TodoType,
args: {
id: { type: GraphQLNonNull(GraphQLID) },
title: { type: GraphQLString },
},
resolve(parent, args) {
return Todo.findByIdAndUpdate(
args.id,
{
$set: {
title: args.title,
},
}
);
},
},
}
})
updateTodo is similar to addTodo and deleteTodo, except that in resolve, we use findByIdAndUpdate and provide the id of the todo we want to update.
We then set title with args.title.
Running our App
In GraphiQL, run a mutation to change the title:
mutation{
updateTodo(id:"63cf2fdcff71b20840649061",title: "edit graphql article"){
id,
title,
completed
}
}
And when we run a query to retrieve all todos, you will see the todoâs title updated.
Marking Todos Complete
We will next implement marking a todo as complete and vice-versa. In schema.js, add:
const mutation = new GraphQLObjectType({
name: 'Mutation',
fields:{
addTodo: {
â¦
},
deleteTodo: {
â¦
},
updateTodo: {
â¦
},
toggleTodo: {
type: TodoType,
args: {
id: { type: GraphQLNonNull(GraphQLID) },
},
async resolve(parent, args) {
const todo = await Todo.findById(args.id)
return Todo.findByIdAndUpdate(
args.id,
{
$set: {
completed: !todo.completed
},
}
);
},
},
}
})
Again, toggleTodo is similar to updateTodo, except that in resolve, we first retrieve the existing todoâs completed status, invert it (from false to true and vice-versa), and again use findByIdAndUpdate to set the new completed status.
Overall Reflection
Now, letâs pause for a while and go over what we have done so far.
In schema.js, we have a Todo type.
const TodoType = new GraphQLObjectType({
name: 'Todo',
fields: {
id: { type: GraphQLID },
title: { type: GraphQLString },
completed: { type: GraphQLBoolean },
}
});
For queries, we have a todos query to get all todos, and a todo query that accepts an argument to get a single todo.
const RootQueryType = new GraphQLObjectType({
name: 'Query',
fields: {
todos: {
type: new GraphQLList(TodoType),
resolve: (parent, args) => {
return Todo.find()
}
},
todo: {
type: TodoType,
args:{id: {type: GraphQLID}},
resolve: (parent, args) => { â
return Todo.findById(args.id)
}
}
}
});
For mutations, we can add a new todo, delete a todo, update a todo, and toggle a todo as completed. So we have full CRUD functionality for todos.
const mutation = new GraphQLObjectType({
name: 'Mutation',
fields:{
addTodo: {
â¦
},
deleteTodo: {
â¦
},
updateTodo: {
â â¦
},
toggleTodo: {
â¦
},
}
})
Later in the book, we will see how objects can be connected together. Eg. we will define a schema about an employee and their associated todos.
For now, letâs see how we can implement full CRUD functionality via a React frontend.
*You can obtain the source code of the completed project by contacting [email protected].
Download
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.
| Content Management | Programming |
| User Experience & Usability | User Generated Content |
| Web Design | Web Marketing |
| Web Services | Website Analytics |
Hello! Python by Anthony Briggs(9383)
The Mikado Method by Ola Ellnestam Daniel Brolund(9321)
Dependency Injection in .NET by Mark Seemann(8866)
Sass and Compass in Action by Wynn Netherland Nathan Weizenbaum Chris Eppstein Brandon Mathis(7411)
The Well-Grounded Java Developer by Benjamin J. Evans Martijn Verburg(7124)
Secrets of the JavaScript Ninja by John Resig & Bear Bibeault(6255)
Secrets of the JavaScript Ninja by John Resig Bear Bibeault(5968)
Jquery UI in Action : Master the concepts Of Jquery UI: A Step By Step Approach by ANMOL GOYAL(5517)
Kotlin in Action by Dmitry Jemerov(4653)
Audition by Ryu Murakami(4107)
Hands-On Full-Stack Web Development with GraphQL and React by Sebastian Grebe(3912)
Functional Programming in JavaScript by Mantyla Dan(3726)
Svelte with Test-Driven Development by Daniel Irvine(3044)
Learning React: Functional Web Development with React and Redux by Banks Alex & Porcello Eve(2844)
Layered Design for Ruby on Rails Applications by Dementyev Vladimir;(2664)
Test-Driven Development with PHP 8 by Rainier Sarabia(2645)
WordPress Plugin Development Cookbook by Yannick Lefebvre(2625)
Architecting Modern Java EE Applications: Designing lightweight, business-oriented enterprise applications in the age of cloud, containers, and Java EE 8 by Daschner Sebastian(2564)
React Native - Building Mobile Apps with JavaScript by Novick Vladimir(2344)
