[Feature Request] [Low Effort] Add trpc client types for trpc-nuxt

[juni0r]

Currently the @zenstackhq/trpc plugin only generates client types for React and Next clients. The types for the Nuxt client trpc-nuxt would be a welcome addition.

It's quite trivial to derive from the Next client and would just require a slightly modified generator template.

Here's the modified version I'm actually using, which is analogous to the Next client:

import type { AnyRouter } from '@trpc/server'
import { createTRPCNuxtClient as _createTRPCNuxtClient } from 'trpc-nuxt/client'
import type { ClientType } from '../routers'
import type { DeepOverrideAtPath } from './utils'

type TRPCNuxtClient<TRouter extends AnyRouter> = ReturnType<typeof _createTRPCNuxtClient<TRouter>>

export function createTRPCNuxtClient<
  TRouter extends AnyRouter,
  TPath extends string | undefined = undefined,
>(...args: Parameters<typeof _createTRPCNuxtClient<TRouter>>) {
  const r: TRPCNuxtClient<TRouter> = _createTRPCNuxtClient<TRouter>(...args)
  return r as DeepOverrideAtPath<TRPCNuxtClient<TRouter>, ClientType<TRouter>, TPath>
}

Would be great if this could make it into the plugin!

[umussetu]

+1 @juni0r

Thanks for sharing some code!

What's your plugin definition?

That's what I use with your code, but can't get the include types working (I defined the right ClientType as well from next)

import { httpBatchLink } from "trpc-nuxt/client";
import superjson from "superjson";
import { AppRouter } from "~/server/";
import { createTRPCNuxtClient } from "~/server/routers/client/nuxt";
export default defineNuxtPlugin(() => {
  const trpc = createTRPCNuxtClient<AppRouter>({
    transformer: superjson,
    links: [
      httpBatchLink({
        url: "/api/trpc",
        headers: useRequestHeaders(),
      }),
    ],
  });

  return {
    provide: {
      trpcApi: trpc,
    },
  };
});

[juni0r]

I ditched the trpc-plugin for good because it's dead slow (generating) and inefficient. The types generated are apparently very complicated and it slows down my IDE noticeably. Felt very heavy with too little benefit. I needed a few endpoints for an admin interface that weren't too much of a hassle to write manually, if your use case is similar you might want to consider that path as well.

Anyway, I hope you get it going. I didn't do anything fancy really, see my plugin definition below. I did have to install @trpc/react-query since the generated code references that. The query and mutation functions have the same signature as the Nuxt trpc client, so they just worked.

import { httpBatchLink } from 'trpc-nuxt/client'
import { createTRPCNuxtClient } from '~/server/trpc/client'
import transformer from '~/server/trpc/transformer'
import type { AppRouter } from '~/server/trpc/routers'

export const useApi = createSharedComposable(() => {
  return createTRPCNuxtClient<AppRouter, 'admin'>({
    transformer,
    links: [
      httpBatchLink({ url: '/api/trpc' }),
    ],
  })
})