Merge pull request #7 from nejcrogelsek/feature/09-homework

Feature/09 homework

Author: nejcrogelsek

README.md

@@ -61,6 +61,16 @@ Default value is set to false.
 
 Polling is paused when the window lose focus. To fix that issue we can set `refetchIntervalInBackground` property to true.
 
+6. Homework (Solution on branch: feature/09-homework)
+
+Combine polling with callbacks. Use the `refetchInterval` option to pull the api data every 3 seconds. Behind the scenes add a fourth superhero of your choice to the superheroes array in `db.json`.
+
+	a.) Within the onSuccess callback check if the number of heroes is 4 and ifit is the case I want you to stop the polling.
+	b.) Within the onError callback I want you to stop the polling.
+
+Hint:
+Mantain state variable whose initial value is 3000. State variable will be assigned to `refetchInterval` configuration. In callbacks check for the response / errors and set the state variable to false.
+
 ## Available Scripts
 
 In the project directory, you can run:

db.json

@@ -14,6 +14,11 @@
       "id": 3,
       "name": "Wonder Woman",
       "alterEgo": "Princess Diana"
+    },
+    {
+      "id": 4,
+      "name": "Spiderman",
+      "alterEgo": "Nejc Rogelšek"
     }
   ]
 }

src/pages/RQSuperHeroes/RQSuperHeroes.tsx

@@ -1,26 +1,31 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import { useQuery } from 'react-query'
 import axios from 'axios'
 import { SuperHero } from 'interfaces'
 
 interface Props {}
 
 const fetchSuperHeroes = () => {
-  return axios.get('http://localhost:4000/superheroes1')
+  return axios.get('http://localhost:4000/superheroes')
 }
 
 const RQSuperHeroes: FC<Props> = (props: Props) => {
+  const [interval, setInterval] = useState<any>(3000)
+
   const onError = (error: Error) => {
     console.log('Perform side effect after encountering error', error)
+    setInterval(false)
   }
 
   const onSuccess = (response: any) => {
     console.log('Perform side effect after encountering error', response)
+    if (response.data.length >= 4) setInterval(false)
   }
 
-  const { data, isLoading, isError, error, isFetching, refetch } = useQuery('super-heroes', fetchSuperHeroes, {
+  const { data, isLoading, isError, error, isFetching } = useQuery('super-heroes', fetchSuperHeroes, {
     onError,
     onSuccess,
+    refetchInterval: interval,
   })
 
   console.log({ isLoading, isFetching })
@@ -36,9 +41,6 @@ const RQSuperHeroes: FC<Props> = (props: Props) => {
   return (
     <>
       <h2>RQ Super Heroes</h2>
-      <button type="button" onClick={() => refetch()}>
-        Fetch superheroes
-      </button>
       <ul>
         {data?.data.map((hero: SuperHero, index: number) => (
           <li key={index}>{hero.name}</li>