feat(ai-client): pass abort signal to fetcher in generation clients (#354)

* feat(ai-client): pass abort signal to fetcher in generation clients

The fetcher function in GenerationClient and VideoGenerationClient
now receives the AbortSignal as an optional second parameter, allowing
long-running fetcher calls to be cancelled mid-flight when stop() is
called.

Updated fetcher type signature across all framework integrations
(React, Solid, Vue, Svelte) — backwards-compatible since the options
parameter is optional.

* ci: apply automated fixes

* refactor: extract GenerationFetcher utility type to centralize fetcher signature

Replace inline fetcher type definitions across all framework hooks (React,
Solid, Vue, Svelte) with a shared GenerationFetcher<TInput, TResult> type
from ai-client. Future changes to the fetcher signature only need to update
generation-types.ts instead of ~28 files.

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: AlemTuzlak

packages/typescript/ai-client/src/generation-client.ts

@@ -4,6 +4,7 @@ import type { ConnectionAdapter } from './connection-adapters'
 import type {
   GenerationClientOptions,
   GenerationClientState,
+  GenerationFetcher,
 } from './generation-types'
 
 /**
@@ -61,7 +62,7 @@ export class GenerationClient<
   TOutput = TResult,
 > {
   private connection: ConnectionAdapter | undefined
-  private fetcher: ((input: TInput) => Promise<TResult>) | undefined
+  private fetcher: GenerationFetcher<TInput, TResult> | undefined
   private body: Record<string, any>
   private result: TOutput | null = null
   private isLoading = false
@@ -74,7 +75,10 @@ export class GenerationClient<
     options: GenerationClientOptions<TInput, TResult, TOutput> &
       (
         | { connection: ConnectionAdapter; fetcher?: never }
-        | { fetcher: (input: TInput) => Promise<TResult>; connection?: never }
+        | {
+            fetcher: GenerationFetcher<TInput, TResult>
+            connection?: never
+          }
       ),
   ) {
     this.connection = options.connection
@@ -112,7 +116,7 @@ export class GenerationClient<
     try {
       if (this.fetcher) {
         // Direct fetch path
-        const result = await this.fetcher(input)
+        const result = await this.fetcher(input, { signal })
         if (signal.aborted) return
         this.setResult(result)
         this.setStatus('success')

packages/typescript/ai-client/src/generation-types.ts

@@ -56,13 +56,32 @@ export const GENERATION_EVENTS = {
 // Transport Types
 // ===========================
 
+/**
+ * Options passed to a fetcher function by the generation client.
+ */
+export interface GenerationFetcherOptions {
+  /** AbortSignal that is triggered when the user calls `stop()` */
+  signal: AbortSignal
+}
+
+/**
+ * A direct async function that performs a generation request.
+ *
+ * @template TInput - The input type for the generation request
+ * @template TResult - The result type returned by the generation
+ */
+export type GenerationFetcher<TInput, TResult> = (
+  input: TInput,
+  options?: GenerationFetcherOptions,
+) => Promise<TResult>
+
 /**
  * Transport configuration for generation clients.
  * Supports either a ConnectionAdapter (streaming) or a direct fetcher function.
  */
 export type GenerationTransport<TInput, TResult> =
   | { connection: ConnectionAdapter; fetcher?: never }
-  | { fetcher: (input: TInput) => Promise<TResult>; connection?: never }
+  | { fetcher: GenerationFetcher<TInput, TResult>; connection?: never }
 
 // ===========================
 // Client Options

packages/typescript/ai-client/src/index.ts

@@ -22,6 +22,8 @@ export type {
   InferGenerationOutput,
   GenerationClientState,
   GenerationClientOptions,
+  GenerationFetcher,
+  GenerationFetcherOptions,
   GenerationTransport,
   VideoGenerationClientOptions,
   VideoStatusInfo,

packages/typescript/ai-client/src/video-generation-client.ts

@@ -3,6 +3,7 @@ import type { StreamChunk } from '@tanstack/ai'
 import type { ConnectionAdapter } from './connection-adapters'
 import type {
   GenerationClientState,
+  GenerationFetcher,
   VideoGenerateInput,
   VideoGenerateResult,
   VideoGenerationClientOptions,
@@ -65,7 +66,7 @@ interface VideoCallbacks<TOutput> {
 export class VideoGenerationClient<TOutput = VideoGenerateResult> {
   private connection: ConnectionAdapter | undefined
   private fetcher:
-    | ((input: VideoGenerateInput) => Promise<VideoGenerateResult>)
+    | GenerationFetcher<VideoGenerateInput, VideoGenerateResult>
     | undefined
   private body: Record<string, any>
 
@@ -83,7 +84,7 @@ export class VideoGenerationClient<TOutput = VideoGenerateResult> {
       (
         | { connection: ConnectionAdapter; fetcher?: never }
         | {
-            fetcher: (input: VideoGenerateInput) => Promise<VideoGenerateResult>
+            fetcher: GenerationFetcher<VideoGenerateInput, VideoGenerateResult>
             connection?: never
           }
       ),
@@ -159,7 +160,7 @@ export class VideoGenerationClient<TOutput = VideoGenerateResult> {
     if (!this.fetcher) return
 
     // Fetcher returns a completed result directly
-    const result = await this.fetcher(input)
+    const result = await this.fetcher(input, { signal })
     if (signal.aborted) return
 
     this.setResult(result)

packages/typescript/ai-client/tests/generation-client.test.ts

@@ -71,6 +71,29 @@ describe('GenerationClient', () => {
       expect(states).toEqual([true, false])
     })
 
+    it('should pass abort signal to fetcher', async () => {
+      const fetcherSpy = vi.fn(
+        async (_input: any, options?: { signal: AbortSignal }) => {
+          expect(options).toBeDefined()
+          expect(options!.signal).toBeInstanceOf(AbortSignal)
+          expect(options!.signal.aborted).toBe(false)
+          return { id: '1' }
+        },
+      )
+
+      const client = new GenerationClient({
+        fetcher: fetcherSpy,
+      })
+
+      await client.generate({ prompt: 'test' })
+
+      expect(fetcherSpy).toHaveBeenCalledTimes(1)
+      expect(fetcherSpy).toHaveBeenCalledWith(
+        { prompt: 'test' },
+        { signal: expect.any(AbortSignal) },
+      )
+    })
+
     it('should not allow concurrent requests', async () => {
       let resolveFirst: (value: any) => void
       let callCount = 0

packages/typescript/ai-client/tests/video-generation-client.test.ts

@@ -77,6 +77,33 @@ describe('VideoGenerationClient', () => {
       expect(states).toEqual([true, false])
     })
 
+    it('should pass abort signal to fetcher', async () => {
+      const fetcherSpy = vi.fn(
+        async (_input: any, options?: { signal: AbortSignal }) => {
+          expect(options).toBeDefined()
+          expect(options!.signal).toBeInstanceOf(AbortSignal)
+          expect(options!.signal.aborted).toBe(false)
+          return {
+            jobId: 'job-1',
+            status: 'completed' as const,
+            url: 'https://example.com/video.mp4',
+          }
+        },
+      )
+
+      const client = new VideoGenerationClient({
+        fetcher: fetcherSpy,
+      })
+
+      await client.generate({ prompt: 'test video' })
+
+      expect(fetcherSpy).toHaveBeenCalledTimes(1)
+      expect(fetcherSpy).toHaveBeenCalledWith(
+        { prompt: 'test video' },
+        { signal: expect.any(AbortSignal) },
+      )
+    })
+
     it('should not allow concurrent requests', async () => {
       let resolveFirst: (value: any) => void
       let callCount = 0

packages/typescript/ai-react/src/use-generate-image.ts

@@ -3,6 +3,7 @@ import type { ImageGenerationResult, StreamChunk } from '@tanstack/ai'
 import type {
   ConnectionAdapter,
   GenerationClientState,
+  GenerationFetcher,
   ImageGenerateInput,
   InferGenerationOutput,
 } from '@tanstack/ai-client'
@@ -16,7 +17,7 @@ export interface UseGenerateImageOptions<TOutput = ImageGenerationResult> {
   /** Connection adapter for streaming transport (SSE, HTTP stream, custom) */
   connection?: ConnectionAdapter
   /** Direct async function for image generation */
-  fetcher?: (input: ImageGenerateInput) => Promise<ImageGenerationResult>
+  fetcher?: GenerationFetcher<ImageGenerateInput, ImageGenerationResult>
   /** Unique identifier for this generation instance */
   id?: string
   /** Additional body parameters to send with ConnectionAdapter requests */

packages/typescript/ai-react/src/use-generate-speech.ts

@@ -3,6 +3,7 @@ import type { StreamChunk, TTSResult } from '@tanstack/ai'
 import type {
   ConnectionAdapter,
   GenerationClientState,
+  GenerationFetcher,
   InferGenerationOutput,
   SpeechGenerateInput,
 } from '@tanstack/ai-client'
@@ -16,7 +17,7 @@ export interface UseGenerateSpeechOptions<TOutput = TTSResult> {
   /** Connection adapter for streaming transport (SSE, HTTP stream, custom) */
   connection?: ConnectionAdapter
   /** Direct async function for speech generation */
-  fetcher?: (input: SpeechGenerateInput) => Promise<TTSResult>
+  fetcher?: GenerationFetcher<SpeechGenerateInput, TTSResult>
   /** Unique identifier for this generation instance */
   id?: string
   /** Additional body parameters to send with ConnectionAdapter requests */

packages/typescript/ai-react/src/use-generate-video.ts

@@ -4,6 +4,7 @@ import type { StreamChunk } from '@tanstack/ai'
 import type {
   ConnectionAdapter,
   GenerationClientState,
+  GenerationFetcher,
   InferGenerationOutput,
   VideoGenerateInput,
   VideoGenerateResult,
@@ -17,7 +18,7 @@ export interface UseGenerateVideoOptions<TOutput = VideoGenerateResult> {
   /** Connection adapter for streaming transport (server handles polling) */
   connection?: ConnectionAdapter
   /** Direct async function that returns a completed video result */
-  fetcher?: (input: VideoGenerateInput) => Promise<VideoGenerateResult>
+  fetcher?: GenerationFetcher<VideoGenerateInput, VideoGenerateResult>
   /** Unique identifier for this generation instance */
   id?: string
   /** Additional body parameters to send with ConnectionAdapter requests */

packages/typescript/ai-react/src/use-generation.ts

@@ -5,6 +5,7 @@ import type {
   ConnectionAdapter,
   GenerationClientOptions,
   GenerationClientState,
+  GenerationFetcher,
   InferGenerationOutput,
 } from '@tanstack/ai-client'
 
@@ -21,7 +22,7 @@ export interface UseGenerationOptions<TInput, TResult, TOutput = TResult> {
   /** Connection adapter for streaming transport (SSE, HTTP stream, custom) */
   connection?: ConnectionAdapter
   /** Direct async function for one-shot generation (no streaming protocol needed) */
-  fetcher?: (input: TInput) => Promise<TResult>
+  fetcher?: GenerationFetcher<TInput, TResult>
   /** Unique identifier for this generation instance */
   id?: string
   /** Additional body parameters to send with ConnectionAdapter requests */