Add react query

packages/client/package.json

@@ -12,6 +12,7 @@
    "dependencies": {
       "@radix-ui/react-slot": "^1.2.3",
       "@tailwindcss/vite": "^4.1.13",
+      "@tanstack/react-query": "^5.90.5",
       "axios": "^1.12.1",
       "class-variance-authority": "^0.7.1",
       "clsx": "^2.1.1",

packages/client/src/components/reviews/ReviewList.tsx

@@ -1,7 +1,7 @@
 import axios from 'axios';
-import { useEffect, useState } from 'react';
 import Skeleton from 'react-loading-skeleton';
 import StarRating from './StarRating';
+import { useQuery } from '@tanstack/react-query';
 
 interface Props {
    productId: number;
@@ -21,30 +21,21 @@ type GetReviewsResponse = {
 };
 
 const ReviewList = ({ productId }: Props) => {
-   const [reviewData, setReviewData] = useState<GetReviewsResponse>();
-   const [isLoading, setIsLoading] = useState(false);
-   const [error, setError] = useState('');
+   const {
+      data: reviewData,
+      isLoading,
+      error,
+   } = useQuery<GetReviewsResponse>({
+      queryKey: ['reviews', productId],
+      queryFn: () => fetchReviews(),
+   });
 
-   const fetchReviews = async ({ productId }: Props) => {
-      try {
-         setError('');
-         setIsLoading(true);
-         const { data } = await axios.get<GetReviewsResponse>(
-            `/api/products/${productId}/reviews`
-         );
-         setReviewData(data);
-      } catch (error) {
-         console.error(error);
-         setError(
-            'Sorry, cannot fetch the reviews at this time, please retry.'
-         );
-      } finally {
-         setIsLoading(false);
-      }
+   const fetchReviews = async () => {
+      const { data } = await axios.get<GetReviewsResponse>(
+         `/api/products/${productId}/reviews`
+      );
+      return data;
    };
-   useEffect(() => {
-      fetchReviews({ productId });
-   }, []);
 
    if (isLoading) {
       return (
@@ -61,7 +52,11 @@ const ReviewList = ({ productId }: Props) => {
    }
 
    if (error) {
-      return <p className="text-red-500">{error}</p>;
+      return (
+         <p className="text-red-500">
+            Could not fetch reviews, please try again.
+         </p>
+      );
    }
 
    return (

packages/client/src/main.tsx

@@ -1,11 +1,15 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import 'react-loading-skeleton/dist/skeleton.css';
 import './index.css';
 import App from './App.tsx';
 
+const queryClient = new QueryClient();
 createRoot(document.getElementById('root')!).render(
    <StrictMode>
-      <App />
+      <QueryClientProvider client={queryClient}>
+         <App />
+      </QueryClientProvider>
    </StrictMode>
 );