Merge pull request #13 from nejcrogelsek/feature/12-queryById

Feature/12 query by

Author: nejcrogelsek

README.md

@@ -39,19 +39,19 @@ Let's say the data doesn't change that often. We can set the stale time to 30 se
 
 0 seconds is possibly the safest value you can set to stale time, which is also the default value.
 
-3. react-query refetchOnMount
+**3. react-query refetchOnMount**
 
 If set to true, the query will refetch on mount if the data is stale. If set to false, will disable additional instances of a query to trigger background refetches. If set to 'always', the query will always refetch on mount. If set to a function, the function will be executed with the latest data and query to compute the value Defaults to true.
 
 Default value is set to true.
 
-4. react-query refetchOnWindowFocus
+**4. react-query refetchOnWindowFocus**
 
 If set to true, the query will refetch on window focus if the data is stale. If set to false, the query will not refetch on window focus. If set to 'always', the query will always refetch on window focus. If set to a function, the function will be executed with the latest data and query to compute the value. Defaults to true.
 
 Default value is set to true.
 
-5. react-query refetchInterval - Polling
+**5. react-query refetchInterval - Polling**
 
 Fetching data at regular intervals. For example: If you have component that shows real time price of different stocks, you might want to fetch the data every second so is in sync with UI.
 
@@ -61,24 +61,33 @@ 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)
+**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.
+    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.
 
-7. react-query select - Data Transformation
+**7. react-query select - Data Transformation**
 
 For data tranformation react-query provides us with `select` flag.
 
 `select` is function that receives onSuccess response and transform out data in the way we want it.
 
 In our example we transformed data to be an array of just heroes names instead of whole response.
 
+**8. QueryById - 2 solutions**
+
+We can query by id in two ways (look commits under branch name: `feature/12-queryById`).
+
+    a.) Solution 1 or first commit: **QueryById with manuali passed ID**
+    		- We can manually pass id into fetch function: file `useSuperHeroData`
+    b.) Solution 2 or second commit: **QueryById with react-query automatic passed id**
+    		- React query automatically pass id into fetch function: file `useSuperHeroData`
+
 ## Available Scripts
 
 In the project directory, you can run:

src/lib/hooks/useSuperHeroData.tsx

@@ -0,0 +1,21 @@
+import { useQuery } from 'react-query'
+import axios from 'axios'
+import { SuperHero } from 'interfaces'
+
+interface Props {
+  onSuccess: (response: any) => void
+  onError: (error: Error) => void
+  heroId: string
+}
+
+const fetchSuperHero = ({ queryKey }: { queryKey: any[] }) => {
+  const id = queryKey[1]
+  return axios.get(`http://localhost:4000/superheroes/${id}`)
+}
+
+export const useSuperHeroData = ({ onSuccess, onError, heroId }: Props) => {
+  return useQuery(['super-hero', heroId], fetchSuperHero, {
+    onError,
+    onSuccess,
+  })
+}

src/lib/hooks/useSuperHeroesData.tsx

@@ -15,9 +15,5 @@ export const useSuperHeroesData = ({ onSuccess, onError }: Props) => {
   return useQuery('super-heroes', fetchSuperHeroes, {
     onError,
     onSuccess,
-    select: (response) => {
-      const result = response.data.map((hero: SuperHero) => hero.name)
-      return result
-    },
   })
 }

src/pages/RQSuperHero/RQSuperHero.tsx

@@ -0,0 +1,31 @@
+import { useSuperHeroData } from 'lib/hooks/useSuperHeroData'
+import { FC } from 'react'
+import { useParams } from 'react-router-dom'
+
+const RQSuperHero: FC = () => {
+  const onError = (error: Error) => {
+    console.log('Perform side effect after encountering error', error)
+  }
+
+  const onSuccess = (response: any) => {
+    console.log('Perform side effect after encountering error', response)
+  }
+
+  const { heroId } = useParams()
+  const { data, isLoading, isError, error } = useSuperHeroData({ onSuccess, onError, heroId: heroId ?? '' })
+
+  if (isLoading) {
+    return <h2>Loading...</h2>
+  }
+
+  if (isError && error instanceof Error) {
+    return <h2>{error.message}</h2>
+  }
+  return (
+    <div className="rq-super-hero">
+      {data?.data.name} - {data?.data.alterEgo}
+    </div>
+  )
+}
+
+export default RQSuperHero

src/pages/RQSuperHeroes/RQSuperHeroes.tsx

@@ -1,5 +1,7 @@
 import { FC } from 'react'
 import { useSuperHeroesData } from 'lib/hooks/useSuperHeroesData'
+import { SuperHero } from 'interfaces'
+import { Link } from 'react-router-dom'
 
 interface Props {}
 
@@ -28,8 +30,10 @@ const RQSuperHeroes: FC<Props> = (props: Props) => {
     <>
       <h2>RQ Super Heroes</h2>
       <ul>
-        {data.map((heroName: string, index: number) => (
-          <li key={index}>{heroName}</li>
+        {data.data.map((hero: SuperHero, index: number) => (
+          <li key={index}>
+            <Link to={`/rq-superheroes/${hero.id}`}>{hero.name}</Link>
+          </li>
         ))}
       </ul>
     </>

src/routes/Routes.tsx

@@ -5,6 +5,7 @@ import Home from 'pages/Home/Home'
 import Page404 from 'pages/Page404/Page404'
 import SuperHeroes from 'pages/SuperHeroes/SuperHeroes'
 import RQSuperHeroes from 'pages/RQSuperHeroes/RQSuperHeroes'
+import RQSuperHero from 'pages/RQSuperHero/RQSuperHero'
 
 export enum RouteType {
   PUBLIC,
@@ -33,6 +34,11 @@ export const AppRoutes: AppRoute[] = [
     path: '/rq-superheroes',
     children: <RQSuperHeroes />,
   },
+  {
+    type: RouteType.PUBLIC,
+    path: '/rq-superheroes/:heroId',
+    children: <RQSuperHero />,
+  },
 ]
 
 const Routes: FC = () => {