feat: cancellation

Author: astandrik

src/containers/MultipartTest/MultipartTest.tsx

@@ -3,12 +3,11 @@ import React from 'react';
 import {Button} from '@gravity-ui/uikit';
 
 import type {MultipartChunk} from '../../store/reducers/multipart/multipart';
-import {useStreamMultipartQuery} from '../../store/reducers/multipart/multipart';
+import {useLazyStreamMultipartQuery} from '../../store/reducers/multipart/multipart';
 
 const ANIMATION_DURATION = 300;
 
 export function MultipartTest() {
-    const [startStream, setStartStream] = React.useState(false);
     const [receivedChunks, setReceivedChunks] = React.useState<MultipartChunk[]>([]);
 
     const handleChunk = React.useCallback((chunk: MultipartChunk) => {
@@ -22,29 +21,32 @@ export function MultipartTest() {
         });
     }, []);
 
-    console.log('Component rendered, startStream:', startStream);
-
-    const {error, isLoading} = useStreamMultipartQuery(
-        {
-            url: '/viewer/json/query',
-            onChunk: handleChunk,
-        },
-        {
-            skip: !startStream,
-        },
-    );
+    const [trigger, {error, isLoading}] = useLazyStreamMultipartQuery();
+    const requestRef = React.useRef<ReturnType<typeof trigger> | null>(null);
 
     const handleStart = React.useCallback(() => {
         console.log('Starting stream...');
         setReceivedChunks([]);
-        setStartStream(true);
-    }, []);
+        requestRef.current = trigger({
+            url: '/viewer/json/query',
+            onChunk: handleChunk,
+        });
+    }, [trigger, handleChunk]);
 
     const handleStop = React.useCallback(() => {
         console.log('Stopping stream...');
-        setStartStream(false);
+        requestRef.current?.abort();
+        requestRef.current = null;
     }, []);
 
+    const handleButtonClick = React.useCallback(() => {
+        if (isLoading) {
+            handleStop();
+        } else {
+            handleStart();
+        }
+    }, [isLoading, handleStart, handleStop]);
+
     const getErrorMessage = (err: unknown): string => {
         if (err instanceof Error) {
             return err.message;
@@ -72,13 +74,8 @@ export function MultipartTest() {
             </h2>
 
             <div style={{marginBottom: '24px', display: 'flex', gap: '12px', alignItems: 'center'}}>
-                <Button
-                    view="action"
-                    size="l"
-                    onClick={startStream ? handleStop : handleStart}
-                    loading={isLoading}
-                >
-                    {startStream ? 'Stop Streaming' : 'Start Streaming'}
+                <Button view="action" size="l" onClick={handleButtonClick} loading={isLoading}>
+                    {isLoading ? 'Stop Streaming' : 'Start Streaming'}
                 </Button>
                 {receivedChunks.length > 0 && (
                     <span

src/services/api/multipart.ts

@@ -15,7 +15,6 @@ export class MultipartAPI extends BaseYdbAPI {
     getPath(): string {
         return 'http://localhost:3000/stream';
     }
-
     async streamMultipartResponse<T>(
         url: string,
         onChunk: (chunk: MultipartChunk<T>) => void,

src/store/reducers/multipart/multipart.ts

@@ -15,7 +15,7 @@ interface StreamOptions {
 export const multipartApi = api.injectEndpoints({
     endpoints: (build) => ({
         streamMultipart: build.query<void, StreamOptions>({
-            queryFn: async ({url, onChunk}, _signal, _extraOptions, _baseQuery) => {
+            queryFn: async ({url, onChunk}, {signal}, _extraOptions, _baseQuery) => {
                 try {
                     console.log('Starting multipart stream with onChunk:', Boolean(onChunk));
 
@@ -28,6 +28,10 @@ export const multipartApi = api.injectEndpoints({
                                 onChunk(chunk);
                             }
                         },
+                        {},
+                        {
+                            signal,
+                        },
                     );
 
                     return {data: undefined};
@@ -46,4 +50,4 @@ export const multipartApi = api.injectEndpoints({
     }),
 });
 
-export const {useStreamMultipartQuery} = multipartApi;
+export const {useStreamMultipartQuery, useLazyStreamMultipartQuery} = multipartApi;