update readme

src/runtime/client.ts

@@ -0,0 +1,63 @@
+import type {
+  AsyncData,
+  AsyncDataOptions,
+  KeyOfRes,
+  PickFrom,
+  _Transform,
+} from 'nuxt/dist/app/composables/asyncData'
+import type { ProcedureRecord, inferHandlerInput, inferProcedureInput, inferProcedureOutput } from '@trpc/server'
+import type { TRPCClientErrorLike } from '@trpc/client'
+import { objectHash } from 'ohash'
+// @ts-expect-error: Resolved by Nuxt
+import { useAsyncData, useState } from '#imports'
+// @ts-expect-error: Resolved by Nuxt
+import { useClient } from '#build/trpc-client'
+// @ts-expect-error: Resolved by Nuxt
+import type { router } from '~/server/trpc'
+
+type AppRouter = typeof router
+
+type inferProcedures<
+  TObj extends ProcedureRecord<any, any, any, any, any, any>,
+> = {
+  [TPath in keyof TObj]: {
+    input: inferProcedureInput<TObj[TPath]>
+    output: inferProcedureOutput<TObj[TPath]>
+  };
+}
+
+type TQueries = AppRouter['_def']['queries']
+type TError = TRPCClientErrorLike<AppRouter>
+
+type TQueryValues = inferProcedures<AppRouter['_def']['queries']>
+
+export async function useAsyncQuery<
+  TPath extends keyof TQueryValues & string,
+  TOutput extends TQueryValues[TPath]['output'] = TQueryValues[TPath]['output'],
+  Transform extends _Transform<TOutput> = _Transform<TOutput, TOutput>,
+  PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>,
+>(
+  pathAndInput: [path: TPath, ...args: inferHandlerInput<TQueries[TPath]>],
+  options: AsyncDataOptions<TOutput, Transform, PickKeys> = {},
+): Promise<AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, TError>> {
+  const client = useClient()
+  const key = `${pathAndInput[0]}-${objectHash(pathAndInput[1] ? JSON.stringify(pathAndInput[1]) : '')}`
+  const serverError = useState<TError | null>(`error-${key}`, () => null)
+  const { error, data, ...rest } = await useAsyncData(
+    key,
+    () => client.query(...pathAndInput),
+    options,
+  )
+
+  if (process.server && error.value && !serverError.value)
+    serverError.value = error.value as any
+
+  if (data.value)
+    serverError.value = null
+
+  return {
+    ...rest,
+    data,
+    error: serverError,
+  } as any
+}

src/runtime/composables.ts

@@ -1,37 +0,0 @@
-import type {
-  AsyncData,
-  KeyOfRes,
-  PickFrom,
-  _Transform,
-} from 'nuxt/dist/app/composables/asyncData'
-import type { AsyncDataOptions, NuxtApp } from '#app'
-// @ts-expect-error: Resolved by Nuxt
-import { useAsyncData, useState } from '#imports'
-
-export async function useTRPCAsyncData<
-  DataT,
-  DataE = Error,
-  Transform extends _Transform<DataT> = _Transform<DataT, DataT>,
-  PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>,
->(
-  key: string,
-  handler: (ctx?: NuxtApp) => Promise<DataT>,
-  options: AsyncDataOptions<DataT, Transform, PickKeys> = {},
-): Promise<AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE | null | true>> {
-  const serverError = useState<DataE | true | null>(`error-${key}`, () => null)
-  const { error, data, ...rest } = await useAsyncData(key, handler, options)
-
-  // Only set the value on server and if serverError is empty
-  if (process.server && error.value && !serverError.value)
-    serverError.value = error.value as DataE | true | null
-
-  // Clear error if data is available
-  if (data.value)
-    serverError.value = null
-
-  return {
-    ...rest,
-    data,
-    error: serverError,
-  }
-}