Apollo Mutation on React Hooks

Question

Hi everyone, I started work on graphql and apollo,i can claim but just get request, i couldnt for mutation.My handleChange function is working i can take values. But i couldnt post request.My question is how can i post request with mutation on my work. This is my error :

createHttpLink.ts:146 POST http://localhost:3000/graphql 400 (Bad Request)
Uncaught (in promise) Error: Response not successful: Received status code 400
   at new ApolloError (index.ts:49)
   at Object.error (QueryManager.ts:236)
   at notifySubscription (Observable.js:140)
   at onNotify (Observable.js:179)
   at SubscriptionObserver.error (Observable.js:240)
   at iteration.ts:13
   at Array.forEach (<anonymous>)
   at iterateObserversSafely (iteration.ts:13)
   at Object.error (Concast.ts:177)
   at notifySubscription (Observable.js:140)
   at onNotify (Observable.js:179)
   at SubscriptionObserver.error (Observable.js:240)
   at createHttpLink.ts:196

This is my Apollo.js

import { gql } from '@apollo/client';
export const getMovieQuery = gql`
   {
       movies {
           title
           description
           year
           directorId {
               name
               birth
               movies {
                   title
                   description
               }
           }
       }
   }
`;

export const getDirectorQuery =gql`
{
   directors{
       id,
       name
   }
}
`
export const ADD_MOVIE = gql`
   mutation($title: String!,$description: String,$year: Int!,$directorId: ID!){
       addMovie(title:$title,description:$description,year:$year,directorId:$directorId){
           title,
           year,
           director{
               name,
               birth
           }
       }
   }
`;

This is my Page

import {useState} from 'react'
import {useQuery,useMutation} from '@apollo/client';
import {ADD_MOVIE,getDirectorQuery} from '../apollo/apolloContext'
function AddMovie() {
    const [addMovie] = useMutation(ADD_MOVIE);
    const {error,data,loading} = useQuery(getDirectorQuery)
    const [addedMovie, setAddedMovie] = useState({
        title:"",
        description:"",
        year:"",
        directorId:""
    });
    const handleSubmit = e => {
        e.preventDefault();
        console.log(addedMovie);
        addMovie({variables:{
            title:addedMovie.title,
            description:addedMovie.description,
            year:parseInt(addedMovie.year,10),
            directorId:addedMovie.directorId
        }});
        setAddedMovie({title:"",
        description:"",
        year:"",
        directorId:""})
    }
    const handleChange = e =>{
        setAddedMovie({
            ...addedMovie,[e.target.name]:e.target.value
        })
    }

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <input type="text" name="title" onChange={handleChange} />
                <input type="text" name="description" onChange={handleChange}/>
                <input type="text" name="year" onChange={handleChange}/>
                <select type="text" name="directorId" onChange={handleChange}>
                    <option>Deneme</option>
                    {loading===true?<option>Loading..</option>:
                     data.directors.map(director=><option key={director.id} value={director.id}>{director.name}</option>)
                    }
                </select>
                <button type="submit">kaydet</button>
            </form>
        </div>
    )
}

export default AddMovie

And on my backend everything is fine i tested my mutation it's working.But if u want look it's my backend codes:

const Mutation = new GraphQLObjectType({
    name:'Mutation',
    fields:{
        addMovie:{
            type:MovieType,
            args:{
                title:{type:GraphQLNonNull(GraphQLString)},
                description:{type:GraphQLNonNull(GraphQLString)},
                directorId:{type:GraphQLNonNull(GraphQLString)},
                year:{type:GraphQLNonNull(GraphQLInt)}
            },
            resolve(parent,args){
                const movie = new Movie({
                    title:args.title,
                    description:args.description,
                    directorId:args.directorId,
                    year:args.year
                });
                return movie.save()
            }
        },
        addDirector:{
            type:DirectorType,
            args:{
                name:{type:GraphQLNonNull(GraphQLString)},
                birth:{type:GraphQLNonNull(GraphQLInt)},
            },
            resolve(parent,args){
                const director = new Director({
                    name:args.name,
                    birth:args.birth,
                });
                return director.save()
            }
        }
    }})

my graphql interface

  mutation{
    addMovie(title:"Harry Potter 3"description:"lorem ipsum",year:2004,directorId:"60105d20fe4a70310c0b8c4a")
    {
        title,
      description
    } 
  }

and this my data :

{
  "data": {
    "addMovie": {
      "title": "Harry Potter 3",
      "description": "lorem ipsum"
    }
  }
}

Answer 1

make sure the, variable data type declared in the mutation on the server , is same with ones in the queries and the values you are passing is the right type..I had the same error turns out the id variable type i declared in the mutation handler is declared as String and the declaration on server is ID.Changing that fixed it for me.