Merge pull request #17 from nejcrogelsek/feature/15-dependent-queries

dependent queries

Author: nejcrogelsek

README.md

@@ -92,6 +92,10 @@ We can query by id in two ways (look commits under branch name: `feature/12-quer
 
 Sometimes a single component needs to call multiple APIs to fetch the necessary data. With react-query with simply call useQuery twice.
 
+**10. react-query - Dependent queries**
+
+Dependent query - is dependent on the results of another query.
+
 ## Available Scripts
 
 In the project directory, you can run:

db.json

@@ -29,5 +29,17 @@
       "id": 3,
       "name": "Rachel"
     }
+  ],
+  "users": [
+    {
+      "id": "test@gmail.com",
+      "channelId": "codevolution"
+    }
+  ],
+  "channels": [
+    {
+      "id": "codevolution",
+      "courses": ["react", "vue", "angular"]
+    }
   ]
 }

src/pages/DependentQueries/DependentQueries.tsx

@@ -0,0 +1,33 @@
+import axios from 'axios'
+import { FC } from 'react'
+import { useQuery } from 'react-query'
+
+interface Props {
+  email: string
+}
+
+const fetchUserByEmail = (email: string) => {
+  return axios.get(`http://localhost:4000/users/${email}`)
+}
+
+const fetchCoursesByChannelId = (channelId: string) => {
+  return axios.get(`http://localhost:4000/channels/${channelId}`)
+}
+
+const DependentQueries: FC<Props> = ({ email }: Props) => {
+  const { data: user } = useQuery(['user', email], () => fetchUserByEmail(email))
+  const channelId = user?.data.channelId
+  const { data: channel } = useQuery(['courses', channelId], () => fetchCoursesByChannelId(channelId), {
+    enabled: !!channelId,
+  })
+  return (
+    <div className="dependent-queries">
+      <h1>DependentQueries</h1>
+      {channel?.data.courses.map((course: string, index: number) => (
+        <div key={index}>{course}</div>
+      ))}
+    </div>
+  )
+}
+
+export default DependentQueries

src/routes/Routes.tsx

@@ -8,6 +8,7 @@ import RQSuperHeroes from 'pages/RQSuperHeroes/RQSuperHeroes'
 import RQSuperHero from 'pages/RQSuperHero/RQSuperHero'
 import ParallelQueries from 'pages/ParallelQueries/ParallelQueries'
 import DynamicParallelQueries from 'pages/DynamicParallelQueries/DynamicParallelQueries'
+import DependentQueries from 'pages/DependentQueries/DependentQueries'
 
 export enum RouteType {
   PUBLIC,
@@ -51,6 +52,11 @@ export const AppRoutes: AppRoute[] = [
     path: '/dynamic-parallel-queries',
     children: <DynamicParallelQueries heroIds={[1, 3]} />,
   },
+  {
+    type: RouteType.PUBLIC,
+    path: '/dependent-queries',
+    children: <DependentQueries email="test@gmail.com" />,
+  },
 ]
 
 const Routes: FC = () => {