update function in the useMutation hook displays the mutation result as undefined - reactjs

Question

I'm new to GraphQL and had a question about useMutation hook. I want to be able to update the UI by updating the object that has been modified instead of refreshing the UI. The problem is that when i pass the result of useMutation hook to the update function, it displays the result as undefined, but the query goes through and returns the response
I'm executing the useMutation hook on click of a button
<button
onClick={() => {
addTodo('Placeholder') : undefined;
}}
></button>
Button click calls a function called addTodo which executes useMutation hook
const ADD_TODO = gql`
mutation AddTodo($text: String!) {
addTodo(text: $text) {
id
text
}
}
`;
const addTodo = (text: string) => {
addTodo({ variables: { type: text } });
}
const [addTodo] = useMutation(ADD_TODO, {
update(cache, { data: { addTodo } }) {
console.log('MUTATION DATA IS ', addTodo);
}
});
The above console.log displays undefined always whereas in the Network tab I use the query being executed successfully. The documentation says that update function is passed a cache object and the result of the mutation addTodo but for me the result of the mutation is undefined. What am I doing wrong?

Answer 1

Couple of things to pay attention to:
addTodo('Placeholder') : undefined; this syntax looks weird. Considering it is a typo for the purpose of showing the example here on stackoverflow.
your mutation expects text as a variable:
const ADD_TODO = gql`
mutation AddTodo($text: String!) {
addTodo(text: $text) {
id
text
}
}
`;
while you pass variable type when calling mutation:
addTodo({ variables: { type: text } });
try passing text:
addTodo({ variables: { text } });