表示http: 500错误的graphql突变从阿波罗客户端在react中创建用户

Question

试图添加一个用户使用阿波罗的图形突变，但我的服务器给我:Uncaught (in promise) Error: Response not successful: Received status code 500不确定我是否需要指定服务器使用post路由?我想如果你只是告诉express在特定的路径上使用graphql即/graphql它会根据需要读取突变请求

不确定为什么我的服务器发送给我一个500错误。作为旁注，我能够从我的服务器获取用户没有问题使用阿波罗在我的反应应用程序

希望有人能告诉我什么是我的快递应用程序，可能会导致我的问题，我已经尝试添加一个张贴路线，你会在例子中看到，但我仍然得到一个500错误返回

反应中的阿波罗突变

import {gql} from '@apollo/client';
export const CREATE_CUSTOMER_MUTATION = gql`
mutation addCustomer($id: Int! $name: String! $email: String! $age: Int!){
addCustomer
(id: $id name: $name email: $email age: $age)
{
id
name
email
age
}
}
`

添加用户

import React, {useState} from 'react'
import { CREATE_CUSTOMER_MUTATION } from '../GraphQL/Mutations'
import { useMutation } from '@apollo/client';
export default function Form() {
const [id,setId] = useState("");
const [name,setName] = useState("");
const [email,setEmail] = useState("");
const [age,setAge] = useState("");
const [addCustomer, {error}] = useMutation(CREATE_CUSTOMER_MUTATION)
const newCustomer = () =>{
addCustomer({
variables: {
id: id,
name: name,
email: email,
age: age
}
})
if(error){
console.log(error);
}
};
return (
<div>
<input type="text"
placeholder="id"
onChange = {(e) =>{
setId(e.target.value)}}/>
<input type="text"
placeholder="name"
onChange = {(e) =>{
setName(e.target.value)}}/>
<input type="text" 
placeholder="email"
onChange = {(e) =>{
setEmail(e.target.value)}}/>
<input type="text" 
placeholder="age"
onChange = {(e) =>{
setAge(e.target.value)}}/>
<button onClick={addCustomer}>Create Customer</button>

</div>
)
}

EXPRESS服务器

const express = require('express')
const expressGraphQL = require('express-graphql').graphqlHTTP
const schema = require('./schema.js')
const cors = require('cors')
const port = process.env.PORT || 3000

const app = express();
//allow CORS
app.use(cors())

app.use('/graphql', expressGraphQL({
schema:schema,
graphiql:true,
}));

app.get('/', (req, res) => {
res.send('Hello World!')
})

app.listen(port, ()=>{
console.log(`server is running on port ${port}`)
});

my graphql schema on my express server

const axios = require('axios')
const {
GraphQLObjectType,
GraphQLString,
GraphQLInt,
GraphQLSchema,
GraphQLList,
GraphQLNonNull
} = require('graphql')

//hardcoded data
const customers =[
{id: 1, name: 'luther wardle', email: '[e-mail]', age:35},
{id: 2, name: 'steve smith', email: '[e-mail]', age:30},
{id: 3, name: 'the main mayne', email: '[e-mail]', age:29},
{id: 4, name: 'jojo mojo', email: '[e-mail]', age:14}   
]

//customer type
const CustomerType = new GraphQLObjectType({
name: 'Customer',
fields: () =>({
id: {type:GraphQLString},
name: {type:GraphQLString},
email: {type:GraphQLString},
age: {type: GraphQLInt}
})
})
//Root Query
const RootQuery = new GraphQLObjectType({
name: 'RootQueryType',
fields:{
customer: {
type:CustomerType,
args:{
id: {type:GraphQLString}
},
resolve(parentValue,args){

for(let i =0; i<customers.length; i++){
if(customers[i].id == args.id){
return  customers[i]
}
}


}
},
customers:{
type: new GraphQLList(CustomerType),
resolve(parentValue,args){

return customers
}   
}
}

});
//mutation
const mutation = new GraphQLObjectType({
name: 'mutation',
fields:{
addCustomer:{
type:CustomerType,
args:{
id: {type: new GraphQLNonNull(GraphQLInt)},
name: {type: new GraphQLNonNull(GraphQLString)},
email: {type: new GraphQLNonNull(GraphQLString)},
age: {type: new GraphQLNonNull(GraphQLInt)}

},
resolve(parentValue,args){

// add to the list
return customers
}
},
deleteCustomer:{
type:CustomerType,
args:{
id:{type: new GraphQLNonNull(GraphQLString)}
},
resolve(parentValue,args){
return axios.delete('http://localhost:3000/customers/'+args.id)
.then(res => res.data);
}
},
editCustomer:{
type:CustomerType,
args:{
id:{type: new GraphQLNonNull(GraphQLString)},
name:{type: GraphQLString},
email:{type:GraphQLString},
age:{type: GraphQLString}
},
resolve(parentValue,args){
return axios.patch('http://localhost:3000/customers/'+args.id,args)
.then(res => res.data);
}
}
}
})
module.exports = new GraphQLSchema({
query: RootQuery,
mutation
});

Answer 1

当ID和Age应该是整型时，我的表单将所有变量作为字符串传递，解析整型后问题得到解决

如下所示，我已经更改了表单组件

中的变量

const newCustomer = () =>{
addCustomer({
variables: {
id: parseInt(id),
name: name,
email: email,
age: parseInt(age)
}
})
if(error){
console.log(error);
}
};