update directory structure

src/client/index.ts

@@ -0,0 +1,73 @@
+import type { CreateTRPCClientOptions, inferRouterProxyClient } from '@trpc/client'
+import { createTRPCProxyClient } from '@trpc/client'
+import type {
+  AnyRouter,
+} from '@trpc/server'
+import { createFlatProxy, createRecursiveProxy } from '@trpc/server/shared'
+import { hash } from 'ohash'
+import type { DecoratedProcedureRecord } from './types'
+
+/**
+ * Calculates the key used for `useAsyncData` call
+ */
+export function getQueryKey(
+  path: string,
+  input: unknown,
+): string {
+  return input === undefined ? path : `${path}-${hash(input || '')}`
+}
+
+/**
+ * @internal
+ */
+export function createNuxtProxyDecoration<TRouter extends AnyRouter>(name: string, client: inferRouterProxyClient<TRouter>) {
+  return createRecursiveProxy((opts) => {
+    const args = opts.args
+
+    const pathCopy = [name, ...opts.path]
+
+    // The last arg is for instance `.mutate` or `.query()`
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const lastArg = pathCopy.pop()!
+
+    const path = pathCopy.join('.')
+
+    const [input, asyncDataOptions] = args
+
+    const queryKey = getQueryKey(path, input)
+
+    return useAsyncDataWithError(queryKey, () => (client as any)[path][lastArg](input), asyncDataOptions)
+  })
+}
+
+/**
+ * Custom useAsyncData to add server error to client
+ */
+async function useAsyncDataWithError(queryKey: string, cb: any, asyncDataOptions: any) {
+  // @ts-ignore: nuxt internal
+  const serverError = useState(`error-${queryKey}`, () => null)
+  // @ts-ignore: nuxt internal
+  const { error, data, ...rest } = await useAsyncData(queryKey, cb, asyncDataOptions)
+
+  if (error.value && !serverError.value)
+    serverError.value = error.value as any
+
+  if (data.value)
+    serverError.value = null
+
+  return {
+    ...rest,
+    data,
+    error: serverError,
+  }
+}
+
+export function createTRPCNuxtProxyClient<TRouter extends AnyRouter>(opts: CreateTRPCClientOptions<TRouter>) {
+  const client = createTRPCProxyClient(opts)
+
+  const decoratedClient = createFlatProxy((key) => {
+    return createNuxtProxyDecoration(key, client)
+  }) as DecoratedProcedureRecord<TRouter['_def']['record']>
+
+  return decoratedClient
+}

src/client/types.ts

@@ -0,0 +1,64 @@
+import type { TRPCClientErrorLike } from '@trpc/client'
+import type {
+  AnyMutationProcedure,
+  AnyProcedure,
+  AnyQueryProcedure,
+  AnyRouter,
+  ProcedureRouterRecord,
+  inferProcedureInput,
+  inferProcedureOutput,
+} from '@trpc/server'
+import type {
+  AsyncData,
+  AsyncDataOptions,
+  KeyOfRes,
+  PickFrom,
+  _Transform,
+} from 'nuxt/dist/app/composables/asyncData'
+
+// Inspired by trpc/react-query client types
+// https://github.com/trpc/trpc/blob/next/packages/react-query/src/createTRPCReact.tsx
+
+/**
+ * @internal
+ */
+export type DecorateProcedure<
+ TProcedure extends AnyProcedure,
+ TPath extends string,
+> = TProcedure extends AnyQueryProcedure
+  ? {
+      query: <
+      TData = inferProcedureOutput<TProcedure>,
+      Transform extends _Transform<TData> = _Transform<TData, TData>,
+      PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>,
+     >(
+        input: inferProcedureInput<TProcedure>,
+        opts?: AsyncDataOptions<TData, Transform, PickKeys>,
+      ) => AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, TRPCClientErrorLike<TProcedure>>
+    } : TProcedure extends AnyMutationProcedure ? {
+      mutate: <
+      TData = inferProcedureOutput<TProcedure>,
+      Transform extends _Transform<TData> = _Transform<TData, TData>,
+      PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>,
+     >(
+        input: inferProcedureInput<TProcedure>,
+        opts?: AsyncDataOptions<TData, Transform, PickKeys>,
+      ) => AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, TRPCClientErrorLike<TProcedure>>
+    } : never
+
+/**
+* @internal
+*/
+export type DecoratedProcedureRecord<
+ TProcedures extends ProcedureRouterRecord,
+ TPath extends string = '',
+> = {
+  [TKey in keyof TProcedures]: TProcedures[TKey] extends AnyRouter
+    ? DecoratedProcedureRecord<
+       TProcedures[TKey]['_def']['record'],
+       `${TPath}${TKey & string}.`
+     >
+    : TProcedures[TKey] extends AnyProcedure
+      ? DecorateProcedure<TProcedures[TKey], `${TPath}${TKey & string}`>
+      : never;
+}

