Merge pull request #4 from OpenAPI-Qraft/cancel-queries

feat: Query Cancellation support

Author: radist2s

.changeset/thick-kids-double.md

@@ -0,0 +1,7 @@
+---
+"@openapi-qraft/react": patch
+"@openapi-qraft/cli": patch
+"playground": patch
+---
+
+feature: add support for `cancelQueries` method

packages/cli/src/lib/ts-factory/getClientFactory.ts

@@ -186,4 +186,5 @@ const serviceCallbacks = [
   'useQueries',
   'useSuspenseQueries',
   'invalidateQueries',
+  'cancelQueries',
 ] as const;

packages/react-client/README.md

@@ -174,7 +174,7 @@ function App() {
 With the client set up, you can now use the generated Hooks in your React Components to fetch data, execute mutations,
 and more.
 
-### [useQuery 🔗](https://tanstack.com/query/latest/docs/framework/react/reference/useQuery)
+### [useQuery(...) 🔗](https://tanstack.com/query/latest/docs/framework/react/reference/useQuery)
 
 ```ts
 /**
@@ -193,7 +193,7 @@ const { data, error, isPending } = qraft.entities.getEntities.useQuery({
 });
 ```
 
-### [useMutation 🔗](https://tanstack.com/query/latest/docs/framework/react/reference/useMutation)
+### [useMutation(...) 🔗](https://tanstack.com/query/latest/docs/framework/react/reference/useMutation)
 
 #### With predefined parameters
 
@@ -253,7 +253,7 @@ mutation.mutate({
 });
 ```
 
-### [useMutationState 🔗](https://tanstack.com/query/latest/docs/framework/react/reference/useMutationState)
+### [useMutationState(...) 🔗](https://tanstack.com/query/latest/docs/framework/react/reference/useMutationState)
 
 Mutation state is a helper hook that provides the current state of a mutation globally.
 It could be used to track the status of a mutation in any component, which is useful for showing loading spinners or
@@ -281,7 +281,7 @@ useEffect(() => {
 }, [mutate, mutationState?.status]);
 ```
 
-### [useInfiniteQuery 🔗](https://tanstack.com/query/latest/docs/framework/react/reference/useInfiniteQuery)
+### [useInfiniteQuery(...) 🔗](https://tanstack.com/query/latest/docs/framework/react/reference/useInfiniteQuery)
 
 #### _Offset-based_
 
@@ -358,7 +358,7 @@ infiniteQuery.fetchNextPage();
 infiniteQuery.fetchPreviousPage();
 ```
 
-### [useQueries 🔗](https://tanstack.com/query/latest/docs/framework/react/reference/useQueries)
+### [useQueries(...) 🔗](https://tanstack.com/query/latest/docs/framework/react/reference/useQueries)
 
 ```ts
 /**
@@ -397,7 +397,7 @@ qraft.entities.getEntities.useQueries({
 });
 ```
 
-### [invalidateQueries 🔗](https://tanstack.com/query/latest/docs/reference/QueryClient#queryclientinvalidatequeries)
+### [invalidateQueries(...) 🔗](https://tanstack.com/query/latest/docs/reference/QueryClient#queryclientinvalidatequeries)
 
 [Queries Invalidation 🔗](https://tanstack.com/query/latest/docs/framework/react/guides/query-invalidation) is possible
 using `<operation>.invalidateQueries(..)` method.
@@ -501,13 +501,18 @@ qraft.entities.getEntities.invalidateQueries(
 );
 ```
 
+### [cancelQueries(...) 🔗](https://tanstack.com/query/latest/docs/reference/QueryClient#queryclientcancelqueries)
+
+[Query Cancellation](https://tanstack.com/query/latest/docs/framework/react/guides/query-cancellation) has the
+same interface as `invalidateQueries(..)`, but it will cancel the queries instead of invalidating them.
+
 ### Suspense Queries
 
 Supported Suspense Queries are:
 
-- [useSuspenseQuery 🔗](https://tanstack.com/query/latest/docs/framework/react/reference/useSuspenseQuery)
-- [useSuspenseInfiniteQuery 🔗](https://tanstack.com/query/latest/docs/framework/react/reference/useSuspenseInfiniteQuery)
-- [useSuspenseQueries 🔗](https://tanstack.com/query/latest/docs/framework/react/reference/useSuspenseQueries)
+- [useSuspenseQuery(...) 🔗](https://tanstack.com/query/latest/docs/framework/react/reference/useSuspenseQuery)
+- [useSuspenseInfiniteQuery(...) 🔗](https://tanstack.com/query/latest/docs/framework/react/reference/useSuspenseInfiniteQuery)
+- [useSuspenseQueries(...) 🔗](https://tanstack.com/query/latest/docs/framework/react/reference/useSuspenseQueries)
 
 ### Documentation in Progress 🚧
 

packages/react-client/src/ServiceOperation.ts

@@ -1,4 +1,5 @@
-import {
+import type {
+  CancelOptions,
   DefaultError,
   FetchStatus,
   InfiniteData,
@@ -14,7 +15,7 @@ import {
   SetDataOptions,
   Updater,
 } from '@tanstack/query-core';
-import {
+import type {
   DefinedInitialDataInfiniteOptions,
   DefinedInitialDataOptions,
   DefinedUseInfiniteQueryResult,
@@ -63,7 +64,8 @@ export interface ServiceOperationQuery<
     ServiceOperationGetInfiniteQueryData<TSchema, TData, TParams>,
     ServiceOperationSetQueryData<TSchema, TData, TParams>,
     ServiceOperationSetInfiniteQueryData<TSchema, TData, TParams>,
-    ServiceOperationInvalidateQueries<TSchema, TData, TParams, TError> {
+    ServiceOperationInvalidateQueries<TSchema, TData, TParams, TError>,
+    ServiceOperationCancelQueries<TSchema, TData, TParams, TError> {
   schema: TSchema;
   types: {
     parameters: TParams;
@@ -144,7 +146,7 @@ interface ServiceOperationUseQueries<
 
 type QueryTypeFilter = 'all' | 'active' | 'inactive';
 
-interface InvalidateQueryFiltersBase<
+interface QueryFiltersBase<
   TSchema extends { url: string; method: string },
   TData,
   TParams = {},
@@ -178,56 +180,65 @@ interface InvalidateQueryFiltersBase<
    * Include queries matching their fetchStatus
    */
   fetchStatus?: FetchStatus;
-
-  refetchType?: QueryTypeFilter | 'none';
 }
 
