Initial query data

Author: nejcrogelsek

README.md

@@ -96,6 +96,10 @@ Sometimes a single component needs to call multiple APIs to fetch the necessary
 
 Dependent query - is dependent on the results of another query.
 
+**11. react-query initialData - Initial query data**
+
+On react-query heroes page we have displayed different heroes. If we click on the hero, we see `loading` text for a moment. To get rid of that initial loading statement, we can set `initialData` in useSuperHeroData.tsx file. If we refresh detail page, the loading button will show because we don't have any initial data at the start, because we skipped the fetch all super heroes query.
+
 ## Available Scripts
 
 In the project directory, you can run:

src/lib/hooks/useSuperHeroData.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query'
+import { useQuery, useQueryClient } from 'react-query'
 import axios from 'axios'
 import { SuperHero } from 'interfaces'
 
@@ -14,8 +14,20 @@ const fetchSuperHero = ({ queryKey }: { queryKey: any[] }) => {
 }
 
 export const useSuperHeroData = ({ onSuccess, onError, heroId }: Props) => {
+  const queryClient = useQueryClient()
   return useQuery(['super-hero', heroId], fetchSuperHero, {
     onError,
     onSuccess,
+    initialData: () => {
+      const hero = (queryClient.getQueryData('super-heroes') as any)?.data?.find(
+        (hero: SuperHero) => hero.id === parseInt(heroId),
+      )
+
+      if (hero) {
+        return { data: hero }
+      } else {
+        return undefined
+      }
+    },
   })
 }

src/pages/RQSuperHero/RQSuperHero.tsx

@@ -12,7 +12,7 @@ const RQSuperHero: FC = () => {
   }
 
   const { heroId } = useParams()
-  const { data, isLoading, isError, error } = useSuperHeroData({ onSuccess, onError, heroId: heroId ?? '' })
+  const { data, isLoading, isError, error } = useSuperHeroData({ onError, onSuccess, heroId: heroId ?? '' })
 
   if (isLoading) {
     return <h2>Loading...</h2>