src/index.ts

@@ -0,0 +1 @@
+export * from './server'

src/server.ts

@@ -0,0 +1,90 @@
+import type { ResponseMeta } from '@trpc/server/http'
+import { resolveHTTPResponse } from '@trpc/server/http'
+import type {
+  AnyRouter,
+  ProcedureType,
+  TRPCError,
+  inferRouterContext,
+  inferRouterError,
+} from '@trpc/server'
+import { createURL } from 'ufo'
+import type { H3Event } from 'h3'
+import { defineEventHandler, isMethod, readBody } from 'h3'
+import type { TRPCResponse } from '@trpc/server/rpc'
+
+type MaybePromise<T> = T | Promise<T>
+
+export type CreateContextFn<TRouter extends AnyRouter> = (event: H3Event) => MaybePromise<inferRouterContext<TRouter>>
+
+export interface ResponseMetaFnPayload<TRouter extends AnyRouter> {
+  data: TRPCResponse<unknown, inferRouterError<TRouter>>[]
+  ctx?: inferRouterContext<TRouter>
+  paths?: string[]
+  type: ProcedureType | 'unknown'
+  errors: TRPCError[]
+}
+
+export type ResponseMetaFn<TRouter extends AnyRouter> = (opts: ResponseMetaFnPayload<TRouter>) => ResponseMeta
+
+export interface OnErrorPayload<TRouter extends AnyRouter> {
+  error: TRPCError
+  type: ProcedureType | 'unknown'
+  path: string | undefined
+  req: H3Event['req']
+  input: unknown
+  ctx: undefined | inferRouterContext<TRouter>
+}
+
+export type OnErrorFn<TRouter extends AnyRouter> = (opts: OnErrorPayload<TRouter>) => void
+
+export function createNuxtApiHandler<TRouter extends AnyRouter>({
+  router,
+  createContext,
+  responseMeta,
+  onError,
+  url = '/api/trpc',
+}: {
+  router: TRouter
+  createContext?: CreateContextFn<TRouter>
+  responseMeta?: ResponseMetaFn<TRouter>
+  onError?: OnErrorFn<TRouter>
+  url?: string
+}) {
+  return defineEventHandler(async (event) => {
+    const {
+      req,
+      res,
+    } = event
+
+    const $url = createURL(req.url!)
+
+    const httpResponse = await resolveHTTPResponse({
+      router,
+      req: {
+        method: req.method!,
+        headers: req.headers,
+        body: isMethod(event, 'GET') ? null : await readBody(event),
+        query: $url.searchParams,
+      },
+      path: $url.pathname.substring(url.length + 1),
+      createContext: async () => createContext?.(event),
+      responseMeta,
+      onError: (o) => {
+        onError?.({
+          ...o,
+          req,
+        })
+      },
+    })
+
+    const { status, headers, body } = httpResponse
+
+    res.statusCode = status
+
+    headers && Object.keys(headers).forEach((key) => {
+      res.setHeader(key, headers[key]!)
+    })
+
+    return body
+  })
+}