error 400 graphql and apollo client when performing mutation - reactjs

Question

I'm following Javascript Everywhere tutorial. Building note app using reactjs and graphQL. Now I'm working with CRUD. Query and Create Note (mutation) works perfectly, but when i'm doing update mutation, it's return 400 error Bad request. Here's my code.
editNote pages
editNote.js
import React from 'react';
import { useMutation, useQuery } from '#apollo/client';
// import the NoteForm component
import NoteForm from '../components/NoteForm';
import { GET_NOTE, GET_ME } from '../gql/query';
import { EDIT_NOTE } from '../gql/mutation';
const EditNote = props => {
// store the id found in the url as a variable
const id = props.match.params.id;
// define our note query
const { loading, error, data } = useQuery(GET_NOTE, { variables: { id } });
// fetch the current user's data
const { data: userdata } = useQuery(GET_ME);
// define our mutation
const [editNote] = useMutation(EDIT_NOTE, {
variables: {
id
},
onCompleted: () => {
props.history.push(`/note/${id}`);
}
});
// if the data is loading, display a loading message
if (loading) return 'Loading...';
// if there is an error fetching the data, display an error message
if (error) return <p>Error!</p>;
// if the current user and the author of the note do not match
if (userdata.me.id !== data.note.author.id) {
return <p>You do not have access to edit this note</p>;
}
// pass the data and mutation to the form component
return <NoteForm content={data.note.content} action={editNote} />;
};
export default EditNote;
NoteForm for updating note
NoteForm.js
import React, { useState } from 'react';
import styled from 'styled-components';
import Button from './Button';
const Wrapper = styled.div`
height: 100%;
`;
const Form = styled.form`
height: 100%;
`;
const TextArea = styled.textarea`
width: 100%;
height: 90%;
`;
const NoteForm = props => {
// set the default state of the form
const [value, setValue] = useState({ content: props.content || '' });
// update the state when a user types in the form
const onChange = event => {
setValue({
...value,
[event.target.name]: event.target.value
});
};
return (
<Wrapper>
<Form
onSubmit={e => {
e.preventDefault();
props.action({
variables: {
...value
}
});
}}
>
<TextArea
required
type="text"
name="content"
placeholder="Note content"
value={value.content}
onChange={onChange}
/>
<Button type="submit">Save</Button>
</Form>
</Wrapper>
);
};
export default NoteForm;
and here is my mutation updateNote.
mutation.js
const EDIT_NOTE = gql`
mutation updateNote($id: ID!, $content: String!) {
updateNote(id: $id, content: $content) {
id
content
createdAt
favoriteCount
favoritedBy {
id
username
}
author {
username
id
}
}
}
`;
Error information.
I'm just beginner using apollo client and graphql, i don't have any idea. Any help will be appreciated. Thankyou.

Answer 1

NoteForm.js
...
const onChange = event => {
setValue({
...value,
[event.target.name]: event.target.value /// problem here
});
};
...
you should pass correct variables, in gql file I see you declare $id and $content, make sure you pass "id" to mutation
example:
editNote.js
...
return <NoteForm id={id} content={data.note.content} action={editNote} />;
...
NoteForm.js
...
const [value, setValue] = useState({
id: props.id,
content: props.content || ''
});
...