Typed wrappers for procedures

I have a TRPC client with working queries and mutations. I wanted to create wrapper functions for all the procedure so that instead of

trpc.someQuery.query(...)

trpc.someQuery.query(...)

I can use

someQuery(...)

someQuery(...)

, and instead of

trpc.someMutation.mutate(...)

trpc.someMutation.mutate(...)

someMutation(...)

someMutation(...)

. I'm having trouble with getting the wrapped functions to have correct parameter and return types. Currently I have:

function wrap<F extends ((...args: any[]) => any)>(fnWithClient: (c: typeof client) => F): (...args: Parameters<F>) => ReturnType<F> {
  return (...args: Parameters<F>) => fnWithClient(getClient())(...args);
}
export const someQuery = wrap((client) => client.someQuery.query)
export const someMutation = wrap((client) => client.someMutation.mutation)

function wrap<F extends ((...args: any[]) => any)>(fnWithClient: (c: typeof client) => F): (...args: Parameters<F>) => ReturnType<F> {
  return (...args: Parameters<F>) => fnWithClient(getClient())(...args);
}
export const someQuery = wrap((client) => client.someQuery.query)
export const someMutation = wrap((client) => client.someMutation.mutation)

It works in run time, and even shows correct types in VSCode, but when I generate a .d.ts, it says these functions have type

(input?: unknown, options?: ProcedureOptions | undefined) => Promise<unknown>

(input?: unknown, options?: ProcedureOptions | undefined) => Promise<unknown>

. How can I fix this issue, and is there a more elegant way to create such wrapper functions? I would prefer to use something like

export const someQuery = wrap('someQuery')

export const someQuery = wrap('someQuery')

Typed wrappers for procedures

I have a TRPC client with working queries and mutations. I wanted to create wrapper functions for all the procedure so that instead of

trpc.someQuery.query(...)

trpc.someQuery.query(...)

I can use

someQuery(...)

someQuery(...)

, and instead of

trpc.someMutation.mutate(...)

trpc.someMutation.mutate(...)

someMutation(...)

someMutation(...)

. I'm having trouble with getting the wrapped functions to have correct parameter and return types. Currently I have:

function wrap<F extends ((...args: any[]) => any)>(fnWithClient: (c: typeof client) => F): (...args: Parameters<F>) => ReturnType<F> {
  return (...args: Parameters<F>) => fnWithClient(getClient())(...args);
}
export const someQuery = wrap((client) => client.someQuery.query)
export const someMutation = wrap((client) => client.someMutation.mutation)

function wrap<F extends ((...args: any[]) => any)>(fnWithClient: (c: typeof client) => F): (...args: Parameters<F>) => ReturnType<F> {
  return (...args: Parameters<F>) => fnWithClient(getClient())(...args);
}
export const someQuery = wrap((client) => client.someQuery.query)
export const someMutation = wrap((client) => client.someMutation.mutation)

It works in run time, and even shows correct types in VSCode, but when I generate a .d.ts, it says these functions have type

(input?: unknown, options?: ProcedureOptions | undefined) => Promise<unknown>

(input?: unknown, options?: ProcedureOptions | undefined) => Promise<unknown>

. How can I fix this issue, and is there a more elegant way to create such wrapper functions? I would prefer to use something like

export const someQuery = wrap('someQuery')

export const someQuery = wrap('someQuery')

Typed wrappers for procedures

Similar Threads

Typed wrappers for procedures

Similar Threads

Similar Threads

Similar Threads