[英]error 400 graphql and apollo client when performing mutation
I'm following Javascript Everywhere tutorial.我正在关注 Javascript Everywhere 教程。 Building note app using reactjs and graphQL.使用 reactjs 和 graphQL 构建笔记应用程序。 Now I'm working with CRUD.现在我正在使用 CRUD。 Query and Create Note (mutation) works perfectly, but when i'm doing update mutation, it's return 400 error Bad request.查询和创建注释(突变)工作得很好,但是当我进行更新突变时,它返回 400 错误错误请求。 Here's my code.这是我的代码。
editNote pages编辑笔记页
editNote.js编辑笔记.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
NoteForm.js 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变异.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
}
}
}
`;
I'm just beginner using apollo client and graphql, i don't have any idea.我只是使用 apollo 客户端和 graphql 的初学者,我不知道。 Any help will be appreciated.任何帮助将不胜感激。 Thankyou.谢谢你。
NoteForm.js 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你应该传递正确的变量,在 gql 文件中我看到你声明了 $id 和 $content,确保你将“id”传递给 mutation
example: editNote.js示例:editNote.js
...
return <NoteForm id={id} content={data.note.content} action={editNote} />;
...
NoteForm.js NoteForm.js
...
const [value, setValue] = useState({
id: props.id,
content: props.content || ''
});
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.