From 31e42ac31fcd46f6d8788313b7014e7d12fcb4e9 Mon Sep 17 00:00:00 2001
From: franco sanchez <franco_genta@hotmail.com>
Date: Mon, 6 Nov 2023 11:28:43 -0300
Subject: [PATCH] chore: react-query has been migrated to version 5 and several
 changes have been made

---
 src/components/AllBooks.tsx                  |  4 +--
 src/components/forms/NewBook.tsx             |  4 +--
 src/components/forms/filters/InputSearch.tsx |  4 +--
 src/hooks/querys.ts                          | 32 +++++++++-----------
 4 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/components/AllBooks.tsx b/src/components/AllBooks.tsx
index 5d52b88..6b7a446 100644
--- a/src/components/AllBooks.tsx
+++ b/src/components/AllBooks.tsx
@@ -19,7 +19,7 @@ import { SkeletonAllBooks } from './skeletons/SkeletonABooks';
 
 export function AllBooks() {
   const { ref, inView } = useInView();
-  const { data, isLoading, error, fetchNextPage, isFetchingNextPage } =
+  const { data, isPending, error, fetchNextPage, isFetchingNextPage } =
     useBooksPaginate();
   let fetchingNextPageUI;
 
@@ -27,7 +27,7 @@ export function AllBooks() {
     if (inView) fetchNextPage();
   }, [inView]);
 
-  if (isLoading) {
+  if (isPending) {
     return <SkeletonAllBooks showTags={false} />;
   }
 
diff --git a/src/components/forms/NewBook.tsx b/src/components/forms/NewBook.tsx
index 440fca9..68e553d 100644
--- a/src/components/forms/NewBook.tsx
+++ b/src/components/forms/NewBook.tsx
@@ -49,7 +49,7 @@ export function FormNewBook() {
   const bgColorBox = useColorModeValue('white', 'gray.900');
   const bgColorInput = useColorModeValue('gray.100', 'gray.800');
   const bgColorButton = useColorModeValue('green.500', 'green.700');
-  const { mutate, isLoading, isSuccess, error } = useMutatePost();
+  const { mutate, isPending, isSuccess, error } = useMutatePost();
   const [cropData, setCropData] = useState<string | null>(null);
   const [previewImg, setPreviewImg] = useState<Blob | MediaSource | null>(null);
   const [crop, setCrop] = useState<any>('');
@@ -621,7 +621,7 @@ export function FormNewBook() {
                   _active={{ bg: 'green.600' }}
                   isDisabled={disabled}
                   loadingText='Publicando...'
-                  isLoading={isLoading}
+                  isLoading={isPending}
                 >
                   <Icon as={AiOutlineCloudUpload} fontSize='25' mr='2' />
                   Publicar
diff --git a/src/components/forms/filters/InputSearch.tsx b/src/components/forms/filters/InputSearch.tsx
index 7feb158..aaf3218 100644
--- a/src/components/forms/filters/InputSearch.tsx
+++ b/src/components/forms/filters/InputSearch.tsx
@@ -59,7 +59,7 @@ export function InputSearch({
   let alertMessage;
   let loading;
 
-  const { data, error, isLoading, refetch } = useAllSearchBooks(debouncedQuery);
+  const { data, error, isPending, refetch } = useAllSearchBooks(debouncedQuery);
 
   useOutsideClick({
     ref: containerRef,
@@ -93,7 +93,7 @@ export function InputSearch({
     };
   }, [debouncedQuery, refetch]);
 
-  if (isLoading) {
+  if (isPending) {
     loading = (
       <Flex justify='center' direction='column' align='center' gap='2'>
         <Spinner size='md' thickness='2px' speed='0.40s' />
diff --git a/src/hooks/querys.ts b/src/hooks/querys.ts
index 8f6b4c2..40d5279 100644
--- a/src/hooks/querys.ts
+++ b/src/hooks/querys.ts
@@ -1,5 +1,6 @@
 import {
   useQuery,
+  useSuspenseQuery,
   useMutation,
   useInfiniteQuery,
   QueryClient,
@@ -28,7 +29,7 @@ function useMutatePost() {
     // Mutación optimista
     onMutate: async (newPost) => {
       // Cancelar consultas pendientes para la misma clave de consulta
-      await queryClient.cancelQueries([keys.postBook]);
+      await queryClient.cancelQueries({ queryKey: [keys.postBook] });
 
       // Obtener los datos de la consulta anterior
       const previousPost = await queryClient.getQueryData([keys.postBook]);
@@ -85,7 +86,8 @@ function useAllFilterOptions() {
 function useBooksPaginate() {
   return useInfiniteQuery({
     queryKey: [keys.paginate],
-    queryFn: ({ pageParam = 0 }) => getBooksPaginate(pageParam),
+    queryFn: ({ pageParam }) => getBooksPaginate(pageParam),
+    initialPageParam: 0,
     getNextPageParam: (lastPage) => {
       if (lastPage.info.nextPage === null) return;
 
@@ -95,43 +97,39 @@ function useBooksPaginate() {
 }
 
 function useFilter(query: string | undefined, param: string | undefined) {
-  return useQuery({
+  return useSuspenseQuery({
     queryKey: [keys.filter, query, param],
     queryFn: () => getBooksFilter(query, param),
-    suspense: true,
-    cacheTime: 3000,
+    gcTime: 3000,
   });
 }
 
 function useMoreBooks() {
-  return useQuery({
+  return useSuspenseQuery({
     queryKey: [keys.random],
     queryFn: getMoreBooks,
-    suspense: true,
     refetchOnWindowFocus: false,
-    cacheTime: 3000,
-    staleTime: 60000,
+    gcTime: 3000,
+    staleTime: 50000,
   });
 }
 
 function useRelatedBooks(id: string | undefined) {
-  return useQuery({
-    queryKey: [keys.relatedBooks],
+  return useSuspenseQuery({
+    queryKey: [keys.relatedBooks, id],
     queryFn: () => getRelatedBooks(id),
-    suspense: true,
     refetchOnWindowFocus: false,
-    cacheTime: 3000,
-    staleTime: 60000,
+    gcTime: 3000,
+    staleTime: 50000,
   });
 }
 
 function useBook(pathUrl: string | undefined) {
-  return useQuery({
+  return useSuspenseQuery({
     queryKey: [keys.one, pathUrl],
     queryFn: () => getBook(pathUrl),
     refetchOnWindowFocus: false,
-    suspense: true,
-    cacheTime: 3000,
+    gcTime: 3000,
   });
 }