Login Form React Native and Apollo

Question

I am learning Graphql while developing a real project, it's awesome, I have built the server already, Apollo server is great, now the problem is react client, it has and tags, I can not know how to run the mutation on click the button of the form. Thanks in advance.

THE MUTATION

const LOGIN_CUSTOMER = gql`

mutation LoginCustomers($email: String!, $password: String!) {
    loginCustomers(input: { email: $email, secretop: $password }) {
      sign
      email
      id
    }
  }
`;

THE MUTATION FUNCTION

const { email, password } = this.state;
    return (
      <Mutation
        mutation={LOGIN_CUSTOMER}
        variables={{ email, password }}
        onCompleted={data => {
          console.log("MUTATION_DATA", data);
          AsyncStorage.setItem("token", data.token);
          AsyncStorage.setItem("email", data.email);
          AsyncStorage.setItem("_id", data._id);
          this.props.navigation.navigate("App");
        }}
      >
        {(loginCustomers, { data }) => (
          <Container>
            <Content>
              <Image
                source={require("../../assets/images/log-header.jpg")}
                style={{ height: 300, width: null, flex: 1 }}
              />

              <Form style={{ paddingLeft: 15, paddingRight: 15 }}>
                <Item>
                  <Input
                    keyboardType="email-address"
                    autoCapitalize="none"
                    onChangeText={value => {
                      this.changeStateValues("email", value);
                    }}
                    placeholder="Email"
                  />
                </Item>
                <Item last>
                  <Input
                    secureTextEntry={true}
                    onChangeText={value => {
                      this.changeStateValues("password", value);
                    }}
                    placeholder="Contraseña"
                  />
                </Item>

                <Button
                  style={{ marginTop: 20 }}
                  full
                  warning
                  onPress={() => this.signIn()}
                >
                  <RobotoText style={styles.ingreso}>Ingresar</RobotoText>
                </Button>

                <Button
                  onPress={() => this.props.navigation.navigate("Forgot")}
                  transparent
                  full
                >
                  <RobotoText style={{ color: "#E3A80D" }}>
                    Perdí mi contraseña
                  </RobotoText>
                </Button>
              </Form>
            </Content>

            <Footer>
              <Button onPress={() => this.setType()} transparent>
                <RobotoText>Registrarse</RobotoText>
              </Button>
            </Footer>
          </Container>
        )}
      </Mutation>
    );

Answer 1

Your form could look something like this...

<Form method="POST" onSubmit={async event => {
  event.preventDefault()
  await loginCustomer()
}}>

Answer 2

After all, this is what I did, pass a callback with the name of the mutation and trigger it on press {(login, { data }) => (

                  <Form
                    style={{
                      paddingLeft: 15,
                      paddingRight: 15
                    }}
                  >
                    <Item>
                      <Input
                        keyboardType="email-address"
                        autoCapitalize="none"
                        onChangeText={value => {
                          this.changeStateValues("email", value);
                        }}
                        placeholder="Email"
                        value={this.state.email}
                      />
                    </Item>
                    <Item last>
                      <Input
                        secureTextEntry={true}
                        onChangeText={value => {
                          this.changeStateValues("password", value);
                        }}
                        placeholder="Contraseña"
                        value={this.state.password}
                      />
                    </Item>

                    <Button
                      style={{ marginTop: 20 }}
                      full
                      warning
                      onPress={() => {
                        login({
                          variables: {
                            email: this.state.email,
                            password: this.state.password
                          }
                        })
                          .then((res: any) => {
                            signIn(res.data.login.token);
                            this.props.navigation.navigate("App");
                          })
                          .catch(err => (
                            <RobotoText style={styles.ingreso}>
                              {err}
                            </RobotoText>
                          ));
                      }}
                    >
                      <RobotoText style={styles.ingreso}>Ingresar</RobotoText>
                    </Button>

                    <Button
                      onPress={() => this.props.navigation.navigate("Forgot")}
                      transparent
                      full
                    >
                      <RobotoText style={{ color: "#E3A80D" }}>
                        Perdí mi contraseña
                      </RobotoText>
                    </Button>
                  </Form>
                </Content>

                <Footer>
                  <Button
                    onPress={() => this.props.navigation.navigate("Signup")}
                    transparent
                  >
                    <RobotoText style={{}}>Registrarse</RobotoText>
                  </Button>
                </Footer>
              </Container>
            )}
          </Mutation>