use-api-query-strongly-typed.tsx

interface User {
  name: string;
}

// the fake API SDK from earlier
const api = {
  getUser: (userId: number) => {
    return new Promise<User>((resolve) => {
      resolve({
        name: 'Elan',
      });
    });
  },
};

type Api = typeof api;
type ApiEndpointName = keyof Api;
type ApiResponse<EndpointName extends ApiEndpointName> = Awaited<ReturnType<Api[EndpointName]>>;
type ApiParams<EndpointName extends ApiEndpointName> = Parameters<Api[EndpointName]>;

function useApiQuery<EndpointName extends ApiEndpointName>(
  endpointName: EndpointName,
  params: ApiParams<EndpointName>,
  options?: UseQueryOptions<ApiResponse<EndpointName>>
) {
  const { onError, ...restOptions } = options ?? {};

  return useQuery({
    queryKey: [endpointName, ...params],
    queryFn: (): Promise<ApiResponse<EndpointName>> => {
      return api[endpointName].apply(null, params);
    },
    onError: (error) => {
      alertErrorMonitoring(error);
      onError?.(error);
    },
    ...restOptions,
  });
}