Блог

пытаюсь добавить пользователя, использующего мутацию graphql в apollo, но мой сервер выдает мне: Uncaught (in promise) Error: Response not successful: Received status code 500 не уверен, нужно ли мне указывать сервер для использования маршрута post или нет? Я подумал, что если вы просто скажете express использовать graphql на определенном маршруте, то есть /graphql, он будет считывать запросы на мутации по мере необходимости

не знаю, почему мой сервер отправляет мне сообщение об ошибке 500. В качестве примечания я могу без проблем получать пользователей со своего сервера, используя apollo в своем приложении react

в надежде, что кто-нибудь подскажет мне, что случилось с моим экспресс-приложением, которое может вызвать мою проблему, я попытался добавить маршрут отправки, как вы увидите в примере, но я все равно получаю сообщение об ошибке 500

Мутация Apollo в react

 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  } }  `  

Форма в react для добавления пользователя

 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 = () =gt;{  addCustomer({  variables: {  id: id,  name: name,  email: email,  age: age  }  })  if(error){  console.log(error);  }  };   return (  lt;divgt;  lt;input type="text"  placeholder="id"  onChange = {(e) =gt;{  setId(e.target.value)}}/gt;   lt;input type="text"  placeholder="name"  onChange = {(e) =gt;{  setName(e.target.value)}}/gt;   lt;input type="text"   placeholder="email"  onChange = {(e) =gt;{  setEmail(e.target.value)}}/gt;   lt;input type="text"   placeholder="age"  onChange = {(e) =gt;{  setAge(e.target.value)}}/gt;  lt;button onClick={addCustomer}gt;Create Customerlt;/buttongt;    lt;/divgt;  ) }    

EXPRESS SERVER

 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) =gt; {  res.send('Hello World!')  })   app.listen(port, ()=gt;{  console.log(`server is running on port ${port}`) });   

моя схема graphql на моем экспресс-сервере

 const axios = require('axios') const {  GraphQLObjectType,  GraphQLString,  GraphQLInt,  GraphQLSchema,  GraphQLList,  GraphQLNonNull  } = require('graphql')   //hardcoded data  const customers =[  {id: 1, name: 'luther wardle', email: 'lwardle@mail.com', age:35},  {id: 2, name: 'steve smith', email: 'ssmith@mail.com', age:30},  {id: 3, name: 'the main mayne', email: 'itme@mail.com', age:29},  {id: 4, name: 'jojo mojo', email: 'jmojo@mail.com', age:14}  ]   //customer type const CustomerType = new GraphQLObjectType({  name: 'Customer',  fields: () =gt;({  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; ilt;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 =gt; 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 =gt; res.data);  }  }  } })  module.exports = new GraphQLSchema({  query: RootQuery,  mutation });  

моя форма передавала все переменные в виде строк, когда ID и возраст должны были быть Int, после анализа Int проблема была решена

как показано ниже, я изменил переменные внутри своего компонента формы

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