# Update Tasks with Mutations
[last time](https://narutaro.github.io/posts/search-an-item-with-apollo/) was search by id form the task list. This time, I am going to update the liset. It's called `Mutation`, which is a cool name in the GraphQL community :D
# Code
```js
const { ApolloServer, gql } = require('apollo-server');
const typeDefs = gql`
type Task {
id: ID!
name: String!
isActive: Boolean!
createdAt: Int
updatedAt: Int
owner: String
}
type Query {
tasks: [Task]
task(id: ID!): Task
}
# ❶
type Mutation {
addTask(name: String!): [Task]
completeTask(id: ID!): [Task]
deleteTask(id: ID!): [Task]
}
`;
const tasks = [
{ id: 1, name: "Soak in an Onsen", isActive: true },
{ id: 2, name: "Sing Karaoke", isActive: false },
{ id: 3, name: "See cherry blossom", isActive: true },
]
// ❷
const newId = () => { return Math.max(...tasks.map((t) => t.id)) + 1 }
const resolvers = {
Query: {
tasks: () => tasks,
task (parent, args, context, info) {
const { id } = args;
return context.db.find((task) => task.id == id)
}
},
// ❸
Mutation: {
addTask: async (parent, args, context) => {
context.db.push({
id: newId(),
...args,
isActive: true,
createdAt: Math.floor(Date.now()/1000),
updatedAt: Math.floor(Date.now()/1000)
})
return context.db
},
completeTask: async (parent, args, context) => {
const targetTask = context.db.find(t => t.id == args.id)
if (!targetTask) {
throw new Error("No such task")
} else {
const idx = context.db.indexOf(targetTask)
context.db[idx].isActive = !context.db[idx].isActive;
context.db[idx].updatedAt = Math.floor(Date.now()/1000);
return context.db
}
},
deleteTask: async (parent, task, context) => {
const targetTask = context.db.find(t => t.id == task.id)
if (!targetTask) {
throw new Error("No such task")
} else {
const idx = context.db.indexOf(targetTask)
context.db.splice(idx, 1);
return context.db
}
}
}
};
const server = new ApolloServer({
typeDefs,
resolvers,
context: { db: tasks }
});
server.listen().then(({ url }) => {
console.log(`🚀 Server ready at ${url}`);
});
```
Updates from [last time](https://narutaro.github.io/posts/search-an-item-with-apollo/) is as follows:
1. Define the `Types` of the Mutationの型. I made all types as `[Task]` so that all of them retuns array of tasks.
2. Function which generates an ID - not a good idea to scan the whole task array ids but it shold be OK for this kinda quick PoC.
3. [`Resolver`](https://www.apollographql.com/docs/apollo-server/data/resolvers/) function which corresponds to the `Type` of ❶
That's it. I think I'm starting to understand the cycle of adding features. Add `Type` frist, then add `Resolver` as either in`Query` or `Mutaion` section which corresponding to the `Type`
I repeated that cycle for `addTask()`, `completeTask()`, `deleteTask()`
# Use the mutations
Now you can do a full range of CRUD processing. Let's make request from your client. The sample requests are:
```
# Write your query or mutation here
mutation add {
addTask(name: "Buy some milk") {
id
name
}
}
mutation delete {
deleteTask(id: 5) {
id
name
}
}
query list {
tasks {
id
name
isActive
createdAt
updatedAt
owner
}
}
mutation done {
completeTask(id: 4) {
id
name
isActive
}
}
```
You should be able to resolve these queries with you GraphQL Playground at `https://localhost:4000`. Well, that was easier than I thought it would be :D
# Next step
Now that we have a complete set of CRUD functions as TODO, next time I would like to modify the [this Svelte frontend (REST version)](https://zenn.dev/masaino/articles/080f998d73351f) that I wrote before and connect it to the GraphQL backend.
[^1]: It's cool, but it's not an easy name to remember. I wonder if they couldn't come up with a good name for Create, Update, and Delete as a generic term.