Basic post request

Author: nejcrogelsek

db.json

@@ -14,6 +14,26 @@
       "id": 3,
       "name": "Wonder Woman",
       "alterEgo": "Princess Diana"
+    },
+    {
+      "name": "Spiderman",
+      "alterEgo": "Third person",
+      "id": 4
+    },
+    {
+      "name": "Miki",
+      "alterEgo": "John Doe",
+      "id": 5
+    },
+    {
+      "name": "Test",
+      "alterEgo": "Big mike",
+      "id": 6
+    },
+    {
+      "name": "Test",
+      "alterEgo": "Big mike",
+      "id": 7
     }
   ],
   "friends": [
@@ -39,7 +59,11 @@
   "channels": [
     {
       "id": "codevolution",
-      "courses": ["react", "vue", "angular"]
+      "courses": [
+        "react",
+        "vue",
+        "angular"
+      ]
     }
   ],
   "colors": [
@@ -76,4 +100,4 @@
       "label": "purple"
     }
   ]
-}
+}

src/lib/hooks/useSuperHeroesData.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query'
+import { useQuery, useMutation } from 'react-query'
 import axios from 'axios'
 import { SuperHero } from 'interfaces'
 
@@ -11,9 +11,17 @@ const fetchSuperHeroes = () => {
   return axios.get('http://localhost:4000/superheroes')
 }
 
+const addSuperHero = (hero: { name: string; alterEgo: string }) => {
+  return axios.post('http://localhost:4000/superheroes', hero)
+}
+
 export const useSuperHeroesData = ({ onSuccess, onError }: Props) => {
   return useQuery('super-heroes', fetchSuperHeroes, {
     onError,
     onSuccess,
   })
 }
+
+export const useAddSuperHeroData = () => {
+  return useMutation(addSuperHero)
+}

src/pages/RQSuperHeroes/RQSuperHeroes.tsx

@@ -1,11 +1,14 @@
-import { FC } from 'react'
-import { useSuperHeroesData } from 'lib/hooks/useSuperHeroesData'
+import { FC, FormEvent, useState } from 'react'
+import { useSuperHeroesData, useAddSuperHeroData } from 'lib/hooks/useSuperHeroesData'
 import { SuperHero } from 'interfaces'
 import { Link } from 'react-router-dom'
 
 interface Props {}
 
 const RQSuperHeroes: FC<Props> = (props: Props) => {
+  const [name, setName] = useState<string>('')
+  const [alterEgo, setAlterEgo] = useState<string>('')
+
   const onError = (error: Error) => {
     console.log('Perform side effect after encountering error', error)
   }
@@ -14,10 +17,21 @@ const RQSuperHeroes: FC<Props> = (props: Props) => {
     console.log('Perform side effect after encountering error', response)
   }
 
-  const { data, isLoading, isError, error, isFetching } = useSuperHeroesData({ onSuccess, onError })
+  const { data, isLoading, isError, error, isFetching, refetch } = useSuperHeroesData({ onSuccess, onError })
+
+  const { mutate: addHero, isLoading: isLoadingHero, isError: isErrorHero, error: errorHero } = useAddSuperHeroData()
 
   console.log({ isLoading, isFetching })
 
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault()
+    const hero = {
+      name,
+      alterEgo,
+    }
+    addHero(hero)
+  }
+
   if (isLoading || isFetching) {
     return <h2>Loading...</h2>
   }
@@ -29,6 +43,12 @@ const RQSuperHeroes: FC<Props> = (props: Props) => {
   return (
     <>
       <h2>RQ Super Heroes</h2>
+      <form onSubmit={(e) => handleSubmit(e)}>
+        <input type="text" id="name" value={name} onChange={(e) => setName(e.target.value)} />
+        <input type="text" id="name" value={alterEgo} onChange={(e) => setAlterEgo(e.target.value)} />
+        <button type="submit">Add hero</button>
+      </form>
+      <button onClick={() => refetch()}>Refetch heroes</button>
       <ul>
         {data.data.map((hero: SuperHero, index: number) => (
           <li key={index}>