From 4c8a6d7b35790acf33d04189262ceece0519a54b Mon Sep 17 00:00:00 2001
From: Robert Soriano <sorianorobertc@gmail.com>
Date: Mon, 31 Oct 2022 09:50:15 -0700
Subject: [PATCH] feat: add abortOnUnmount option

---
 playground/pages/index.vue |  7 ++++++-
 src/client/index.ts        | 17 ++++++++++++++++-
 src/client/types.ts        |  8 ++++++--
 tsup.config.ts             |  3 +--
 4 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index d972881..a10b798 100644
--- a/playground/pages/index.vue
+++ b/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>
diff --git a/src/client/index.ts b/src/client/index.ts
index 28cd350..fc073e8 100644
--- a/src/client/index.ts
+++ b/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)
   })
 }
 
diff --git a/src/client/types.ts b/src/client/types.ts
index 8b6807e..f3a5524 100644
--- a/src/client/types.ts
+++ b/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
 
diff --git a/tsup.config.ts b/tsup.config.ts
index 15a4a82..5e0501e 100644
--- a/tsup.config.ts
+++ b/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}`,