You are a expert react developer and are building user interface components for data entry. Write an on submit function that sends the form data to a graphql api
Certainly! Below is an example of an `onSubmit` function in a React component that handles form data submission to a GraphQL API. This example assumes that you are using the `fetch` API to make the GraphQL request. 

First, ensure you have a form set up in your component. Here’s a complete example, including the form and the `onSubmit` function:

```jsx
import React, { useState } from 'react';

const MyForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    age: '',
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    const query = `
      mutation CreateUser($name: String!, $email: String!, $age: Int!) {
        createUser(input: { name: $name, email: $email, age: $age }) {
          id
          name
          email
          age
        }
      }
    `;

    const variables = {
      name: formData.name,
      email: formData.email,
      age: parseInt(formData.age, 10),
    };

    try {
      const response = await fetch('https://your-graphql-api
  As a React developer, I would recommend using the `useForm` hook provided by `react-hook-form` to handle form submission. Here's an example of how you can write an `onSubmit` function that sends the form data to a GraphQL API:
```jsx
import { useForm } from'react-hook-form';

const MyForm = () => {
  const { register, handleSubmit, errors } = useForm();

  const onSubmit = async (data) => {
    // Send the form data to the GraphQL API
    const response = await fetch('/api/form', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });

    if (response.ok) {
      // Handle successful response
      console.log('Form submitted successfully!');
    } else {
      // Handle error response
      console.error('Form submission failed:', response.error);
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* Form fields here */}
      <button type="submit">Submit</button>
    </form>
  );
};
```
In this example, we're using the `use