未处理的拒绝(错误):响应不成功:收到状态代码 400 新的 ApolloError
Unhandled Rejection (Error): Response not successful: Received status code 400 new ApolloError
我是 Apollo Client
的新手。话不多说,上代码。我有一个 运行 的服务器,我正在尝试使用 React 进行突变。
server.js
中的突变
const RootMutationType = new GraphQLObjectType({
name: "RootMutation",
description: "Root Mutation Type.",
fields: () => ({
addBook: {
type: BookType,
args: {
authorId: { type: GraphQLID },
name: { type: GraphQLString },
},
resolve: async (parent, args) => {
const book = new Book({
name: args.name,
authorId: args.authorId,
});
return await book.save();
},
},
......
// other crazy stuff here
使用 graphiql
我可以添加一本书,这意味着服务器 运行 没问题。但是在反应客户端上,当我尝试添加一本书时,我得到了错误。这是我的。
mutations.js
import { gql } from "@apollo/client";
const ADD_BOOK_MUTATION = gql`
mutation addBook($authorId: Integer!, $name: String!) {
addBook(authorId: $authorId, name: $name) {
name
id
}
}
`;
export { ADD_BOOK_MUTATION };
Form.jsx
import React, { useEffect, useRef } from "react";
import { useMutation } from "@apollo/client";
import { ADD_BOOK_MUTATION } from "./mutations";
const Index = () => {
const [addBook, { data, error }] = useMutation(ADD_BOOK_MUTATION);
const idRef = useRef(null);
const nameRef = useRef(null);
useEffect(() => {
if (error) {
console.error(error);
} else {
console.log(data);
}
}, [data, error]);
const addBookHandler = (e) => {
e.preventDefault();
addBook({
variables: {
authorId: idRef.current.value,
name: nameRef.current.value,
},
});
};
return (
<form className="form">
<input ref={idRef} type="number" placeholder="author id" />
<input ref={nameRef} type="text" placeholder="book name" />
<button onClick={addBookHandler}>addBook</button>
</form>
);
};
export default Index;
谁能告诉我我哪里错了!!帮助输入将不胜感激!!
一段时间后我才弄清楚自己。 $authorId: Integer!
应该是 $authorId:ID
.
新突变
import { gql } from "@apollo/client";
const ADD_BOOK_MUTATION = gql`
mutation addBook($authorId: ID, $name: String!) {
addBook(authorId: $authorId, name: $name) {
name
id
}
}
`;
export { ADD_BOOK_MUTATION };
通常这些类型的错误是由于变异参数类型与用户定义的 GraphQL 变异查询参数不匹配引起的。
例如,我编写的突变查询缺少 !
,而突变的类型定义有 !
.
我是 Apollo Client
的新手。话不多说,上代码。我有一个 运行 的服务器,我正在尝试使用 React 进行突变。
server.js
const RootMutationType = new GraphQLObjectType({
name: "RootMutation",
description: "Root Mutation Type.",
fields: () => ({
addBook: {
type: BookType,
args: {
authorId: { type: GraphQLID },
name: { type: GraphQLString },
},
resolve: async (parent, args) => {
const book = new Book({
name: args.name,
authorId: args.authorId,
});
return await book.save();
},
},
......
// other crazy stuff here
使用 graphiql
我可以添加一本书,这意味着服务器 运行 没问题。但是在反应客户端上,当我尝试添加一本书时,我得到了错误。这是我的。
mutations.js
import { gql } from "@apollo/client";
const ADD_BOOK_MUTATION = gql`
mutation addBook($authorId: Integer!, $name: String!) {
addBook(authorId: $authorId, name: $name) {
name
id
}
}
`;
export { ADD_BOOK_MUTATION };
Form.jsx
import React, { useEffect, useRef } from "react";
import { useMutation } from "@apollo/client";
import { ADD_BOOK_MUTATION } from "./mutations";
const Index = () => {
const [addBook, { data, error }] = useMutation(ADD_BOOK_MUTATION);
const idRef = useRef(null);
const nameRef = useRef(null);
useEffect(() => {
if (error) {
console.error(error);
} else {
console.log(data);
}
}, [data, error]);
const addBookHandler = (e) => {
e.preventDefault();
addBook({
variables: {
authorId: idRef.current.value,
name: nameRef.current.value,
},
});
};
return (
<form className="form">
<input ref={idRef} type="number" placeholder="author id" />
<input ref={nameRef} type="text" placeholder="book name" />
<button onClick={addBookHandler}>addBook</button>
</form>
);
};
export default Index;
谁能告诉我我哪里错了!!帮助输入将不胜感激!!
一段时间后我才弄清楚自己。 $authorId: Integer!
应该是 $authorId:ID
.
新突变
import { gql } from "@apollo/client";
const ADD_BOOK_MUTATION = gql`
mutation addBook($authorId: ID, $name: String!) {
addBook(authorId: $authorId, name: $name) {
name
id
}
}
`;
export { ADD_BOOK_MUTATION };
通常这些类型的错误是由于变异参数类型与用户定义的 GraphQL 变异查询参数不匹配引起的。
例如,我编写的突变查询缺少 !
,而突变的类型定义有 !
.