Cancel previous search queries when typing

Fixes #2149

lib/api/useApiQuery.tsx

@@ -1,11 +1,15 @@
 import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 
-import type { ResourceError, ResourceName, ResourcePayload } from './resources';
-import type { Params as ApiFetchParams } from './useApiFetch';
+import type { Params as FetchParams } from 'lib/hooks/useFetch';
+
+import type { ResourceError, ResourceName, ResourcePathParams, ResourcePayload } from './resources';
 import useApiFetch from './useApiFetch';
 
-export interface Params<R extends ResourceName, E = unknown, D = ResourcePayload<R>> extends ApiFetchParams<R> {
+export interface Params<R extends ResourceName, E = unknown, D = ResourcePayload<R>> {
+  pathParams?: ResourcePathParams<R>;
+  queryParams?: Record<string, string | Array<string> | number | boolean | undefined>;
+  fetchParams?: Pick<FetchParams, 'body' | 'method' | 'headers'>;
   queryOptions?: Omit<UseQueryOptions<ResourcePayload<R>, ResourceError<E>, D>, 'queryKey' | 'queryFn'>;
   queryKey?: QueryKey;
 }
@@ -27,11 +31,11 @@ export default function useApiQuery<R extends ResourceName, E = unknown, D = Res
   return useQuery<ResourcePayload<R>, ResourceError<E>, D>({
     // eslint-disable-next-line @tanstack/query/exhaustive-deps
     queryKey: queryKey || getResourceKey(resource, { pathParams, queryParams }),
-    queryFn: async() => {
+    queryFn: async({ signal }) => {
       // all errors and error typing is handled by react-query
       // so error response will never go to the data
       // that's why we are safe here to do type conversion "as Promise<ResourcePayload<R>>"
-      return apiFetch(resource, { pathParams, queryParams, fetchParams }) as Promise<ResourcePayload<R>>;
+      return apiFetch(resource, { pathParams, queryParams, fetchParams: { ...fetchParams, signal } }) as Promise<ResourcePayload<R>>;
     },
     ...queryOptions,
   });