update reactQuery version

Author: shaghayegh77amd

package-lock.json

@@ -14,14 +14,14 @@
     "@fortawesome/free-regular-svg-icons": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
+    "@tanstack/react-query": "^5.74.4",
     "axios": "^1.7.8",
     "i18next": "^24.0.5",
     "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18",
     "react-hot-toast": "^2.4.1",
     "react-i18next": "^15.1.4",
-    "react-query": "^3.39.3",
     "sass": "^1.76.0",
     "scss": "^0.2.4",
     "swiper": "^11.1.1",

package.json

@@ -1,5 +1,5 @@
 import React, { FC } from "react";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 
 import { FeaturedProductAPI } from "@/const/endPoint";
 import { FeaturedProductTransformer } from "@/utils/api/transformer/featuredProduct";

src/component/productDetails/index.tsx

@@ -1,10 +1,9 @@
-import { QueryClient } from "react-query";
+import { QueryClient } from "@tanstack/react-query";
 
 export const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       staleTime: 5 * 60 * 1000,
-      cacheTime: 30 * 60 * 1000,
       retry: 3,
       retryDelay: (attempt: any) => Math.min(1000 * 2 ** attempt, 30000),
       refetchOnWindowFocus: true,

src/const/queryClient.ts

@@ -12,7 +12,7 @@ import { useRouter } from "next/router";
 import Placeholder from "@/component/category/placeholder";
 import { CategoryTransformer } from "@/utils/api/transformer/category";
 import { useMegaMenu } from "@/context/menuContext";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import MetaTags from "@/component/metaTags";
 
 const fetchCategoryData = async (
@@ -37,15 +37,13 @@ const CategoryPage: FC<CategoryPageProps> = ({ initialCategory }) => {
   const menu = useMegaMenu();
   const page = parseInt(router.query.page as string, 10) || 0;
   const categoryId = String(router.query.slug);
-  const { data: category, isLoading } = useQuery<Category>(
-    ["categoryData", categoryId, page, filterQuery, orderQuery],
-    () => fetchCategoryData(categoryId, page, filterQuery, orderQuery),
-    {
-      initialData: initialCategory || undefined,
-      enabled: !initialCategory,
-      refetchOnMount: false,
-    }
-  );
+  const { data: category, isLoading } = useQuery<Category>({
+    queryKey: ["categoryData", categoryId, page, filterQuery, orderQuery],
+    queryFn: () => fetchCategoryData(categoryId, page, filterQuery, orderQuery),
+    initialData: initialCategory || undefined,
+    enabled: !initialCategory,
+    refetchOnMount: false,
+  });
 
   if (isLoading) {
     return <Placeholder />;

src/pages/category/[slug].tsx

@@ -9,7 +9,7 @@ import { MegaMenuProvider } from "@/context/menuContext";
 import { HomeTransformer } from "@/utils/api/transformer/home";
 import { getData } from "@/utils/api/fetchData/apiCall";
 import { useScrollRestoration } from "@/utils/hooks";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import { useRouter } from "next/router";
 import { GetServerSidePropsContext } from "next";
 import MetaTags from "@/component/metaTags";
@@ -26,16 +26,13 @@ export default function Home({
   useScrollRestoration();
   const router = useRouter();
   const locale = router.locale || "en";
-  const { data: carouselData } = useQuery<Product[]>(
-    ["homePage"],
-    () => fetchCHomeData(),
-
-    {
-      initialData: homeProductCarousel || undefined,
-      enabled: !homeProductCarousel,
-      refetchOnMount: false,
-    }
-  );
+  const { data: carouselData } = useQuery<Product[]>({
+    queryKey: ["homePage"],
+    queryFn: () => fetchCHomeData(),
+    initialData: homeProductCarousel || undefined,
+    enabled: !homeProductCarousel,
+    refetchOnMount: false,
+  });
 
   return (
     <>

src/pages/index.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import { getData } from "@/utils/api/fetchData/apiCall";
 import { ProductTransformer } from "@/utils/api/transformer/product";
 import { ProductDetailAPI } from "@/const/endPoint";
@@ -43,18 +43,16 @@ export const useFetchProductData = ({
   refresh?: boolean;
   initialProduct?: any;
 }) => {
-  return useQuery(
-    ["productData", productId, selectedOption],
-    () =>
+  return useQuery({
+    queryKey: ["productData", productId, selectedOption],
+    queryFn: () =>
       fetchProductData({
         productId,
         selectedOption,
         refresh,
       }),
-    {
-      initialData: initialProduct || undefined,
-      enabled: !initialProduct,
-      refetchOnMount: false,
-    }
-  );
+    initialData: initialProduct || undefined,
+    enabled: !initialProduct,
+    refetchOnMount: false,
+  });
 };