如何在 React native 中实现 UseMutation？

Question

I'm trying to implement my CreatUser Service in my App but it's not working. I'm using NestJS for the backend with GraphQl for the API's and React Native in the FrontEnd with appolo Server. I always get this 2 errors:

-POST http://localhost:3500/graphql 400 (Bad Request). -Uncaught (in promise) Error: Response not successful: Received status code 400.

It's working in my playground:

and this my code for the creation of the mutation: This where I creat my mutation:

import {gql} from "@apollo/client";  
export const  Creat_User = gql`
    mutation createUser($createUserInput:createUserInput!)
      {
        createUser (createUserInput: $createUserInput)
        {  
      nom
      password
      prenom
      mail
      Numero_Telephone
      role
      societe
       }
      }
    `;

and this My CreatUserScreen where i want to use my mutation:

import { useMutation } from '@apollo/client';
import React, { useState } from 'react';
import {
  Image,
  StyleSheet,
  TextInput,
  View,
  Text,
  KeyboardAvoidingView,
  Keyboard,
  TouchableOpacity,
  ScrollView} 
  from 'react-native';
import { Creat_User } from '../../../graphQl/CreateUserQL';

const CreateUserScreen = () => {

  const [nom,SetNom] = useState("Empty nom");
  const [Prenom,SetPrenom] = useState("Empty Prenom");
  const [Password,SetPassword] = useState("Empty Password");
  const [Mail,SetMail] = useState("Empty Mail");
  const [Societe,SetSociete] = useState("Empty Societe");
  const [Numero_Telephone,SetNumero_Telephone] = useState("Empty Numero_Telephone ");
  const [Role, SetRole] = useState("Empty Role");

  
const [data] = useMutation(Creat_User);

  const CreationUS = () => 
  {
    console.log("THIS MY nom ===>",nom)
    console.log("THIS MY Prenom ===>",Prenom)
    console.log("THIS MY Password ===>",Password)
    console.log("THIS MY Mail ===>",Mail)
    console.log("THIS MY Societe ===>",Societe)
    console.log("THIS MY Role ===>",Role)
    console.log("THIS MY Numero_Telephone ===>",Numero_Telephone)

    data({
      variables: {
        createUserInput: {
          nom:nom,
          password:Password,
          prenom:Prenom,
          mail: Mail,
          Numero_Telephone: Numero_Telephone,
          role:Role,
          societe: Societe
        },
      },
    })
    
  }



  return (
    <View style={{flex:1, backgroundColor:'white'}}>
      <ScrollView
        keyboardShouldPersistTaps="handled"
        contentContainerStyle=
        {{justifyContent: 'center',alignContent:'center'}}>
         
        <View style={{alignItems:'center'}}>
        <Image
          source={require('../../../images/logoMS.png')}
          style=
          {{
          width: "50%",
          height: 100,
          resizeMode: "contain",
          }}
        />
        </View>

        <KeyboardAvoidingView enabled>

          <View style={styles.SectionStyle}>
            <TextInput
              style={styles.inputStyle}
              underlineColorAndroid="black"
              placeholder="Enter Nom"
              placeholderTextColor="black"
              autoCapitalize="sentences"
              returnKeyType="next"
              onChangeText={(val)=>SetNom(val)}
              />
          </View>
          <View style={styles.SectionStyle}>
            <TextInput
              style={styles.inputStyle}
              underlineColorAndroid="black"
              placeholder="Enter Prenom"
              placeholderTextColor="black"
              returnKeyType="next"
              onChangeText={(val2)=>SetPrenom(val2)}
            />
          </View>

          <View style={styles.SectionStyle}>
            <TextInput
              style={styles.inputStyle}
              placeholder="Enter Password"
              placeholderTextColor="black"
              secureTextEntry={true}
              onChangeText={(val3)=>SetPassword(val3)}

            />
          </View>

          <View style={styles.SectionStyle}>
            <TextInput
              style={styles.inputStyle}
              placeholder="Enter Email"
              placeholderTextColor="black"
              keyboardType="email-address"
              returnKeyType="next"
              onChangeText={(val4)=>SetMail(val4)}

            />
          </View>

          <View style={styles.SectionStyle}>
            <TextInput
              style={styles.inputStyle}
              underlineColorAndroid="#f000"
              placeholder="Enter Numero Telephone"
              placeholderTextColor="#8b9cb5"  
              autoCapitalize="sentences"
              returnKeyType="next"
              keyboardType="numeric"
              blurOnSubmit={true}
              onChangeText={(val5)=>Number(SetNumero_Telephone(val5))}

            />
          </View>

          <View style={styles.SectionStyle}>
            <TextInput
              style={styles.inputStyle}
              underlineColorAndroid="#f000"
              placeholder="Choisir Role"
              placeholderTextColor="black"
              autoCapitalize="sentences"
              returnKeyType="next"
              onSubmitEditing={Keyboard.dismiss} 
              onChangeText={(val6)=>SetRole(val6)}

            />
          </View>

          <View style={styles.SectionStyle}>
            <TextInput
              style={styles.inputStyle}
              underlineColorAndroid="#f000"
              placeholder="Enter Nom Societe"
              placeholderTextColor="black"
              autoCapitalize="sentences"
              returnKeyType="next"
              onSubmitEditing={Keyboard.dismiss} 
              onChangeText={(val7)=>SetSociete(val7)}
 
            />
          </View>

          <TouchableOpacity
            style={styles.buttonStyle}
            activeOpacity={0.5}
            onPress={CreationUS}
          >
            <Text style={styles.buttonTextStyle}>REGISTER</Text>
          </TouchableOpacity>

        </KeyboardAvoidingView>
      </ScrollView>
    </View>
  
  );
};
export default CreateUserScreen;

I used useState Hook to get all the input from the user and it's working:

const [nom,SetNom] = useState("Empty nom");
  const [Prenom,SetPrenom] = useState("Empty Prenom");
  const [Password,SetPassword] = useState("Empty Password");
  const [Mail,SetMail] = useState("Empty Mail");
  const [Societe,SetSociete] = useState("Empty Societe");
  const [Numero_Telephone,SetNumero_Telephone] = useState("Empty Numero_Telephone ");
  const [Role, SetRole] = useState("Empty Role");

And this is the UseMutation function I want implement:

const [data] = useMutation(Creat_User);
  const CreationUS = () => 
  {
    console.log("THIS MY nom ===>",nom)
    console.log("THIS MY Prenom ===>",Prenom)
    console.log("THIS MY Password ===>",Password)
    console.log("THIS MY Mail ===>",Mail)
    console.log("THIS MY Societe ===>",Societe)
    console.log("THIS MY Role ===>",Role)
    console.log("THIS MY Numero_Telephone ===>",Numero_Telephone)

    data({
      variables: {
        createUserInput: {
          nom:nom,
          password:Password,
          prenom:Prenom,
          mail: Mail,
          Numero_Telephone: Numero_Telephone,
          role:Role,
          societe: Societe
        },
      },
    })
  } 

In the front i get this:

Answer 1

It looks like you're imitating the syntax of useQuery .

You need to pass the variables into useMutation :

const variables = {
  nom:nom,
  password:Password,
  prenom:Prenom,
  mail: Mail,
  Numero_Telephone: Numero_Telephone,
  role:Role,
  societe: Societe
};

const [myMutation] = useMutation(Creat_User,{ variables });