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):