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 !

I think the ```useMutation``` should be outside of the ```onSubmit``` function and inside you will just call it like ```addchannel()``` — szczocik, Feb 18 '21 at 09:42
Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function. please read [Rules of Hooks](https://reactjs.org/docs/hooks-rules.html) — Muhammad Taseen, Feb 18 '21 at 09:51
Thank you but how can I call that : `useMutation(GET_ACTIVITY)` ? The variable `GET_ACTIVITY` is inside the `onSubmit` function — teatzr, Feb 18 '21 at 09:57

jperl · Accepted Answer · 2021-02-18T10:13:04.133

0

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.

edited Feb 18 '21 at 10:13

answered Feb 18 '21 at 09:44

jperl

4,662
2
16
29

Thank you but how can I call that : `useMutation(GET_ACTIVITY)` ? The variable `GET_ACTIVITY` is inside the `onSubmit` function – teatzr Feb 18 '21 at 09:57
Does `GET_ACTIVITY` have to be in onSubmit? – jperl Feb 18 '21 at 10:02
Static variables have to be outside your component. You can even put this in a dedicated file where you store your queries. – jperl Feb 18 '21 at 10:03
I think I understood what the problem you're having is. I edited my answer. See if that helps. – jperl Feb 18 '21 at 10:07

score 0 · Answer 2 · answered Feb 18 '21 at 09:59

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 } });;
  }
  ...

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

2 Answers2