Graphql mutation containing an input - 400 error on submit

Help
,
1

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