[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 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>;
+  return useApiQuery<typeof resource, unknown, AddressMetadataInfoFormatted>(resource, {
+    queryParams: {
+      addresses,
+      chainId: config.chain.id,
+      tagsLimit: '20',
     },
-    enabled: addresses.length > 0 && config.features.addressMetadata.isEnabled,
-    select: (data) => {
-      const addresses = Object.entries(data.addresses)
-        .map(([ address, { tags, reputation } ]) => {
-          const formattedTags: Array<AddressMetadataTagFormatted> = tags.map((tag) => ({ ...tag, meta: parseMetaPayload(tag.meta) }));
-          return [ address.toLowerCase(), { tags: formattedTags, reputation } ] as const;
-        })
-        .reduce((result, item) => {
-          result[item[0]] = item[1];
-          return result;
-        }, {} as AddressMetadataInfoFormatted['addresses']);
-
-      return { addresses };
+    queryOptions: {
+      enabled: addresses.length > 0 && config.features.addressMetadata.isEnabled,
+      select: (data) => {
+        const addresses = Object.entries(data.addresses)
+          .map(([ address, { tags, reputation } ]) => {
+            const formattedTags: Array<AddressMetadataTagFormatted> = tags.map((tag) => ({ ...tag, meta: parseMetaPayload(tag.meta) }));
+            return [ address.toLowerCase(), { tags: formattedTags, reputation } ] as const;
+          })
+          .reduce((result, item) => {
+            result[item[0]] = item[1];
+            return result;
+          }, {} as AddressMetadataInfoFormatted['addresses']);
+
+        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() => {