未处理的拒绝(错误):响应不成功:收到状态代码400 new ApolloError

Question

我是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，我可以添加一本书，这意味着服务器运行良好。但在react客户端上，当我尝试添加一本书时，我会遇到错误。这是我的东西。

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;

有人能告诉我我错在哪里了吗！！如果您能提供帮助，我们将不胜感激！！

Answer 1

通常，这些类型的错误是由于突变参数类型与用户定义的GraphQL突变查询参数不匹配而产生的。

例如，我编写的突变查询缺少!，而突变的类型定义有!。

Answer 2

检查错误的一种常见而简单的方法是在浏览器中安装apollo客户端插件。

Answer 3

过了一段时间我才发现自己。$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 };