chore: add react-query

package.json

@@ -10,6 +10,7 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.29.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3"

pnpm-lock.yaml

@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@tanstack/react-query':
+    specifier: ^5.29.2
+    version: 5.29.2(react@18.2.0)
   react:
     specifier: ^18.2.0
     version: 18.2.0
@@ -663,6 +666,19 @@ packages:
       '@swc/counter': 0.1.3
     dev: true
 
+  /@tanstack/query-core@5.29.0:
+    resolution: {integrity: sha512-WgPTRs58hm9CMzEr5jpISe8HXa3qKQ8CxewdYZeVnA54JrPY9B1CZiwsCoLpLkf0dGRZq+LcX5OiJb0bEsOFww==}
+    dev: false
+
+  /@tanstack/react-query@5.29.2(react@18.2.0):
+    resolution: {integrity: sha512-nyuWILR4u7H5moLGSiifLh8kIqQDLNOHGuSz0rcp+J75fNc8aQLyr5+I2JCHU3n+nJrTTW1ssgAD8HiKD7IFBQ==}
+    peerDependencies:
+      react: ^18.0.0
+    dependencies:
+      '@tanstack/query-core': 5.29.0
+      react: 18.2.0
+    dev: false
+
   /@types/estree@1.0.5:
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
     dev: true

src/app.tsx

@@ -1,5 +1,20 @@
 import { Router } from "./router";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      retry: false,
+    },
+  },
+});
 
 export function App() {
-  return <Router />;
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Router />
+    </QueryClientProvider>
+  );
 }

src/hooks/useQuery.ts

@@ -1,28 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-
-export function useQuery<T, E = Error>(
-  callback: () => Promise<T>,
-  /* eslint-disable-next-line @typescript-eslint/no-explicit-any*/
-  dependencies: any[] = [],
-) {
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<E | undefined>();
-  const [data, setData] = useState<T | undefined>();
-
-  const callbackMemoized = useCallback(() => {
-    setLoading(true);
-    setError(undefined);
-    setData(undefined);
-    callback()
-      .then(setData)
-      .catch(setError)
-      .finally(() => setLoading(false));
-    /* eslint-disable-next-line react-hooks/exhaustive-deps*/
-  }, dependencies);
-
-  useEffect(() => {
-    callbackMemoized();
-  }, [callbackMemoized]);
-
-  return { loading, error, data };
-}

src/pages/home.tsx

@@ -1,10 +1,9 @@
 import { PodcastPreviewCard } from "../components/podcast-preview-card";
-import { podcastsService } from "../services/podcasts/podcasts.service";
-import { useQuery } from "../hooks/useQuery";
 import { useState } from "react";
+import { useTopPodcastsQuery } from "../services/podcasts/podcast.hooks";
 
 export function Home() {
-  const { data } = useQuery(() => podcastsService.getTopPodcasts());
+  const { data, isLoading } = useTopPodcastsQuery();
   const [search, setSearch] = useState("");
 
   const filteredData = data?.filter((podcast) => {
@@ -14,6 +13,10 @@ export function Home() {
     );
   });
 
+  if (isLoading) {
+    return null;
+  }
+
   return (
     <main>
       <input

src/pages/podcast.tsx

@@ -1,3 +1,22 @@
+import { useParams } from "react-router-dom";
+import { useTopPodcastsQuery } from "../services/podcasts/podcast.hooks";
+
 export function Podcast() {
+  const { podcastId } = useParams<{ podcastId: string }>();
+
+  const { data: podcasts } = useTopPodcastsQuery();
+
+  if (!podcastId) {
+    throw new Error(
+      "No podcast ID provided, make sure the component is rendered inside a RouterProvider",
+    );
+  }
+
+  if (!podcasts) {
+    return null;
+  }
+
+  const podcast = podcasts.find((podcast) => podcast.id === podcastId);
+  console.log(podcast);
   return <h1>Podcast page</h1>;
 }

src/services/podcasts/podcast.hooks.ts

@@ -0,0 +1,13 @@
+import { useQuery } from "@tanstack/react-query";
+import { podcastsService } from "./podcasts.service";
+
+const QUERY_KEYS = {
+  TOP_PODCASTS: "podcasts/top",
+} as const;
+
+export function useTopPodcastsQuery() {
+  return useQuery({
+    queryKey: [QUERY_KEYS.TOP_PODCASTS],
+    queryFn: () => podcastsService.getTopPodcasts(),
+  });
+}