TanStackT
TanStack13mo ago
37 replies
foolish-indigo

trpc style router

is there a reason why i shouldn't do something like this to create a trpc style router for tanstack start server functions?


import {
  useQuery,
  useMutation,
  UseQueryResult,
  UseMutationResult,
  UseQueryOptions,
  UseMutationOptions,
} from "@tanstack/react-query";
import { createServerFn } from "@tanstack/start";
import { z } from "zod";

type AsyncFunction = (...args: any[]) => Promise<any>;

type WrappedQuery<T extends AsyncFunction> = T & {
  useQuery: (
    args: Parameters<T>[0],
    options?: Omit<
      UseQueryOptions<
        Awaited<ReturnType<T>>,
        Error,
        Awaited<ReturnType<T>>,
        [string, Parameters<T>[0]]
      >,
      "queryKey" | "queryFn"
    >
  ) => UseQueryResult<Awaited<ReturnType<T>>>;
  useMutation: (
    options?: Omit<
      UseMutationOptions<Awaited<ReturnType<T>>, Error, Parameters<T>[0]>,
      "mutationFn"
    >
  ) => UseMutationResult<Awaited<ReturnType<T>>, Error, Parameters<T>[0]>;
};

type WrapperResult<T extends Record<string, AsyncFunction>> = {
  [K in keyof T]: WrappedQuery<T[K]>;
};
Was this page helpful?