unable to use fetch in formik and post data to api

Question

I was trying to post the formik form data using fetch and mutations. I have created my API using neo4j graphql library and Apollo server now i want to post data into the API using react as frontend.

import './App.css';
import { useFormik } from "formik" 

function App() {
  const updateNameFetch = async (name,age,sex,weight,smoking,drinking,nationality,birth_type) => {
    const query = JSON.stringify({
      query: `mutation {
          createUsers(input:{
            user_name: "${name}"
            age: ${age}
            sex: "${sex}"
            weight: ${weight}
            smoking:"${smoking}"
            drinking: "${drinking}"
            nationality:"${nationality}"
            birth_type: "${birth_type}"
          }

          ){
            users{
              user_name
            }
          }
      }
      `
    });

  const formik = useFormik({
    initialValues:{
      name:"",
      age: "",
      sex: "",
      weight:"",
      smoking:"",
      drinking:"",
      nationality:"",
      birth_type:"",
    },
    onSubmit:(values) => {
      console.log(values.name);
      fetch("graphql-newone.herokuapp.com/",{
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: query,
      })
    }
  })

  return (
    <div className="App">
<form onSubmit={formik.handleSubmit}>
  <div className='input-container'>

    <input
    id="name"
    name="name"
    type="text"
    placeholder="Name"
    onChange={formik.handleChange}
    value = {formik.values.name}
    />

<input
    id="sex"
    name="sex"
    type="text"
    placeholder="Sex"
    onChange={formik.handleChange}
    value = {formik.values.sex}
    />

<input
    id="age"
    name="age"
    type="text"
    placeholder="Age"
    onChange={formik.handleChange}
    value = {formik.values.age}
    />

<input
    id="weight"
    name="weight"
    type="text"
    placeholder="weight"
    onChange={formik.handleChange}
    value = {formik.values.weight}
    />

<input
    id="smoking"
    name="smoking"
    type="text"
    placeholder="smoking"
    onChange={formik.handleChange}
    value = {formik.values.smoking}
    />

<input
    id="nationality"
    name="nationality"
    type="text"
    placeholder="nationality"
    onChange={formik.handleChange}
    value = {formik.values.nationality}
    />
  
  <input
    id="birth_type"
    name="birth_type"
    type="text"
    placeholder="birth_type"
    onChange={formik.handleChange}
    value = {formik.values.birth_type}
    />
    
  </div>
  <button type="submit">Submit</button>
</form>
    </div>
  );
}}

export default App;

I am getting this error and unable to rectify it

Line 28:18: React Hook "useFormik" is called in function "updateNameFetch" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" react-hooks/rules-of-hooks

Search for the keywords to learn more about each error.

Answer 1

As it says, you cant use the useFormik hook inside the function

import './App.css';
  import { useFormik } from "formik" 
  
  function App() {
    const postData = async(query)=>{
      let res = await fetch("graphql-newone.herokuapp.com/",{
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: query,
      })
      let data = await res.json()
      console.log(data)
    }

    const formik = useFormik({
      initialValues:{
        name:"",
        age: "",
        sex: "",
        weight:"",
        smoking:"",
        drinking:"",
        nationality:"",
        birth_type:"",
      },
      onSubmit:async(values) => {
        let query = JSON.stringify({
          query: `mutation {
              createUsers(input:{
                user_name: "${values.name}"
                age: ${values.age}
                sex: "${values.sex}"
                weight: ${values.weight}
                smoking:"${values.smoking}"
                drinking: "${values.drinking}"
                nationality:"${values.nationality}"
                birth_type: "${values.birth_type}"
              }
    
              ){
                users{
                  user_name
                }
              }
          }
          `
        });
       postData(query)
      }
    })
  
    return (
      <div className="App">
  <form onSubmit={formik.handleSubmit}>
    <div className='input-container'>
  
      <input
      id="name"
      name="name"
      type="text"
      placeholder="Name"
      onChange={formik.handleChange}
      value = {formik.values.name}
      />
  
  <input
      id="sex"
      name="sex"
      type="text"
      placeholder="Sex"
      onChange={formik.handleChange}
      value = {formik.values.sex}
      />
  
  <input
      id="age"
      name="age"
      type="text"
      placeholder="Age"
      onChange={formik.handleChange}
      value = {formik.values.age}
      />
  
  <input
      id="weight"
      name="weight"
      type="text"
      placeholder="weight"
      onChange={formik.handleChange}
      value = {formik.values.weight}
      />
  
  <input
      id="smoking"
      name="smoking"
      type="text"
      placeholder="smoking"
      onChange={formik.handleChange}
      value = {formik.values.smoking}
      />
  
  <input
      id="nationality"
      name="nationality"
      type="text"
      placeholder="nationality"
      onChange={formik.handleChange}
      value = {formik.values.nationality}
      />
    
    <input
      id="birth_type"
      name="birth_type"
      type="text"
      placeholder="birth_type"
      onChange={formik.handleChange}
      value = {formik.values.birth_type}
      />
      
    </div>
    <button type="submit">Submit</button>
  </form>
      </div>
    );
  }
  
  export default App;