From 5bf8a82f37c6a81570c413673456d3969fe6adca Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Wed, 5 Mar 2025 14:07:56 -0800 Subject: [PATCH] Cache working --- src/identity/hooks/useAvatar.ts | 25 ++++++++++++++++--- src/identity/hooks/useName.ts | 25 ++++++++++++++++--- src/identity/hooks/useSocials.tsx | 25 ++++++++++++++++--- src/identity/types.ts | 2 ++ src/internal/constants.ts | 20 +++++++++++++++ src/wallet/hooks/useGetETHBalance.ts | 37 +++++++++++++++++++++++----- 6 files changed, 116 insertions(+), 18 deletions(-) create mode 100644 src/internal/constants.ts diff --git a/src/identity/hooks/useAvatar.ts b/src/identity/hooks/useAvatar.ts index 1d0f48bfc2..aae9d99216 100644 --- 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({ - 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 index 561d0ee9d7..107828b8d1 100644 --- 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({ - 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 index 90ca742f53..29cb958708 100644 --- 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({ - 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 index ec5f20f215..2b2e554602 100644 --- 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 new file mode 100644 index 0000000000..a29596186c --- /dev/null +++ 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 index cb397799b5..fbc9ac2f75 100644 --- 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]); }