[skip ci] improve typing of useApiQuery hook

lib/address/useAddressMetadataInfoQuery.ts

-import { useQuery } from '@tanstack/react-query';
-
-import type { AddressMetadataInfo } from 'types/api/addressMetadata';
 import type { AddressMetadataInfoFormatted, AddressMetadataTagFormatted } from 'types/client/addressMetadata';
 
 import config from 'configs/app';
-import useApiFetch from 'lib/api/useApiFetch';
-import { getResourceKey } from 'lib/api/useApiQuery';
+import useApiQuery from 'lib/api/useApiQuery';
 
 import parseMetaPayload from './parseMetaPayload';
 
 export default function useAddressMetadataInfoQuery(addresses: Array<string>) {
 
-  const apiFetch = useApiFetch();
+  const resource = 'address_metadata_info';
 
-  const queryParams = {
+  return useApiQuery<typeof resource, unknown, AddressMetadataInfoFormatted>(resource, {
+    queryParams: {
       addresses,
       chainId: config.chain.id,
       tagsLimit: '20',
-  };
-  const resource = 'address_metadata_info';
-
-  // TODO @tom2drum: Improve the typing here
-  // since we are formatting the API data in the select function here
-  // we cannot use the useApiQuery hook because of its current typing
-  // enhance useApiQuery so it can accept an API data and the formatted data types
-  return useQuery<AddressMetadataInfo, unknown, AddressMetadataInfoFormatted>({
-    queryKey: getResourceKey(resource, { queryParams }),
-    queryFn: async() => {
-      return apiFetch(resource, { queryParams }) as Promise<AddressMetadataInfo>;
     },
+    queryOptions: {
       enabled: addresses.length > 0 && config.features.addressMetadata.isEnabled,
       select: (data) => {
         const addresses = Object.entries(data.addresses)
@@ -43,5 +30,6 @@ export default function useAddressMetadataInfoQuery(addresses: Array<string>) {
 
         return { addresses };
       },
+    },
   });
 }

lib/api/useApiQuery.tsx

@@ -5,8 +5,8 @@ import type { ResourceError, ResourceName, ResourcePayload } from './resources';
 import type { Params as ApiFetchParams } from './useApiFetch';
 import useApiFetch from './useApiFetch';
 
-export interface Params<R extends ResourceName, E = unknown> extends ApiFetchParams<R> {
-  queryOptions?: Omit<UseQueryOptions<ResourcePayload<R>, ResourceError<E>, ResourcePayload<R>>, 'queryKey' | 'queryFn'>;
+export interface Params<R extends ResourceName, E = unknown, D = ResourcePayload<R>> extends ApiFetchParams<R> {
+  queryOptions?: Omit<UseQueryOptions<ResourcePayload<R>, ResourceError<E>, D>, 'queryKey' | 'queryFn'>;
 }
 
 export function getResourceKey<R extends ResourceName>(resource: R, { pathParams, queryParams }: Params<R> = {}) {
@@ -17,13 +17,13 @@ export function getResourceKey<R extends ResourceName>(resource: R, { pathParams
   return [ resource ];
 }
 
-export default function useApiQuery<R extends ResourceName, E = unknown>(
+export default function useApiQuery<R extends ResourceName, E = unknown, D = ResourcePayload<R>>(
   resource: R,
-  { queryOptions, pathParams, queryParams, fetchParams }: Params<R, E> = {},
+  { queryOptions, pathParams, queryParams, fetchParams }: Params<R, E, D> = {},
 ) {
   const apiFetch = useApiFetch();
 
-  return useQuery<ResourcePayload<R>, ResourceError<E>, ResourcePayload<R>>({
+  return useQuery<ResourcePayload<R>, ResourceError<E>, D>({
     // eslint-disable-next-line @tanstack/query/exhaustive-deps
     queryKey: getResourceKey(resource, { pathParams, queryParams }),
     queryFn: async() => {