Apollo-client: Unhandled Rejection (Error): Network error: Response not successful: Received status code 400

[alakdam07]

This is my App.js

import React from "react";
import { ApolloClient, HttpLink, InMemoryCache } from "apollo-boost";
import { ApolloProvider } from "react-apollo";
import "./App.css";
import Post from "./components/Post";
import Addpost from "./components/Addpost";

const client = new ApolloClient({
link: new HttpLink({
uri: "http://localhost:5000/graphql"
}),
cache: new InMemoryCache()
});
function App() {
return (

);
}

export default App;

This is Addpost.js
import React, { Component } from "react";
import { gql } from "apollo-boost";
import { graphql } from "react-apollo";
import { flowRight as compose } from "lodash";

const getPerson = gql { person { firstname lastname email } } ;

const addPostMutation = gql mutation { addpost(title: "", content: "", personid: "") { title id } } ;

export class Addpost extends Component {
state = {
title: " ",
content: " ",
personid: " "
};

handleChange = e => {
//console.log(e.target.value);
this.setState({ [e.target.id]: e.target.value });
};
handleSubmit = e => {
e.preventDefault();
//console.log(this.state);
this.props.addPostMutation();
};
render() {
//console.log(this.props);
//const{data}= this.props //this one fetch the data
const { getPerson } = this.props;

return (
  <div>
    <form id="addPost" onSubmit={this.handleSubmit}>
      <div className="field">
        <label> Post name </label>
        <input type=" text" id="title" onChange={this.handleChange} />
      </div>
      <div className="field">
        <label> Content </label>
        <input type="text" id="content" onChange={this.handleChange} />
      </div>
      <div className="field">
        <label> Person: </label>
        <select id="personid" onChange={this.handleChange}>
          <option>select person</option>
          {getPerson.loading ? (
            <option disabled>getPerson loading...</option>
          ) : (
            getPerson.person.map(person => {
              return (
                <option key={person.id} value={person.id}>
                  {" "}
                  {person.firstname} {person.lastname}{" "}
                </option>
              );
            })
          )}
        </select>
      </div>
      <button>+</button>
    </form>
  </div>
);

}
}

export default compose(
graphql(getPerson, { name: "getPerson" }),
graphql(addPostMutation, { name: "addPostMutation" })
)(Addpost);

Its run fine when I fetch the data but when I add new post it gives me error. What I am doing wrong?

[akhilvc10]

How did you fix ?

[alakdam07]

I forget it, What was the problem and how did I fixed it?

[sathishlakshs]

can you check your resolver name for that exact query?

<----backend---->
export const resolvers = {
Query: {
list: ()=> List.find()
}
}
<-----frontend------>
client
.query({
query: gql query { list { id name } }
})
.then(result => console.log(result));

resolver name must be same.
this works for me

[Ezra-Siton-UIX]

The best idea to solve errors like this is to run your Query under the playground.

Example:
I got this error for this scenario.

The API schema excepted speakerId Arguments.

But I created helloError instead (In the "real world" it could be speakerid or speaker_Id instead of speakerId:

const FEATURED_SPEAKER = gql`
  mutation markFeatured($speakerId: ID!, $featured: Boolean!){
    markFeatured(helloError: $speakerId , featured: $featured){
      id
      featured
    }
  }

Under The playground this is the error:

I run the mutation on click (But the mutation throw error):

const [ markFeatured ] = useMutation(FEATURED_SPEAKER);

...rest of the code 

onClick={ async() => {
  await markFeatured({ variables: {
  speakerId: id, featured: true
   }})
 }} 

The console also throw an error:

Uncaught (in promise) Error: Response not successful: Received status code 400

One more way to debug the same issues is by chrome network tab (Again compare your Payload to API):