feat: add abortOnUnmount option

playground/pages/index.vue

@@ -24,7 +24,12 @@ const addTodo = async () => {
   }
 }
 
-const { data: todos, pending, error, refresh } = await $client.todo.getTodos.query()
+const { data: todos, pending, error, refresh } = await $client.todo.getTodos.query(undefined, {
+  trpc: {
+    abortOnUnmount: true,
+  },
+  server: false,
+})
 </script>
 
 <template>

src/client/index.ts

@@ -5,6 +5,7 @@ import type {
 } from '@trpc/server'
 import { createFlatProxy, createRecursiveProxy } from '@trpc/server/shared'
 import { hash } from 'ohash'
+import { getCurrentInstance, onScopeDispose } from 'vue'
 import type { DecoratedProcedureRecord } from './types'
 // @ts-expect-error: Nuxt auto-imports
 import { useAsyncData, useState } from '#imports'
@@ -36,7 +37,21 @@ function createNuxtProxyDecoration<TRouter extends AnyRouter>(name: string, clie
 
     const { trpc, ...asyncDataOptions } = otherOptions || {} as any
 
-    return useAsyncDataWithError(queryKey, () => (client as any)[path][lastArg](input, trpc), asyncDataOptions)
+    let controller: AbortController
+
+    if (trpc?.abortOnUnmount) {
+      if (getCurrentInstance()) {
+        onScopeDispose(() => {
+          controller?.abort?.()
+        })
+      }
+      controller = typeof AbortController !== 'undefined' ? new AbortController() : {} as AbortController
+    }
+
+    return useAsyncDataWithError(queryKey, () => (client as any)[path][lastArg](input, {
+      ...trpc,
+      signal: controller?.signal,
+    }), asyncDataOptions)
   })
 }
 

src/client/types.ts

@@ -19,6 +19,10 @@ import type {
 // Inspired by trpc/react-query client types
 // https://github.com/trpc/trpc/blob/next/packages/react-query/src/createTRPCReact.tsx
 
+interface TRPCOptions extends TRPCRequestOptions {
+  abortOnUnmount?: boolean
+}
+
 /**
  * @internal
  */
@@ -33,7 +37,7 @@ export type DecorateProcedure<
       PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>,
      >(
         input: inferProcedureInput<TProcedure>,
-        opts?: AsyncDataOptions<TData, Transform, PickKeys> & { trpc: TRPCRequestOptions },
+        opts?: AsyncDataOptions<TData, Transform, PickKeys> & { trpc: TRPCOptions },
       ) => AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, TRPCClientErrorLike<TProcedure>>
     } : TProcedure extends AnyMutationProcedure ? {
       mutate: <
@@ -42,7 +46,7 @@ export type DecorateProcedure<
       PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>,
      >(
         input: inferProcedureInput<TProcedure>,
-        opts?: AsyncDataOptions<TData, Transform, PickKeys> & { trpc: TRPCRequestOptions },
+        opts?: AsyncDataOptions<TData, Transform, PickKeys> & { trpc: TRPCOptions },
       ) => AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, TRPCClientErrorLike<TProcedure>>
     } : never
 

tsup.config.ts

@@ -5,9 +5,8 @@ export default defineConfig({
   format: ['cjs', 'esm'],
   splitting: false,
   clean: true,
-  external: ['#app', '#imports'],
+  external: ['#app', '#imports', 'vue'],
   dts: true,
-  // @ts-expect-error: Missing type
   outExtension({ format }) {
     return {
       js: format === 'esm' ? '.mjs' : `.${format}`,