Graphql mutation containing an input - Possible Unhandled Promise Rejection - graphql

Question

I'm pretty new to graphql and react native. I'm working on a project where I am trying to create a sign-up screen I'm currently getting a 400 error stating: Possible Unhandled Promise Rejection. I was able to get this screen to work earlier, but I'm trying to use graphql input in my mutation. Currently I have:
import React, { useState } from 'react';
import {
View,
Text,
TextInput,
Pressable,
ActivityIndicator,
Alert,
} from 'react-native';
import AsyncStorage from '#react-native-async-storage/async-storage';
import { useNavigation } from '#react-navigation/native';
import { RootStackParamList, MessageNavProps } from '../navigation/types';
import { StackNavigationProp } from '#react-navigation/stack';
import Checkbox from 'expo-checkbox';
import { useMutation, gql } from '#apollo/client';
const SIGN_UP_MUTATION = gql`
mutation signup($input: UserInput!}) {
signup(input: $input){
token
}
}
`;
const SignupScreen = () => {
const [email, setEmail] = useState('');
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [birth_date, setBirth_date] = useState('');
const [genderF, setGenderF] = useState(false);
const [genderM, setGenderM] = useState(false);
const [genderNB, setGenderNB] = useState(false);
const { navigate } = useNavigation<StackNavigationProp<RootStackParamList>>()
AsyncStorage.getItem('token').then((res) => console.log(res))
const [signup, { data, error, loading }] = useMutation(SIGN_UP_MUTATION);
if (error) {
Alert.alert('Error signing up. Try again' + error.message)
}
if (data) {
AsyncStorage
.setItem('token', data.signup.token)
.then(() => {
console.log(data.signup.token)
navigate('Home')
}).catch(function(error){
console.log('saving erro ' + error.message);
})
}
const onSubmit = () => {
signup({variables: /*{input:*/{firstName, lastName, username, email, password, basicInfo: { birth_date, gender_identity: {female: genderF, male: genderM, nonbinary: genderNB}, }}})
}
return (
<View style={{ padding: 20 }}>
<TextInput
placeholder="firstName"
value={firstName}
onChangeText={setFirstName}
style={{
fontSize: 18,
width: '100%',
marginVertical: 25,
}}
/>
...
<Pressable
onPress={onSubmit}
style={{
backgroundColor: '#e33062',
height: 50,
borderRadius: 5,
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'center',
marginTop: 30,
}}
>
{loading && <ActivityIndicator />}
<Text
style={{
color: 'white',
fontSize: 18,
fontWeight: 'bold'
}}>
Sign up
</Text>
</Pressable>
</View>
)
}
export default SignupScreen;
In my backend:
input UserInput {
username: String
email: String!
firstName: String
lastName: String
password: String
basicInfo: BasicInfoInput!
}
input BasicInfoInput {
birth_date: String!
gender_identity: GenderIndentityInput!
}
input GenderIndentityInput {
female: Boolean
male: Boolean
non_binary: Boolean
}
type Mutation {
signup(input: UserInput! ): Auth
}
In apollo graphql studio,
mutation{
signup(
$input:
{email:"", firstName:"", lastName:"", username:"", password:"",
basicInfo: { birth_date: "", gender_identity: { male: "", female: "", nonbinary: ""}}
}
)
{
token,
}
}
worked.
I tried changing my SIGN_UP_MUTATION to:
const SIGN_UP_MUTATION = gql`
mutation signup($input: {$email: String!, $firstName: String!, $lastName: String!, $password: String!, $username: String!, $basicInfo: { $birth_date: String!, $gender_identity: { $female: Boolean!, $male: Boolean!, $nonbinary: Boolean!}} }) {
signup(input: $input){
token
}
}
`;
but this didn't work either. I would really appreciate any help or advice on what I'm doing wrong. Thank you!
Also, before, I had:
const SIGN_UP_MUTATION = gql`
mutation signup($email: String!, $firstName: String!, $lastName: String!, $password: String!, $username: String!, $avatar: String) {
signup(email: $email, firstName: $firstName, lastName: $lastName, password: $password, username: $username, avatar: $avatar){
token
}
}
`;
with
const onSubmit = () => {
signup({variables: {firstName, lastName, username, email, password }})
}
which worked