Upgrade useQuery

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<GetDecodedNameParameters>
 
@@ -21,12 +20,12 @@ export type UseDecodedNameReturnType = GetDecodedNameReturnType
  */
 export const useDecodedName = (
   params: UseDecodedNameParams,
-): UseQueryResult<UseDecodedNameReturnType> => {
-  const { client, queryClient = fallbackQueryClient } = params
+): UseQueryReturnType<UseDecodedNameReturnType> => {
+  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)
 

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<GetAvailableParameters>
 
@@ -21,12 +20,13 @@ export type UseEnsAvailableReturnType = GetAvailableReturnType
  */
 export const useEnsAvailable = (
   params: UseEnsAvailableParams,
-): UseQueryResult<UseEnsAvailableReturnType> => {
-  const { client, queryClient = fallbackQueryClient } = params
+): UseQueryReturnType<UseEnsAvailableReturnType> => {
+  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)
 

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<GetExpiryParameters>
 
@@ -21,12 +20,12 @@ export type UseEnsExpiryReturnType = GetExpiryReturnType
  */
 export const useEnsExpiry = (
   params: UseEnsExpiryParams,
-): UseQueryResult<UseEnsExpiryReturnType> => {
-  const { client, queryClient = fallbackQueryClient } = params
+): UseQueryReturnType<UseEnsExpiryReturnType> => {
+  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)
 

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 = <Interfaces extends readonly Hex[]>(
   params: UseEnsResolverInterfacesParams<Interfaces>,
-): UseQueryResult<UseEnsResolverInterfacesReturnType<Interfaces>> => {
+): UseQueryReturnType<UseEnsResolverInterfacesReturnType<Interfaces>> => {
   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)
 

packages/react/src/hooks/useNamesForAddress.ts

@@ -1,11 +1,11 @@
-import { useQuery, type UseQueryResult } from '@tanstack/react-query'
 import type { Address } from 'viem'
 import {
   getNamesForAddress,
   type GetNamesForAddressReturnType,
 } 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<UseNamesForAddressReturnType> => {
+): UseQueryReturnType<UseNamesForAddressReturnType> => {
   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,

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<UseQueryOptions<QueryFnData, Error, Data, TheQueryKey>, 'initialData'>
+  > & {
+    // Fix `initialData` type
+    initialData?:
+      | UseQueryOptions<QueryFnData, Error, Data, TheQueryKey>['initialData']
+      | undefined
+  }
+>
+
+export type UseQueryReturnType<
+  Data = unknown,
+  Error = DefaultError,
+> = UseQueryResult<Data, Error>
+
+export const useQuery = <Parameters, Data, Error>(
+  key: QueryKey,
+  queryParameters: Exclude<Parameters, 'queryKey'>,
+  queryClient?: QueryClient,
+): UseQueryReturnType<Data, Error> => {
+  const parameters = {
+    ...queryParameters,
+    queryKey: key,
+  }
+
+  // TODO: figure out why this is necessary
+  // @ts-ignore
+  return useTanstackQuery(
+    { ...parameters } as any,
+    queryClient ?? fallbackQueryClient,
+  )
+}

packages/react/src/utils/types.ts

@@ -0,0 +1 @@
+export type Compute<Type> = { [key in keyof Type]: Type[key] } & unknown