chore: add TanStack Query ><= 5.79.2 Compatibility Layer

.changeset/strong-schools-say.md

@@ -0,0 +1,7 @@
+---
+'@openapi-qraft/tanstack-query-react-plugin': patch
+'@openapi-qraft/tanstack-query-react-types': patch
+'@openapi-qraft/react': patch
+---
+
+Moved `UseSuspenseInfiniteQueryOptions` type import from `@tanstack/react-query` to `@openapi-qraft/tanstack-query-react-types` and optimized generic parameters order for better compatibility with TanStack Query versions 5.79.2 and earlier.

e2e/projects/typescript-nodenext-nodenext-tanstack-query-5.79.2/.gitignore

@@ -0,0 +1,3 @@
+/package-lock.json
+node_modules
+/src/api

e2e/projects/typescript-nodenext-nodenext-tanstack-query-5.79.2/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "typescript-nodenext-nodenext-tanstack-query-5-79-2",
+  "description": "This test verifies that the current version of OpenAPI Qraft is compatible with TanStack Query 5.79.2 or earlier, due to the removal of TQueryData for UseSuspenseInfiniteQueryOptions in TanStack Query 5.80.0",
+  "private": true,
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "type": "module",
+  "scripts": {
+    "build": "tsc",
+    "codegen": "openapi-qraft --plugin tanstack-query-react --plugin openapi-typescript https://raw.githubusercontent.com/swagger-api/swagger-petstore/7767363b841961221a38c0be9c6b1066a5120051/src/main/resources/openapi.yaml --clean -o src/api --openapi-types-import-path '../schema.js' --explicit-import-extensions --openapi-types-file-name schema.ts",
+    "e2e:pre-build": "npm run codegen",
+    "e2e:post-build": "node ./dist/index.js"
+  },
+  "dependencies": {
+    "@openapi-qraft/cli": "latest",
+    "@openapi-qraft/react": "latest",
+    "@tanstack/react-query": "5.79.2",
+    "@tanstack/query-core": "5.79.2",
+    "@types/node": "latest",
+    "typescript": "latest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/OpenAPI-Qraft/openapi-qraft.git"
+  }
+}

e2e/projects/typescript-nodenext-nodenext-tanstack-query-5.79.2/src/index.ts