-interface InvalidateQueryFiltersByQueryKey<
+interface QueryFiltersByQueryKey<
   TSchema extends { url: string; method: string },
   TData,
   TParams = {},
   TError = DefaultError,
-> extends InvalidateQueryFiltersBase<TSchema, TData, TParams, TError> {
+> extends QueryFiltersBase<TSchema, TData, TParams, TError> {
   /**
    * Include queries matching this query key
    */
   queryKey?: ServiceOperationQueryKey<TSchema, TParams>;
 }
 
-interface InvalidateQueryFiltersByParameters<
+interface QueryFiltersByParameters<
   TSchema extends { url: string; method: string },
   TData,
   TParams = {},
   TError = DefaultError,
-> extends InvalidateQueryFiltersBase<TSchema, TData, TParams, TError> {
+> extends QueryFiltersBase<TSchema, TData, TParams, TError> {
   /**
    * Include queries matching parameters
    */
   parameters?: TParams;
 }
 
+type InvalidateQueryFilters<
+  TSchema extends { url: string; method: string },
+  TData,
+  TParams = {},
+  TError = DefaultError,
+> = (
+  | QueryFiltersByParameters<TSchema, TData, TParams, TError>
+  | QueryFiltersByQueryKey<TSchema, TData, TParams, TError>
+) & {
+  refetchType?: QueryTypeFilter | 'none';
+};
+
 interface ServiceOperationInvalidateQueries<
   TSchema extends { url: string; method: string },
   TData,
   TParams = {},
   TError = DefaultError,
 > {
   invalidateQueries(
-    filters:
-      | InvalidateQueryFiltersByParameters<TSchema, TData, TParams, TError>
-      | InvalidateQueryFiltersByQueryKey<TSchema, TData, TParams, TError>,
+    filters: InvalidateQueryFilters<TSchema, TData, TParams, TError>,
     options: InvalidateOptions,
     queryClient: QueryClient
   ): Promise<void>;
   invalidateQueries(
-    filters:
-      | InvalidateQueryFiltersByParameters<TSchema, TData, TParams, TError>
-      | InvalidateQueryFiltersByQueryKey<TSchema, TData, TParams, TError>,
+    filters: InvalidateQueryFilters<TSchema, TData, TParams, TError>,
     queryClient: QueryClient
   ): Promise<void>;
   invalidateQueries(queryClient: QueryClient): Promise<void>;
 }
 
+/**
+ * @internal
+ */
 export interface ServiceOperationInvalidateQueriesCallback<
   TSchema extends { url: string; method: string },
   TData,
@@ -236,14 +247,55 @@ export interface ServiceOperationInvalidateQueriesCallback<
 > extends ServiceOperationInvalidateQueries<TSchema, TData, TParams, TError> {
   invalidateQueries(
     filters:
-      | InvalidateQueryFiltersByParameters<TSchema, TData, TParams, TError>
-      | InvalidateQueryFiltersByQueryKey<TSchema, TData, TParams, TError>
+      | QueryFiltersByParameters<TSchema, TData, TParams, TError>
+      | QueryFiltersByQueryKey<TSchema, TData, TParams, TError>
       | QueryClient,
     options?: InvalidateOptions | QueryClient,
     queryClient?: QueryClient
   ): Promise<void>;
 }
 
+interface ServiceOperationCancelQueries<
+  TSchema extends { url: string; method: string },
+  TData,
+  TParams = {},
+  TError = DefaultError,
+> {
+  cancelQueries(
+    filters:
+      | QueryFiltersByParameters<TSchema, TData, TParams, TError>
+      | QueryFiltersByQueryKey<TSchema, TData, TParams, TError>,
+    options: CancelOptions,
+    queryClient: QueryClient
+  ): Promise<void>;
+  cancelQueries(
+    filters:
+      | QueryFiltersByParameters<TSchema, TData, TParams, TError>
+      | QueryFiltersByQueryKey<TSchema, TData, TParams, TError>,
+    queryClient: QueryClient
+  ): Promise<void>;
+  cancelQueries(queryClient: QueryClient): Promise<void>;
+}
+
+/**
+ * @internal
+ */
+export interface ServiceOperationCancelQueriesCallback<
+  TSchema extends { url: string; method: string },
+  TData,
+  TParams = {},
+  TError = DefaultError,
+> extends ServiceOperationCancelQueries<TSchema, TData, TParams, TError> {
+  cancelQueries(
+    filters:
+      | QueryFiltersByParameters<TSchema, TData, TParams, TError>
+      | QueryFiltersByQueryKey<TSchema, TData, TParams, TError>
+      | QueryClient,
+    options?: CancelOptions | QueryClient,
+    queryClient?: QueryClient
+  ): Promise<void>;
+}
+
 interface ServiceOperationUseSuspenseQueries<
   TSchema extends { url: string; method: string },
   TData,

packages/react-client/src/callbacks/cancelQueries.ts

@@ -0,0 +1,22 @@
+import { callQueryClientMethodWithQueryFilters } from '../lib/callQueryClientMethodWithQueryFilters.js';
+import type { QraftClientOptions } from '../qraftAPIClient.js';
+import type { RequestClientSchema } from '../RequestClient.js';
+import { ServiceOperationCancelQueriesCallback } from '../ServiceOperation.js';
+
+export function cancelQueries<TData>(
+  qraftOptions: QraftClientOptions | undefined,
+  schema: RequestClientSchema,
+  args: Parameters<
+    ServiceOperationCancelQueriesCallback<
+      RequestClientSchema,
+      unknown,
+      TData
+    >['cancelQueries']
+  >
+): Promise<void> {
+  return callQueryClientMethodWithQueryFilters(
+    'cancelQueries',
+    schema,
+    args as never
+  ) as never;
+}

packages/react-client/src/callbacks/invalidateQueries.ts

@@ -1,6 +1,4 @@
-import type { InvalidateOptions, QueryClient } from '@tanstack/query-core';
-
-import { composeQueryKey } from '../lib/composeQueryKey.js';
+import { callQueryClientMethodWithQueryFilters } from '../lib/callQueryClientMethodWithQueryFilters.js';
 import type { QraftClientOptions } from '../qraftAPIClient.js';
 import type { RequestClientSchema } from '../RequestClient.js';
 import type { ServiceOperationInvalidateQueriesCallback } from '../ServiceOperation.js';
@@ -16,54 +14,9 @@ export function invalidateQueries<TData>(
     >['invalidateQueries']
   >
 ): Promise<void> {
-  const queryClient = (
-    args.length === 1
-      ? args[0]
-      : args.length === 2
-        ? args[1]
-        : args.length === 3
-          ? args[2]
-          : undefined
-  ) as QueryClient | undefined;
-
-  const filters = args.length === 1 ? undefined : args[0];
-  const options = (args.length === 3 ? args[1] : undefined) as
-    | InvalidateOptions
-    | undefined;
-
-  if (!queryClient) throw new Error('queryClient is required');
-  if (!queryClient.invalidateQueries) throw new Error('queryClient is invalid');
-
-  if (!filters) {
-    return queryClient.invalidateQueries(
-      {
-        queryKey: composeQueryKey(schema, undefined),
-      },
-      options
-    );
-  }
-
-  if ('queryKey' in filters) {
-    return queryClient.invalidateQueries(filters as never, options);
-  }
-
-  if ('parameters' in filters) {
-    const { parameters, ...filtersRest } = filters;
-
-    return queryClient.invalidateQueries(
-      {
-        ...filtersRest,
-        queryKey: composeQueryKey(schema, parameters),
-      } as never,
-      options
-    );
-  }
-
-  return queryClient.invalidateQueries(
-    {
-      ...filters,
-      queryKey: composeQueryKey(schema, undefined),
-    } as never,
-    options
-  );
+  return callQueryClientMethodWithQueryFilters(
+    'invalidateQueries',
+    schema,
+    args as never
+  ) as never;
 }