Проблема с выполнением мутации из приложения реакции

Question

const ADD_TODO = gql`
  mutation AddTodo($type: String!) {
    addTodo(type: $type) {
      name
    }
  }
`;
const ADD_AUTHOR = gql`
  mutation AddAuthor($type: String!) {
    addAuthor(type: $type) {
      name
    }
  }
`;

У меня есть две вышеуказанные мутации для добавления данных в мою базу данных. Я собираю поля имени, необходимые как для мутаций в bookval, так и для переменных authorval. Эти переменные передаются в функции AddBook и AddAuthor соответственно

AddBook(bookval) {
    const [addBook, { data }] = useMutation(ADD_BOOK);
    addBook({ variables: { type: bookval } });
  };

  AddAuthor(authorval) {
    const [addAuthor, { data }] = useMutation(ADD_AUTHOR);
    addAuthor({ variables: { type: authorval } });
  };

Вот функции, которые я вызываю при отправке формы. Но я получаю ошибку, что Hooks можно вызывать только внутри компонента функции

 <form>
                <p>Book Name</p> 
                <input 
                  type='text'
                  ref={ (value) => this.book = value}
                  placeholder="enter book's name"/> 
                  <br/>
                  <p>Author Name</p>
                <input 
                  type='text'
                  ref={ (value) => this.author = value}
                  placeholder="enter author's name"/>
                  <br/>
                  <br/>
                  <button onClick={this.getValues.bind(this)}>Donate</button>
              </form>

это моя форма

Answer 1

Вы можете сделать что-то вроде этого

return (
  <Mutation mutation={ADD_BOOK}>
    {(addBook, { data }) => (        
      <Mutation mutation={ADD_AUTHOR}>
        {(addAuthor, { data }) => (
          <div>
            <form
              onSubmit={e => {
                e.preventDefault();
                addBook({ variables: { type: this.book.value } });
                addAuthor({ variables: { type: this.author.value } });
                this.book.value = "";
                this.author.value = "";
              }}
            >
              <input
                ref={node => {
                  this.book = node;
                }}
              />
              <input
                ref={node => {
                  this.author = node;
                }}
              />
              <button type="submit">Add Item</button>
            </form>
          </div>
        )}
      </Mutation>
    )}
  </Mutation>
);

@ Обратите внимание, что данный код предназначен только для справки. Я предполагаю, что вам нужно добавить обе вещи из одной формы. если вам нужно добавить их отдельно, вы можете просто разделить код на 2 формы и 2 компонента мутации.

, если есть сомнения, прокомментируйте.