reactjs - 反応アプリの入力フィールドを使用して hasura API データベースにデータを保存したい

Question

私の Hasura API データベースには、books(id,name,authorId) と authors(id,name) の 2 つのテーブルがあります。フロントエンドの入力フィールドからこれらのテーブルにデータを挿入したいと考えています。

次のミューテーションがありますが、データが Hasura API テーブルに保存されるようにフロントエンドでスキーマを定義する方法がわかりません

const ADD_BOOK = gql`
  mutation AddBook($type: String!) {
    addBook(type: $type) {
      name
    }
  }
`;
const ADD_AUTHOR = gql`
  mutation AddAuthor($type: String!) {
    addAuthor(type: $type) {
      name
    }
  }
`;

入力フォームです

function Form(){

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

  }