https://twitter.com/t3dotgg/status/1753300165505724746

t3query.ts

import { useQuery } from "@tanstack/react-query";

type Action<TActionInput = unknown, TActionReturn = unknown> = (
  input: TActionInput,
) => Promise<TActionReturn>;

export type BundledAction<TAction extends Action> = {
  key: string[];
  result: Awaited<ReturnType<TAction>>;
  action: TAction;
  input: Parameters<TAction> extends undefined
    ? Parameters<TAction>
    : undefined;
};

export async function bundleAction<TAction extends Action>(
  ...params: [
    key: string[],
    action: TAction,
    ...(Parameters<TAction> extends undefined ? [Parameters<TAction>] : []),
  ]
): Promise<BundledAction<TAction>> {
  const [key, action, input] = params;
  return {
    key,
    result: (await action(input)) as Awaited<ReturnType<TAction>>,
    action,
    input,
  };
}

export function useActionQuery<TAction extends Action>(
  bundle: BundledAction<TAction>,
  optionalNewInput?: Parameters<TAction>,
) {
  return useQuery({
    queryKey: bundle.key,
    queryFn: () =>
      bundle.action(optionalNewInput ?? bundle.input) as Awaited<
        ReturnType<TAction>
      >,
    initialData: bundle.result,
  });
}