apollo client- [Error: Response not successful: Received status code 400] - react-native

Question

The application uses apollo server and react Native in the frontend. In the backend I use apollo server. The request works via the Playground and I don't get any errors. Queries in the frontend without parameters also work perfectly. When I make a mutation in the frontend, I get the following error error: Response not successful: Received status code 400.
src/queries/queries.js
import { gql } from "#apollo/client";
export const SIGNUP_USERS = gql`
mutation createUser($newUser:UserInput!) {
CreateUser(newUser:$newUser){
firstName
}
}
src/components/Signup.js
import { useMutation } from '#apollo/client'
import { SIGNUP_USERS } from '../gqloperations/Mutation'
const Signup = () => {
const [formData,setFormData] = useState({firstName:'',LastName:'',email:'',password:''})
const [signupUser,{data,loading,error}] = useMutation(SIGNUP_USERS)
if(loading) return <Text>Loading... 🚀</Text>
if(error) return console.log("error is=====>",error)
const handleChange = (name,value) => {
setFormData({
...formData,
[name] : value
})
}
const handleSubmit = () => {
console.log("signup data is",formData)
signupUser({
variables:{
newUser:formData
}
})
}
return (
<View style={styles.container}>
<View style={styles.innerContainer}>
<View style={styles.innerView}>
<View style={styles.titleView} >
<Text style={styles.title}>Signup</Text>
</View>
{ error && <View> <Text style={{color:'red'}}>{error.message}</Text></View> }
{ data && data.user && <View><Text style={{color:'green'}}>{data.firstName} Signup sucessfully!</Text> </View> }
<View style={{height:hp('5%')}}></View>
<View style={styles.textInputView}>
<TextInput placeholder='Please Enter FirstName' style={styles.textInput} onChangeText={(text) => handleChange('firstName',text)} value={formData.firstName}
/>
</View>
<View style={styles.textInputView}>
<TextInput placeholder='Please Enter LastName' style={styles.textInput} onChangeText={(text) => handleChange('LastName',text)} value={formData.LastName} />
</View>
<View style={styles.textInputView}>
<TextInput placeholder='Please Enter Email' style={styles.textInput} onChangeText={(text) => handleChange('email',text)} value={formData.email} />
</View>
<View style={styles.textInputView}>
<TextInput secureTextEntry={true} placeholder='Please password' style={styles.textInput} onChangeText={(text) => handleChange('password',text)} value={formData.password}/>
</View>
<TouchableOpacity style={styles.buttonView} onPress={handleSubmit} >
<Text style={styles.btnText}>Signup</Text>
</TouchableOpacity>
</View>
</View>
</View>
)
}
What is wrong in my code ?

Answer 1

A 400 error from a GraphQL server is almost always an invalid query or mutation.
Your mutation:
mutation createUser($newUser:UserInput!) {
CreateUser(newUser:$newUser){
firstName
}
}
looks fine. Odds are that formData does not have the same shape as UserInput
variables:{ newUser:formData }
Possible issues:
missing a required key
has an unexpected key
has an invalid value for a key
Attempt the mutation from the playground first to troubleshoot.