1 import { useQuery, UseQueryOptions } from "@tanstack/react-query";
2 import { useCallback, useMemo } from "react";
3
4 // Optimized query hook with intelligent caching and background updates
5 export function useOptimizedQuery<T>(
6 queryKey: string[],
7 queryFn: () => Promise<T>,
8 options?: Partial<UseQueryOptions<T>>
9 ) {
10 // Memoize the query function to prevent unnecessary re-renders
11 const memoizedQueryFn = useCallback(queryFn, [queryKey.join('/')]);
12
13 // Optimized query options for better performance
14 const optimizedOptions = useMemo(() => ({
15 staleTime: 5 * 60 * 1000, // 5 minutes
16 gcTime: 10 * 60 * 1000, // 10 minutes
17 refetchOnWindowFocus: false,
18 refetchOnReconnect: true,
19 retry: (failureCount: number, error: any) => {
20 // Don't retry on 4xx errors except 408 (timeout)
21 if (error?.status >= 400 && error?.status < 500 && error?.status !== 408) {
22 return false;
23 }
24 return failureCount < 2;
25 },
26 retryDelay: (attemptIndex: number) => Math.min(1000 * 2 ** attemptIndex, 30000),
27 ...options,
28 }), [options]);
29
30 return useQuery({
31 queryKey,
32 queryFn: memoizedQueryFn,
33 ...optimizedOptions,
34 });
35 }
36
37 // Hook for data that updates frequently
38 export function useLiveQuery<T>(
39 queryKey: string[],
40 queryFn: () => Promise<T>,
41 options?: Partial<UseQueryOptions<T>>
42 ) {
43 return useOptimizedQuery(queryKey, queryFn, {
44 staleTime: 30 * 1000, // 30 seconds for live data
45 refetchInterval: 60 * 1000, // Auto-refetch every minute
46 ...options,
47 });
48 }
49
50 // Hook for static/rarely changing data
51 export function useStaticQuery<T>(
52 queryKey: string[],
53 queryFn: () => Promise<T>,
54 options?: Partial<UseQueryOptions<T>>
55 ) {
56 return useOptimizedQuery(queryKey, queryFn, {
57 staleTime: 60 * 60 * 1000, // 1 hour for static data
58 gcTime: 24 * 60 * 60 * 1000, // 24 hours cache
59 ...options,
60 });
61 }