@@ -0,0 +1,108 @@
+import type { components, paths } from './api/index.js';
+import { requestFn } from '@openapi-qraft/react';
+import * as callbacksIndex from '@openapi-qraft/react/callbacks';
+import * as callbacks from '@openapi-qraft/react/callbacks/index';
+import { useMutation } from '@openapi-qraft/react/callbacks/useMutation';
+import { useQuery } from '@openapi-qraft/react/callbacks/useQuery';
+import {
+  createSecureRequestFn,
+  QraftSecureRequestFn,
+} from '@openapi-qraft/react/Unstable_QraftSecureRequestFn';
+import { QueryClient } from '@tanstack/react-query';
+import { createAPIClient as createAPIClientMjs } from './api/index.js';
+
+console.log({} satisfies Partial<components>);
+console.log({} satisfies Partial<paths>);
+
+if (typeof createAPIClientMjs !== 'undefined') {
+  console.log('Client is imported successfully from esm project.');
+} else {
+  console.error('Client is not imported from esm project.');
+  process.exit(1);
+}
+
+if (typeof callbacks !== 'undefined') {
+  console.log('Callbacks are imported successfully from esm project.');
+} else {
+  console.error('Callbacks are not imported from esm project.');
+  process.exit(1);
+}
+
+if (typeof callbacksIndex !== 'undefined') {
+  console.log('Callbacks index is imported successfully from esm project.');
+} else {
+  console.error('Callbacks index is not imported from esm project.');
+  process.exit(1);
+}
+
+if (typeof useMutation !== 'undefined') {
+  console.log('useMutation is imported successfully from esm project.');
+} else {
+  console.error('useMutation is not imported from esm project.');
+  process.exit(1);
+}
+
+if (typeof useQuery !== 'undefined') {
+  console.log('useQuery is imported successfully from esm project.');
+} else {
+  console.error('useQuery is not imported from esm project.');
+  process.exit(1);
+}
+
+if (typeof createSecureRequestFn !== 'undefined') {
+  console.log(
+    'createSecureRequestFn is imported successfully from esm project.'
+  );
+} else {
+  console.error('createSecureRequestFn is not imported from esm project.');
+  process.exit(1);
+}
+
+if (typeof QraftSecureRequestFn !== 'undefined') {
+  console.log(
+    'QraftSecureRequestFn is imported successfully from esm project.'
+  );
+} else {
+  console.error('QraftSecureRequestFn is not imported from esm project.');
+  process.exit(1);
+}
+
+function useTsCheck() {
+  const client = createAPIClientMjs({
+    baseUrl: 'https://api.example.com',
+    queryClient: new QueryClient(),
+    requestFn,
+  });
+
+  const query = client.pet.findPetsByStatus.useSuspenseInfiniteQuery(
+    {},
+    {
+      initialPageParam: {
+        query: {
+          status: 'sold',
+        },
+      },
+      getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) => {
+        // @ts-expect-error - should not be never or any
+        lastPageParam.query?.status satisfies never;
+        lastPageParam.query?.status satisfies
+          | undefined
+          | 'sold'
+          | 'available'
+          | 'pending';
+
+        return lastPageParam.query?.status === 'sold'
+          ? {
+              query: {
+                status: 'sold',
+              },
+            }
+          : undefined;
+      },
+    }
+  );
+
+  query.data.pages[0] satisfies typeof client.pet.findPetsByStatus.types.data;
+  // @ts-expect-error - should not be never or any
+  query.data.pages[0] satisfies never;
+}

e2e/projects/typescript-nodenext-nodenext-tanstack-query-5.79.2/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "target": "es2016",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "verbatimModuleSyntax": true
+  }
+}

e2e/projects/typescript-nodenext-nodenext/src/index.ts

@@ -1,4 +1,5 @@
 import type { components, paths } from './api/index.js';
+import { requestFn } from '@openapi-qraft/react';
 import * as callbacksIndex from '@openapi-qraft/react/callbacks';
 import * as callbacks from '@openapi-qraft/react/callbacks/index';
 import { useMutation } from '@openapi-qraft/react/callbacks/useMutation';
@@ -7,6 +8,7 @@ import {
   createSecureRequestFn,
   QraftSecureRequestFn,
 } from '@openapi-qraft/react/Unstable_QraftSecureRequestFn';
+import { QueryClient } from '@tanstack/react-query';
 import { createAPIClient as createAPIClientMjs } from './api/index.js';
 
 console.log({} satisfies Partial<components>);
@@ -64,3 +66,43 @@ if (typeof QraftSecureRequestFn !== 'undefined') {
   console.error('QraftSecureRequestFn is not imported from esm project.');
   process.exit(1);
 }
+
+function useTsCheck() {
+  const client = createAPIClientMjs({
+    baseUrl: 'https://api.example.com',
+    queryClient: new QueryClient(),
+    requestFn,
+  });
+
+  const query = client.pet.findPetsByStatus.useSuspenseInfiniteQuery(
+    {},
+    {
+      initialPageParam: {
+        query: {
+          status: 'sold',
+        },
+      },
+      getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) => {
+        // @ts-expect-error - should not be never or any
+        lastPageParam.query?.status satisfies never;
+        lastPageParam.query?.status satisfies
+          | undefined
+          | 'sold'
+          | 'available'
+          | 'pending';
+
+        return lastPageParam.query?.status === 'sold'
+          ? {
+              query: {
+                status: 'sold',
+              },
+            }
+          : undefined;
+      },
+    }
+  );
+
+  query.data.pages[0] satisfies typeof client.pet.findPetsByStatus.types.data;
+  // @ts-expect-error - should not be never or any
+  query.data.pages[0] satisfies never;
+}

