Merge pull request #15 from nejcrogelsek/feature/14-dynamic-parallel-queries

useQueries - dynamic parallel queries

Author: nejcrogelsek

src/pages/DynamicParallelQueries/DynamicParallelQueries.tsx

@@ -0,0 +1,29 @@
+import axios from 'axios'
+import { FC } from 'react'
+import { useQueries } from 'react-query'
+
+interface Props {
+  heroIds: number[]
+}
+
+const fetchSuperHero = (id: number) => {
+  return axios.get(`http://localhost:4000/superheroes/${id}`)
+}
+
+const DynamicParallelQueries: FC<Props> = ({ heroIds }: Props) => {
+  const queryResults = useQueries(
+    heroIds.map((id) => ({
+      queryKey: ['superhero', id],
+      queryFn: () => fetchSuperHero(id),
+    })),
+  )
+
+  console.log(queryResults)
+  return (
+    <div className="dynamic-parallel-queries">
+      <h1>DynamicParallelQueries</h1>
+    </div>
+  )
+}
+
+export default DynamicParallelQueries

src/routes/Routes.tsx

@@ -7,6 +7,7 @@ import SuperHeroes from 'pages/SuperHeroes/SuperHeroes'
 import RQSuperHeroes from 'pages/RQSuperHeroes/RQSuperHeroes'
 import RQSuperHero from 'pages/RQSuperHero/RQSuperHero'
 import ParallelQueries from 'pages/ParallelQueries/ParallelQueries'
+import DynamicParallelQueries from 'pages/DynamicParallelQueries/DynamicParallelQueries'
 
 export enum RouteType {
   PUBLIC,
@@ -45,6 +46,11 @@ export const AppRoutes: AppRoute[] = [
     path: '/parallel-queries',
     children: <ParallelQueries />,
   },
+  {
+    type: RouteType.PUBLIC,
+    path: '/dynamic-parallel-queries',
+    children: <DynamicParallelQueries heroIds={[1, 3]} />,
+  },
 ]
 
 const Routes: FC = () => {