feat: pre-fetching logic (#10)

src/features/bookings/useBookings.js

@@ -1,9 +1,12 @@
 import { useSearchParams } from "react-router-dom";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 
 import { getBookings } from "../../services/apiBookings";
 
+import { PAGE_SIZE } from "../../utils/constants";
+
 export function useBookings() {
+  const queryClient = useQueryClient();
   const [searchParams] = useSearchParams();
 
   // FILTER
@@ -30,5 +33,21 @@ export function useBookings() {
     queryFn: () => getBookings({ filter, sortBy, page }),
   });
 
+  // PRE-FETCHING: PAGINATION
+  const pageCount = Math.ceil(count / PAGE_SIZE);
+
+  if (page < pageCount) {
+    queryClient.prefetchQuery({
+      queryKey: ["bookings", filter, sortBy, page + 1],
+      queryFn: () => getBookings({ filter, sortBy, page: page + 1 }),
+    });
+  }
+  if (page > 1) {
+    queryClient.prefetchQuery({
+      queryKey: ["bookings", filter, sortBy, page - 1],
+      queryFn: () => getBookings({ filter, sortBy, page: page - 1 }),
+    });
+  }
+
   return { isLoading, error, bookings, count };
 }

src/utils/constants.js

@@ -1 +1 @@
-export const PAGE_SIZE = 10;
+export const PAGE_SIZE = 6;