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 ;
}
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(null);
const [previewImg, setPreviewImg] = useState(null);
const [crop, setCrop] = useState('');
@@ -621,7 +621,7 @@ export function FormNewBook() {
_active={{ bg: 'green.600' }}
isDisabled={disabled}
loadingText='Publicando...'
- isLoading={isLoading}
+ isLoading={isPending}
>
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 = (
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,
});
}