FakeData "Error: Cannot return null for non-nullable field" - graphql

Question

I made my first apollo server to try to understand it and so far I'm testing it with an array I created and I test my mutation with graphQL playground.
My data is a big array Like this:
const lists = [
{
id: 'list-0',
name: 'Example 1',
tasks: [{name:"task1", id:"1", completed: false},{name:"task2", id:"2", completed: true}, ]
},
{
id: 'list-1',
name: 'Example 2',
tasks: [{name:"task1", id:"1", completed: false},{name:"task2", id:"2", completed: true}, ]
},
];
So far I'm able to add a list name, delete a list and get a list by id. What I would like to do is, add a new task object to a list.
My mutation and type are like this:
type Task {
id: String!
name: String!
completed: Boolean!
}
type List {
id: String!
name: String!
tasks: [Task!]!
}
addTask(listId: String!, name: String!): Task!
The function addTask I made for my resolvers is this:
addTask(parents, {listId, name}) {
const newTask = lists.map((list) => {
if (listId === list.id) {
return {
...list,
tasks: [...list.tasks, { name, completed: false, id:"eaz"}],
};
}
console.log("test1", list)
return list
})
console.log("test2", newTask)
return newTask
},
When I use the graphQL playground I target one of my list.id like this one below but the console log tell me tasks: [ [Object], [Object] ] and the graphQL playground bring tell me tasks is null.
mutation Mutation {
addTask(listId: "task-0", name: "eze") {
name
}
}
Am I missing something about graphQL?Should I seperate the array tasks and lists?
Thanks for reading.

Answer 1

In your console logs, newTask looks like this:
[ [Object], [Object] ]
It's an array, not an object, and [].name is undefined, which gets converted to null.
Based on your type definitions, you must return an object that has this structure:
type Task {
id: String!
name: String!
completed: Boolean!
}
If instead, your code did something like this, I think it'll give you want you're saying it's returning:
addTask(parents, { listId, name }) {
let newTask
lists.forEach((list) => {
if (listId === list.id) {
newTask = { name, completed: false, id: 'eaz' }
list.tasks.push(newTask)
}
console.log('test1', list)
return list
})
console.log('test2', newTask)
return newTask
}
newTask here is the object { name, completed: false, id: 'eaz' }
Extra credit:
Alternative to .map or .forEach, which loops through EVERY ITEM NO MATTER WHAT, you can do something a bit more efficient like
addTask(parents, { listId, name }) {
const newTask = { name, completed: false, id: 'eaz' }
const list = lists.find((list) => {
return listId === list.id
}
if (!list) throw new Error('listId not found')
list.tasks.push(newTask)
console.log('test1', list)
console.log('test2', newTask)
return newTask
}