packages/react-client/package.json

@@ -29,8 +29,8 @@
     "@openapi-qraft/rollup-config": "workspace:*",
     "@openapi-qraft/tanstack-query-react-plugin": "workspace:*",
     "@openapi-qraft/test-fixtures": "workspace:*",
-    "@tanstack/query-core": "^5.66.3",
-    "@tanstack/react-query": "^5.66.3",
+    "@tanstack/query-core": "^5.80.6",
+    "@tanstack/react-query": "^5.80.6",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
     "@types/jscodeshift": "^0.11.11",

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

@@ -29,7 +29,6 @@ export const useQueries: (
   return useQueriesTanstack(
     {
       ...options,
-      // @ts-expect-error - Too complex to type
       queries: options.queries.map((queryOptions) => {
         const optionsWithQueryKey =
           'parameters' in queryOptions

packages/tanstack-query-react-plugin/src/__snapshots__/explicit-import-extensions/services/ApprovalPoliciesService.ts.snapshot.ts

@@ -4,8 +4,8 @@
  */
 
 import type { paths } from "../../openapi.js";
-import type { DeepReadonly, InvalidateQueryFilters, MutationFiltersByMutationKey, MutationFiltersByParameters, MutationVariables, OperationError, OperationInfiniteData, PartialParameters, QueryFiltersByParameters, QueryFiltersByQueryKey, QueryFnOptionsByParameters, QueryFnOptionsByQueryKey, RequestFnResponse, ServiceOperationEnsureInfiniteQueryDataOptions, ServiceOperationEnsureQueryDataOptions, ServiceOperationFetchInfiniteQueryOptions, ServiceOperationFetchQueryOptions, ServiceOperationInfiniteQueryKey, ServiceOperationMutationFnOptions, ServiceOperationMutationKey, ServiceOperationQueryKey, ServiceOperationUseMutationOptions, UseQueryOptionsForUseQueries, UseQueryOptionsForUseSuspenseQuery, WithOptional, QraftServiceOperationsToken } from "@openapi-qraft/tanstack-query-react-types";
-import type { CancelOptions, DefinedInitialDataInfiniteOptions, DefinedInitialDataOptions, DefinedUseInfiniteQueryResult, DefinedUseQueryResult, InfiniteQueryPageParamsOptions, InvalidateOptions, Mutation, MutationState, NoInfer, QueryState, RefetchOptions, ResetOptions, SetDataOptions, UndefinedInitialDataInfiniteOptions, UndefinedInitialDataOptions, Updater, UseInfiniteQueryResult, UseMutationResult, UseQueryResult, UseSuspenseInfiniteQueryOptions, UseSuspenseInfiniteQueryResult, UseSuspenseQueryOptions, UseSuspenseQueryResult } from "@tanstack/react-query";
+import type { DeepReadonly, InvalidateQueryFilters, MutationFiltersByMutationKey, MutationFiltersByParameters, MutationVariables, OperationError, OperationInfiniteData, PartialParameters, QueryFiltersByParameters, QueryFiltersByQueryKey, QueryFnOptionsByParameters, QueryFnOptionsByQueryKey, RequestFnResponse, ServiceOperationEnsureInfiniteQueryDataOptions, ServiceOperationEnsureQueryDataOptions, ServiceOperationFetchInfiniteQueryOptions, ServiceOperationFetchQueryOptions, ServiceOperationInfiniteQueryKey, ServiceOperationMutationFnOptions, ServiceOperationMutationKey, ServiceOperationQueryKey, ServiceOperationUseMutationOptions, UseQueryOptionsForUseQueries, UseQueryOptionsForUseSuspenseQuery, UseSuspenseInfiniteQueryOptions, WithOptional, QraftServiceOperationsToken } from "@openapi-qraft/tanstack-query-react-types";
+import type { CancelOptions, DefinedInitialDataInfiniteOptions, DefinedInitialDataOptions, DefinedUseInfiniteQueryResult, DefinedUseQueryResult, InfiniteQueryPageParamsOptions, InvalidateOptions, Mutation, MutationState, NoInfer, QueryState, RefetchOptions, ResetOptions, SetDataOptions, UndefinedInitialDataInfiniteOptions, UndefinedInitialDataOptions, Updater, UseInfiniteQueryResult, UseMutationResult, UseQueryResult, UseSuspenseInfiniteQueryResult, UseSuspenseQueryOptions, UseSuspenseQueryResult } from "@tanstack/react-query";
 export interface ApprovalPoliciesService {
     /**
      * @summary Get an approval policy by ID
@@ -438,7 +438,7 @@ export interface ApprovalPoliciesService {
          * fetchNextPage(); // Fetch the next page
          * ```
          */
-        useSuspenseInfiniteQuery<TPageParam extends GetApprovalPoliciesIdParameters, TData = GetApprovalPoliciesIdData>(parameters: ServiceOperationInfiniteQueryKey<GetApprovalPoliciesIdSchema, GetApprovalPoliciesIdParameters> | (DeepReadonly<GetApprovalPoliciesIdParameters>), options: Omit<UseSuspenseInfiniteQueryOptions<GetApprovalPoliciesIdData, GetApprovalPoliciesIdError, OperationInfiniteData<TData, GetApprovalPoliciesIdParameters>, GetApprovalPoliciesIdData, ServiceOperationInfiniteQueryKey<GetApprovalPoliciesIdSchema, GetApprovalPoliciesIdParameters>, PartialParameters<DeepReadonly<TPageParam>>>, "queryKey" | "getPreviousPageParam" | "getNextPageParam" | "initialPageParam"> & InfiniteQueryPageParamsOptions<GetApprovalPoliciesIdData, PartialParameters<DeepReadonly<TPageParam>>>): UseSuspenseInfiniteQueryResult<OperationInfiniteData<TData, GetApprovalPoliciesIdParameters>, OperationError<GetApprovalPoliciesIdError>>;
+        useSuspenseInfiniteQuery<TPageParam extends GetApprovalPoliciesIdParameters, TData = GetApprovalPoliciesIdData>(parameters: ServiceOperationInfiniteQueryKey<GetApprovalPoliciesIdSchema, GetApprovalPoliciesIdParameters> | (DeepReadonly<GetApprovalPoliciesIdParameters>), options: Omit<UseSuspenseInfiniteQueryOptions<GetApprovalPoliciesIdData, GetApprovalPoliciesIdError, OperationInfiniteData<TData, GetApprovalPoliciesIdParameters>, ServiceOperationInfiniteQueryKey<GetApprovalPoliciesIdSchema, GetApprovalPoliciesIdParameters>, PartialParameters<DeepReadonly<TPageParam>>>, "queryKey" | "getPreviousPageParam" | "getNextPageParam" | "initialPageParam"> & InfiniteQueryPageParamsOptions<GetApprovalPoliciesIdData, PartialParameters<DeepReadonly<TPageParam>>>): UseSuspenseInfiniteQueryResult<OperationInfiniteData<TData, GetApprovalPoliciesIdParameters>, OperationError<GetApprovalPoliciesIdError>>;
         /**
          * Allows you to execute multiple asynchronous data fetching operations concurrently with Suspense support.
          * Similar to useQueries but integrates with React Suspense for loading states.

packages/tanstack-query-react-plugin/src/__snapshots__/explicit-import-extensions/services/FilesService.ts.snapshot.ts

@@ -4,8 +4,8 @@
  */
 
 import type { paths } from "../../openapi.js";
-import type { DeepReadonly, InvalidateQueryFilters, MutationFiltersByMutationKey, MutationFiltersByParameters, MutationVariables, OperationError, OperationInfiniteData, PartialParameters, QueryFiltersByParameters, QueryFiltersByQueryKey, QueryFnOptionsByParameters, QueryFnOptionsByQueryKey, RequestFnResponse, ServiceOperationEnsureInfiniteQueryDataOptions, ServiceOperationEnsureQueryDataOptions, ServiceOperationFetchInfiniteQueryOptions, ServiceOperationFetchQueryOptions, ServiceOperationInfiniteQueryKey, ServiceOperationMutationFnOptions, ServiceOperationMutationKey, ServiceOperationQueryKey, ServiceOperationUseMutationOptions, UseQueryOptionsForUseQueries, UseQueryOptionsForUseSuspenseQuery, WithOptional, QraftServiceOperationsToken } from "@openapi-qraft/tanstack-query-react-types";
-import type { CancelOptions, DefinedInitialDataInfiniteOptions, DefinedInitialDataOptions, DefinedUseInfiniteQueryResult, DefinedUseQueryResult, InfiniteQueryPageParamsOptions, InvalidateOptions, Mutation, MutationState, NoInfer, QueryState, RefetchOptions, ResetOptions, SetDataOptions, UndefinedInitialDataInfiniteOptions, UndefinedInitialDataOptions, Updater, UseInfiniteQueryResult, UseMutationResult, UseQueryResult, UseSuspenseInfiniteQueryOptions, UseSuspenseInfiniteQueryResult, UseSuspenseQueryOptions, UseSuspenseQueryResult } from "@tanstack/react-query";
+import type { DeepReadonly, InvalidateQueryFilters, MutationFiltersByMutationKey, MutationFiltersByParameters, MutationVariables, OperationError, OperationInfiniteData, PartialParameters, QueryFiltersByParameters, QueryFiltersByQueryKey, QueryFnOptionsByParameters, QueryFnOptionsByQueryKey, RequestFnResponse, ServiceOperationEnsureInfiniteQueryDataOptions, ServiceOperationEnsureQueryDataOptions, ServiceOperationFetchInfiniteQueryOptions, ServiceOperationFetchQueryOptions, ServiceOperationInfiniteQueryKey, ServiceOperationMutationFnOptions, ServiceOperationMutationKey, ServiceOperationQueryKey, ServiceOperationUseMutationOptions, UseQueryOptionsForUseQueries, UseQueryOptionsForUseSuspenseQuery, UseSuspenseInfiniteQueryOptions, WithOptional, QraftServiceOperationsToken } from "@openapi-qraft/tanstack-query-react-types";
+import type { CancelOptions, DefinedInitialDataInfiniteOptions, DefinedInitialDataOptions, DefinedUseInfiniteQueryResult, DefinedUseQueryResult, InfiniteQueryPageParamsOptions, InvalidateOptions, Mutation, MutationState, NoInfer, QueryState, RefetchOptions, ResetOptions, SetDataOptions, UndefinedInitialDataInfiniteOptions, UndefinedInitialDataOptions, Updater, UseInfiniteQueryResult, UseMutationResult, UseQueryResult, UseSuspenseInfiniteQueryResult, UseSuspenseQueryOptions, UseSuspenseQueryResult } from "@tanstack/react-query";
 export interface FilesService {
     /** @summary Get a files by ID */
     getFiles: {
@@ -315,7 +315,7 @@ export interface FilesService {
          * fetchNextPage(); // Fetch the next page
          * ```
          */
-        useSuspenseInfiniteQuery<TPageParam extends GetFilesParameters, TData = GetFilesData>(parameters: ServiceOperationInfiniteQueryKey<GetFilesSchema, GetFilesParameters> | (DeepReadonly<GetFilesParameters>), options: Omit<UseSuspenseInfiniteQueryOptions<GetFilesData, GetFilesError, OperationInfiniteData<TData, GetFilesParameters>, GetFilesData, ServiceOperationInfiniteQueryKey<GetFilesSchema, GetFilesParameters>, PartialParameters<DeepReadonly<TPageParam>>>, "queryKey" | "getPreviousPageParam" | "getNextPageParam" | "initialPageParam"> & InfiniteQueryPageParamsOptions<GetFilesData, PartialParameters<DeepReadonly<TPageParam>>>): UseSuspenseInfiniteQueryResult<OperationInfiniteData<TData, GetFilesParameters>, OperationError<GetFilesError>>;
+        useSuspenseInfiniteQuery<TPageParam extends GetFilesParameters, TData = GetFilesData>(parameters: ServiceOperationInfiniteQueryKey<GetFilesSchema, GetFilesParameters> | (DeepReadonly<GetFilesParameters>), options: Omit<UseSuspenseInfiniteQueryOptions<GetFilesData, GetFilesError, OperationInfiniteData<TData, GetFilesParameters>, ServiceOperationInfiniteQueryKey<GetFilesSchema, GetFilesParameters>, PartialParameters<DeepReadonly<TPageParam>>>, "queryKey" | "getPreviousPageParam" | "getNextPageParam" | "initialPageParam"> & InfiniteQueryPageParamsOptions<GetFilesData, PartialParameters<DeepReadonly<TPageParam>>>): UseSuspenseInfiniteQueryResult<OperationInfiniteData<TData, GetFilesParameters>, OperationError<GetFilesError>>;
         /**
          * Allows you to execute multiple asynchronous data fetching operations concurrently with Suspense support.
          * Similar to useQueries but integrates with React Suspense for loading states.
@@ -1148,7 +1148,7 @@ export interface FilesService {
          * fetchNextPage(); // Fetch the next page
          * ```
          */
-        useSuspenseInfiniteQuery<TPageParam extends GetFileListParameters, TData = GetFileListData>(parameters: ServiceOperationInfiniteQueryKey<GetFileListSchema, GetFileListParameters> | (DeepReadonly<GetFileListParameters> | void), options: Omit<UseSuspenseInfiniteQueryOptions<GetFileListData, GetFileListError, OperationInfiniteData<TData, GetFileListParameters>, GetFileListData, ServiceOperationInfiniteQueryKey<GetFileListSchema, GetFileListParameters>, PartialParameters<DeepReadonly<TPageParam>>>, "queryKey" | "getPreviousPageParam" | "getNextPageParam" | "initialPageParam"> & InfiniteQueryPageParamsOptions<GetFileListData, PartialParameters<DeepReadonly<TPageParam>>>): UseSuspenseInfiniteQueryResult<OperationInfiniteData<TData, GetFileListParameters>, OperationError<GetFileListError>>;
+        useSuspenseInfiniteQuery<TPageParam extends GetFileListParameters, TData = GetFileListData>(parameters: ServiceOperationInfiniteQueryKey<GetFileListSchema, GetFileListParameters> | (DeepReadonly<GetFileListParameters> | void), options: Omit<UseSuspenseInfiniteQueryOptions<GetFileListData, GetFileListError, OperationInfiniteData<TData, GetFileListParameters>, ServiceOperationInfiniteQueryKey<GetFileListSchema, GetFileListParameters>, PartialParameters<DeepReadonly<TPageParam>>>, "queryKey" | "getPreviousPageParam" | "getNextPageParam" | "initialPageParam"> & InfiniteQueryPageParamsOptions<GetFileListData, PartialParameters<DeepReadonly<TPageParam>>>): UseSuspenseInfiniteQueryResult<OperationInfiniteData<TData, GetFileListParameters>, OperationError<GetFileListError>>;
         /**
          * Allows you to execute multiple asynchronous data fetching operations concurrently with Suspense support.
          * Similar to useQueries but integrates with React Suspense for loading states.