diff --git a/packages/react/src/hooks/useDecodedName.ts b/packages/react/src/hooks/useDecodedName.ts index 824e4f53..0704d3ae 100644 --- a/packages/react/src/hooks/useDecodedName.ts +++ b/packages/react/src/hooks/useDecodedName.ts @@ -1,11 +1,10 @@ -import { useQuery, type UseQueryResult } from '@tanstack/react-query' import { getDecodedName, type GetDecodedNameParameters, type GetDecodedNameReturnType, } from '@ensdomains/ensjs/subgraph' import type { ParamWithClients } from '../client.js' -import { fallbackQueryClient } from '../query.js' +import { useQuery, type UseQueryReturnType } from './useQuery.js' export type UseDecodedNameParams = ParamWithClients @@ -21,12 +20,12 @@ export type UseDecodedNameReturnType = GetDecodedNameReturnType */ export const useDecodedName = ( params: UseDecodedNameParams, -): UseQueryResult => { - const { client, queryClient = fallbackQueryClient } = params +): UseQueryReturnType => { + const { client, queryClient } = params return useQuery( + ['ensjs', 'decoded-subgraph-name', params.name], { - queryKey: ['ensjs', 'decoded-subgraph-name', params.name], queryFn: async () => { const result = await getDecodedName(client, params) diff --git a/packages/react/src/hooks/useEnsAvailable.ts b/packages/react/src/hooks/useEnsAvailable.ts index d37f9aff..da234556 100644 --- a/packages/react/src/hooks/useEnsAvailable.ts +++ b/packages/react/src/hooks/useEnsAvailable.ts @@ -1,11 +1,10 @@ -import { useQuery, type UseQueryResult } from '@tanstack/react-query' import { getAvailable, type GetAvailableParameters, type GetAvailableReturnType, } from '@ensdomains/ensjs/public' import type { ParamWithClients } from '../client.js' -import { fallbackQueryClient } from '../query.js' +import { useQuery, type UseQueryReturnType } from './useQuery.js' export type UseEnsAvailableParams = ParamWithClients @@ -21,12 +20,13 @@ export type UseEnsAvailableReturnType = GetAvailableReturnType */ export const useEnsAvailable = ( params: UseEnsAvailableParams, -): UseQueryResult => { - const { client, queryClient = fallbackQueryClient } = params +): UseQueryReturnType => { + const { client, queryClient } = params return useQuery( + ['ensjs', 'eth-name-available', params.name], { - queryKey: ['ensjs', 'eth-name-available', params.name], + queryKey: [], queryFn: async () => { const result = await getAvailable(client, params) diff --git a/packages/react/src/hooks/useEnsExpiry.ts b/packages/react/src/hooks/useEnsExpiry.ts index 64d479be..24cdbd9e 100644 --- a/packages/react/src/hooks/useEnsExpiry.ts +++ b/packages/react/src/hooks/useEnsExpiry.ts @@ -1,11 +1,10 @@ -import { useQuery, type UseQueryResult } from '@tanstack/react-query' import { getExpiry, type GetExpiryParameters, type GetExpiryReturnType, } from '@ensdomains/ensjs/public' import type { ParamWithClients } from '../client.js' -import { fallbackQueryClient } from '../query.js' +import { useQuery, type UseQueryReturnType } from './useQuery.js' export type UseEnsExpiryParams = ParamWithClients @@ -21,12 +20,12 @@ export type UseEnsExpiryReturnType = GetExpiryReturnType */ export const useEnsExpiry = ( params: UseEnsExpiryParams, -): UseQueryResult => { - const { client, queryClient = fallbackQueryClient } = params +): UseQueryReturnType => { + const { client, queryClient } = params return useQuery( + ['ensjs', 'ens-expiry', params.name], { - queryKey: ['ensjs', 'ens-expiry', params.name], queryFn: async () => { const result = await getExpiry(client, params) diff --git a/packages/react/src/hooks/useEnsResolverInterfaces.ts b/packages/react/src/hooks/useEnsResolverInterfaces.ts index 0411602e..41f44003 100644 --- a/packages/react/src/hooks/useEnsResolverInterfaces.ts +++ b/packages/react/src/hooks/useEnsResolverInterfaces.ts @@ -1,4 +1,3 @@ -import { useQuery, type UseQueryResult } from '@tanstack/react-query' import type { Hex } from 'viem' import { getSupportedInterfaces, @@ -7,6 +6,7 @@ import { } from '@ensdomains/ensjs/public' import type { ParamWithClients } from '../client.js' import { fallbackQueryClient } from '../query.js' +import { useQuery, type UseQueryReturnType } from './useQuery.js' export type UseEnsResolverInterfacesParams< Interfaces extends readonly Hex[] = [Hex, Hex], @@ -27,12 +27,12 @@ export type UseEnsResolverInterfacesReturnType< */ export const useEnsResolverInterfaces = ( params: UseEnsResolverInterfacesParams, -): UseQueryResult> => { +): UseQueryReturnType> => { const { client, queryClient = fallbackQueryClient } = params return useQuery( + ['ensjs', 'resolver-interfaces', params.address], { - queryKey: ['ensjs', 'resolver-interfaces', params.address], queryFn: async () => { const result = await getSupportedInterfaces(client, params) diff --git a/packages/react/src/hooks/useNamesForAddress.ts b/packages/react/src/hooks/useNamesForAddress.ts index f0637940..e3884a64 100644 --- a/packages/react/src/hooks/useNamesForAddress.ts +++ b/packages/react/src/hooks/useNamesForAddress.ts @@ -1,4 +1,3 @@ -import { useQuery, type UseQueryResult } from '@tanstack/react-query' import type { Address } from 'viem' import { getNamesForAddress, @@ -6,6 +5,7 @@ import { } from '@ensdomains/ensjs/subgraph' import { fallbackQueryClient } from '../query.js' import type { ParamWithClients } from '../client.js' +import { useQuery, type UseQueryReturnType } from './useQuery.js' export type UseNamesForAddressParams = ParamWithClients<{ address: Address @@ -24,12 +24,12 @@ export type UseNamesForAddressReturnType = GetNamesForAddressReturnType */ export const useNamesForAddress = ( params: UseNamesForAddressParams, -): UseQueryResult => { +): UseQueryReturnType => { const { address, client, queryClient = fallbackQueryClient } = params return useQuery( + ['ensjs', 'names-for-address', address], { - queryKey: ['ensjs', 'names-for-address', address], queryFn: async () => { const result = await getNamesForAddress(client, { address, diff --git a/packages/react/src/hooks/useQuery.ts b/packages/react/src/hooks/useQuery.ts new file mode 100644 index 00000000..af439986 --- /dev/null +++ b/packages/react/src/hooks/useQuery.ts @@ -0,0 +1,50 @@ +import { + useQuery as useTanstackQuery, + type DefaultError, + type QueryClient, + type QueryKey, + type UseQueryOptions, + type UseQueryResult, +} from '@tanstack/react-query' +import type { ExactPartial } from 'viem' +import { fallbackQueryClient } from '../query.js' +import type { Compute } from '../utils/types.js' + +export type UseQueryParameters< + QueryFnData = unknown, + Error = DefaultError, + Data = QueryFnData, + TheQueryKey extends QueryKey = QueryKey, +> = Compute< + ExactPartial< + Omit, 'initialData'> + > & { + // Fix `initialData` type + initialData?: + | UseQueryOptions['initialData'] + | undefined + } +> + +export type UseQueryReturnType< + Data = unknown, + Error = DefaultError, +> = UseQueryResult + +export const useQuery = ( + key: QueryKey, + queryParameters: Exclude, + queryClient?: QueryClient, +): UseQueryReturnType => { + const parameters = { + ...queryParameters, + queryKey: key, + } + + // TODO: figure out why this is necessary + // @ts-ignore + return useTanstackQuery( + { ...parameters } as any, + queryClient ?? fallbackQueryClient, + ) +} diff --git a/packages/react/src/utils/types.ts b/packages/react/src/utils/types.ts new file mode 100644 index 00000000..14d34666 --- /dev/null +++ b/packages/react/src/utils/types.ts @@ -0,0 +1 @@ +export type Compute = { [key in keyof Type]: Type[key] } & unknown