Cache working

coinbase · Mar 5, 2025 · 5bf8a82 · 5bf8a82
1 parent 532944b
commit 5bf8a82
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 18 deletions.
diff --git a/src/identity/hooks/useAvatar.ts b/src/identity/hooks/useAvatar.ts
@@ -1,4 +1,5 @@
 import { getAvatar } from '@/identity/utils/getAvatar';
+import { DEFAULT_QUERY_OPTIONS } from '@/internal/constants';
 import { useQuery } from '@tanstack/react-query';
 import { mainnet } from 'viem/chains';
 import type {
@@ -14,14 +15,30 @@ export const useAvatar = (
   { ensName, chain = mainnet }: UseAvatarOptions,
   queryOptions?: UseQueryOptions,
 ) => {
-  const { enabled = true, cacheTime } = queryOptions ?? {};
+  const { enabled, cacheTime, staleTime, refetchOnWindowFocus } = {
+    ...DEFAULT_QUERY_OPTIONS,
+    ...queryOptions,
+  };
+
+  const queryKey = ['useAvatar', ensName, chain.id];
+
   return useQuery<GetAvatarReturnType>({
-    queryKey: ['useAvatar', ensName, chain.id],
+    queryKey,
     queryFn: async () => {
-      return getAvatar({ ensName, chain });
+      console.log(
+        `[useAvatar] Cache MISS - Fetching avatar for ENS: ${ensName} on chain: ${chain.id}`,
+      );
+      const result = await getAvatar({ ensName, chain });
+      console.log(`[useAvatar] Fetch completed with result:`, result);
+      return result;
     },
     gcTime: cacheTime,
+    staleTime: staleTime,
     enabled,
-    refetchOnWindowFocus: false,
+    refetchOnWindowFocus,
+    select: (data: GetAvatarReturnType) => {
+      console.log(`[useAvatar] Query SUCCESS - Data loaded`);
+      return data;
+    },
   });
 };
diff --git a/src/identity/hooks/useName.ts b/src/identity/hooks/useName.ts
@@ -1,4 +1,5 @@
 import { getName } from '@/identity/utils/getName';
+import { DEFAULT_QUERY_OPTIONS } from '@/internal/constants';
 import { useQuery } from '@tanstack/react-query';
 import { mainnet } from 'viem/chains';
 import type {
@@ -17,14 +18,30 @@ export const useName = (
   { address, chain = mainnet }: UseNameOptions,
   queryOptions?: UseQueryOptions,
 ) => {
-  const { enabled = true, cacheTime } = queryOptions ?? {};
+  const { enabled, cacheTime, staleTime, refetchOnWindowFocus } = {
+    ...DEFAULT_QUERY_OPTIONS,
+    ...queryOptions,
+  };
+
+  const queryKey = ['useName', address, chain.id];
+
   return useQuery<GetNameReturnType>({
-    queryKey: ['useName', address, chain.id],
+    queryKey,
     queryFn: async () => {
-      return await getName({ address, chain });
+      console.log(
+        `[useName] Cache MISS - Fetching name for address: ${address} on chain: ${chain.id}`,
+      );
+      const result = await getName({ address, chain });
+      console.log(`[useName] Fetch completed with result:`, result);
+      return result;
     },
     gcTime: cacheTime,
+    staleTime: staleTime,
     enabled,
-    refetchOnWindowFocus: false,
+    refetchOnWindowFocus,
+    select: (data: GetNameReturnType) => {
+      console.log(`[useName] Query SUCCESS - Data loaded`);
+      return data;
+    },
   });
 };
diff --git a/src/identity/hooks/useSocials.tsx b/src/identity/hooks/useSocials.tsx
@@ -1,5 +1,6 @@
 import type { GetSocialsReturnType, UseQueryOptions } from '@/identity/types';
 import { getSocials } from '@/identity/utils/getSocials';
+import { DEFAULT_QUERY_OPTIONS } from '@/internal/constants';
 import { useQuery } from '@tanstack/react-query';
 import type { Chain } from 'viem';
 import { mainnet } from 'viem/chains';
@@ -13,14 +14,30 @@ export const useSocials = (
   { ensName, chain = mainnet }: UseSocialsOptions,
   queryOptions?: UseQueryOptions,
 ) => {
-  const { enabled = true, cacheTime } = queryOptions ?? {};
+  const { enabled, cacheTime, staleTime, refetchOnWindowFocus } = {
+    ...DEFAULT_QUERY_OPTIONS,
+    ...queryOptions,
+  };
+
+  const queryKey = ['useSocials', ensName, chain.id];
+
   return useQuery<GetSocialsReturnType>({
-    queryKey: ['useSocials', ensName, chain.id],
+    queryKey,
     queryFn: async () => {
-      return getSocials({ ensName, chain });
+      console.log(
+        `[useSocials] Cache MISS - Fetching socials for ENS: ${ensName} on chain: ${chain.id}`,
+      );
+      const result = await getSocials({ ensName, chain });
+      console.log(`[useSocials] Fetch completed with result:`, result);
+      return result;
     },
     gcTime: cacheTime,
+    staleTime: staleTime,
     enabled,
-    refetchOnWindowFocus: false,
+    refetchOnWindowFocus,
+    select: (data: GetSocialsReturnType) => {
+      console.log(`[useSocials] Query SUCCESS - Data loaded`);
+      return data;
+    },
   });
 };
diff --git a/src/identity/types.ts b/src/identity/types.ts
@@ -280,6 +280,8 @@ export type UseQueryOptions = {
   enabled?: boolean;
   /** Cache time in milliseconds */
   cacheTime?: number;
+  /** Stale time in milliseconds */
+  staleTime?: number;
 };
 
 /**

diff --git a/src/internal/constants.ts b/src/internal/constants.ts
@@ -0,0 +1,20 @@
+/**
+ * Default cache time for queries (30 minutes)
+ */
+export const DEFAULT_CACHE_TIME = 1000 * 60 * 30;
+
+/**
+ * Default stale time for queries (5 minutes)
+ */
+export const DEFAULT_STALE_TIME = 1000 * 60 * 5;
+
+/**
+ * Default query options used across hooks
+ */
+export const DEFAULT_QUERY_OPTIONS = {
+  enabled: true,
+  gcTime: DEFAULT_CACHE_TIME,
+  cacheTime: DEFAULT_CACHE_TIME,
+  staleTime: DEFAULT_STALE_TIME,
+  refetchOnWindowFocus: false,
+} as const;
diff --git a/src/wallet/hooks/useGetETHBalance.ts b/src/wallet/hooks/useGetETHBalance.ts
@@ -3,6 +3,7 @@ import { formatUnits } from 'viem';
 import type { Address } from 'viem';
 import { useBalance } from 'wagmi';
 import type { UseBalanceReturnType } from 'wagmi';
+import { DEFAULT_QUERY_OPTIONS } from '../../internal/constants';
 import { getRoundedAmount } from '../../internal/utils/getRoundedAmount';
 import type { SwapError } from '../../swap';
 import { getSwapErrorCode } from '../../swap/utils/getSwapErrorCode';
@@ -11,7 +12,31 @@ import type { UseGetETHBalanceResponse } from '../types';
 const ETH_DECIMALS = 18;
 
 export function useGetETHBalance(address?: Address): UseGetETHBalanceResponse {
-  const ethBalanceResponse: UseBalanceReturnType = useBalance({ address });
+  const ethBalanceResponse: UseBalanceReturnType = useBalance({
+    address,
+    query: {
+      gcTime: DEFAULT_QUERY_OPTIONS.gcTime,
+      staleTime: DEFAULT_QUERY_OPTIONS.staleTime,
+      refetchOnWindowFocus: DEFAULT_QUERY_OPTIONS.refetchOnWindowFocus,
+    },
+  });
+
+  // Log cache hits/misses
+  useMemo(() => {
+    if (ethBalanceResponse.isSuccess) {
+      console.log(`[useGetETHBalance] Query SUCCESS - Data loaded`);
+    }
+    if (ethBalanceResponse.isError) {
+      console.error(
+        `[useGetETHBalance] Query ERROR:`,
+        ethBalanceResponse.error,
+      );
+    }
+  }, [
+    ethBalanceResponse.isSuccess,
+    ethBalanceResponse.isError,
+    ethBalanceResponse.error,
+  ]);
 
   return useMemo(() => {
     let error: SwapError | undefined;
@@ -30,19 +55,19 @@ export function useGetETHBalance(address?: Address): UseGetETHBalanceResponse {
         convertedBalance: '',
         error,
         response: ethBalanceResponse,
-        roundedBalance: '',
       };
     }
-    const convertedBalance = formatUnits(
-      ethBalanceResponse?.data?.value,
+
+    const formattedBalance = formatUnits(
+      ethBalanceResponse?.data?.value ?? 0n,
       ETH_DECIMALS,
     );
-    const roundedBalance = getRoundedAmount(convertedBalance, 8);
+    const convertedBalance = getRoundedAmount(formattedBalance, 8);
+
     return {
       convertedBalance,
       error,
       response: ethBalanceResponse,
-      roundedBalance,
     };
   }, [ethBalanceResponse]);
 }