How can I do to do mutations using React.js?

Question

I am trying to do some mutations using graphql and react.js but I got a problem. Indeed I got the following message:

ESLint: React Hook "useMutation" is called in function "onSubmit" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter.(react-hooks/rules-of-hooks)

But I need to do the mutation when I click to validate the form and for that I need the function "onSUbmit"

Here is my code:

import React from "react";
import { Modal, Button } from "react-bootstrap";
import {useForm} from "react-hook-form";
import {gql, useMutation, useQuery} from '@apollo/client';
import {BrowserRouter, Link, Redirect} from "react-router-dom";

const Register = (props) => {
  const { register, handleSubmit, errors  } = useForm();
  const onSubmit = data => {
    let username = data.Username;
    const GET_ACTIVITY = gql`
    mutation Register($username: String!){
    register(username: $username){
    username
    } 
    }
    `
    const [addchannel, { datas} ] = useMutation(GET_ACTIVITY);
    }
  console.log(props);

    return (
      <Modal show={props.show} onHide={props.onClose} centered>
        <div className="login-form">
          <h3 className="h3 mb-3 font-weight-normal" style={{textAlign: "center"}}> Register</h3>
          <form className="form-signin" onSubmit={handleSubmit(onSubmit)} >
            <div className="form-group">
            <input
              type="text"
              id="inputUsername"
              className="form-control"
              placeholder="Username"
              required=""
              autoFocus=""
              name="Username"
              ref={register({ required: true})}
            />
            <button className="btn btn-outline-success btn-block" type="submit" >
              <i className="fas fa-sign-in-alt" /> Register
            </button>
            <hr />
            </div>
          </form>
        </div>
      </Modal>
    );
  }

export default Register;

Could you help me please?

Thank you very much !

Answer 1

This line const [addchannel, { datas} ] = useMutation(GET_ACTIVITY); doesn't actually call the mutation. It just gives you the means to do it. You then have to call addChannel elsewhere in your code. That's why the call to useMutation has to be outside the onSubmit function. In your onSubmit function, you then call addChannel() . The component will then rerender and you can use datas .

EDIT: It seems to me that you though you could pass the username variable directly to the template literal. YOU WILL NEVER HAVE TO DO THIS, And even so: you'll have to pass it like this :

gql`
    mutation Register($username: String!){
    register(username: ${$username}){
    username
    } 
    }
    `

But again, you should never have to build dynamic queries like this.

You have to call your mutation like so:

addChannel({ // this is the function returned by useMutation
  variables: {
    username // that's where you pass username !
  }
})

So, there's no need to have GET_ACTIVITY inside your function, let alone the call to useMutation.

Answer 2

Don't call Hooks inside loops, conditions, or nested functions.

you can try this.

const Register = (props) => {
  const { register, handleSubmit, errors  } = useForm();
  const [addChannel, { datas} ] = useMutation(GET_ACTIVITY);
  const GET_ACTIVITY= gql`
    mutation Register($username: String!){
      register(username: $username){
        username
      } 
    }
    `
  const onSubmit = data => {
    addChannel({ variables: { username: data.Username } });;
  }
  ...