feat(react-query): add option to generate suspense query

orval-labs · Oct 19, 2023 · 83e567b · 83e567b
1 parent 69280a3
commit 83e567b
Show file tree

Hide file tree

Showing 11 changed files with 323 additions and 183 deletions.
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -296,8 +296,10 @@ export type OverrideOutputContentType = {
 
 export type NormalizedQueryOptions = {
   useQuery?: boolean;
+  useSuspenseQuery?: boolean;
   useMutation?: boolean;
   useInfinite?: boolean;
+  useSuspenseInfiniteQuery?: boolean;
   useInfiniteQueryParam?: string;
   options?: any;
   queryKey?: NormalizedMutator;
@@ -309,8 +311,10 @@ export type NormalizedQueryOptions = {
 
 export type QueryOptions = {
   useQuery?: boolean;
+  useSuspenseQuery?: boolean;
   useMutation?: boolean;
   useInfinite?: boolean;
+  useSuspenseInfiniteQuery?: boolean;
   useInfiniteQueryParam?: string;
   options?: any;
   queryKey?: Mutator;

diff --git a/packages/orval/src/utils/options.ts b/packages/orval/src/utils/options.ts
@@ -364,12 +364,18 @@ const normalizeQueryOptions = (
     ...(!isUndefined(queryOptions.useQuery)
       ? { useQuery: queryOptions.useQuery }
       : {}),
+    ...(!isUndefined(queryOptions.useSuspenseQuery)
+      ? { useSuspenseQuery: queryOptions.useSuspenseQuery }
+      : {}),
     ...(!isUndefined(queryOptions.useMutation)
       ? { useMutation: queryOptions.useMutation }
       : {}),
     ...(!isUndefined(queryOptions.useInfinite)
       ? { useInfinite: queryOptions.useInfinite }
       : {}),
+    ...(!isUndefined(queryOptions.useSuspenseInfiniteQuery)
+      ? { useSuspenseInfiniteQuery: queryOptions.useSuspenseInfiniteQuery }
+      : {}),
     ...(queryOptions.useInfiniteQueryParam
       ? { useInfiniteQueryParam: queryOptions.useInfiniteQueryParam }
       : {}),

diff --git a/packages/query/src/index.ts b/packages/query/src/index.ts
@@ -146,15 +146,21 @@ const REACT_QUERY_DEPENDENCIES: GeneratorDependency[] = [
   {
     exports: [
       { name: 'useQuery', values: true },
+      { name: 'useSuspenseQuery', values: true },
       { name: 'useInfiniteQuery', values: true },
+      { name: 'useSuspenseInfiniteQuery', values: true },
       { name: 'useMutation', values: true },
       { name: 'UseQueryOptions' },
+      { name: 'UseSuspenseQueryOptions' },
       { name: 'UseInfiniteQueryOptions' },
+      { name: 'UseSuspenseInfiniteQueryOptions' },
       { name: 'UseMutationOptions' },
       { name: 'QueryFunction' },
       { name: 'MutationFunction' },
       { name: 'UseQueryResult' },
+      { name: 'UseSuspenseQueryResult' },
       { name: 'UseInfiniteQueryResult' },
+      { name: 'UseSuspenseInfiniteQueryResult' },
       { name: 'QueryKey' },
       { name: 'InfiniteData' },
     ],
@@ -461,6 +467,8 @@ type QueryType = 'infiniteQuery' | 'query';
 const QueryType = {
   INFINITE: 'infiniteQuery' as QueryType,
   QUERY: 'query' as QueryType,
+  SUSPENSE_QUERY: 'suspenseQuery' as QueryType,
+  SUSPENSE_INFINITE: 'suspenseInfiniteQuery' as QueryType,
 };
 
 const INFINITE_QUERY_PROPERTIES = ['getNextPageParam', 'getPreviousPageParam'];
@@ -483,7 +491,8 @@ const generateQueryOptions = ({
         omitBy(
           options,
           (_, key) =>
-            type !== QueryType.INFINITE &&
+            (type !== QueryType.INFINITE ||
+              type !== QueryType.SUSPENSE_INFINITE) &&
             INFINITE_QUERY_PROPERTIES.includes(key),
         ),
       )?.slice(1, -1)}`
@@ -550,7 +559,10 @@ const getQueryOptionsDefinition = ({
     }>>`;
 
     return `${prefix}${pascal(type)}Options<${funcReturnType}, TError, TData${
-      hasQueryV5 && type === QueryType.INFINITE && queryParam && queryParams
+      hasQueryV5 &&
+      (type === QueryType.INFINITE || type === QueryType.SUSPENSE_INFINITE) &&
+      queryParam &&
+      queryParams
         ? `, ${funcReturnType}, QueryKey, ${queryParams?.schema.name}['${queryParam}']`
         : ''
     }>`;
@@ -613,19 +625,13 @@ const generateQueryReturnType = ({
   operationName,
   hasVueQueryV4,
   hasSvelteQueryV4,
-  hasQueryV5,
-  queryParams,
-  queryParam,
 }: {
   outputClient: OutputClient | OutputClientFunc;
   type: QueryType;
   isMutatorHook?: boolean;
   operationName: string;
   hasVueQueryV4: boolean;
   hasSvelteQueryV4: boolean;
-  hasQueryV5: boolean;
-  queryParams?: GetterQueryParam;
-  queryParam?: string;
 }) => {
   switch (outputClient) {
     case OutputClient.SVELTE_QUERY: {
@@ -648,23 +654,17 @@ const generateQueryReturnType = ({
         )}Result<TData, TError>> & { queryKey: QueryKey }`;
       }
 
-      if (type !== QueryType.INFINITE) {
+      if (type !== QueryType.INFINITE && type !== QueryType.SUSPENSE_INFINITE) {
         return `UseQueryReturnType<TData, TError> & { queryKey: QueryKey }`;
       }
 
       return `UseInfiniteQueryReturnType<TData, TError> & { queryKey: QueryKey }`;
     }
     case OutputClient.REACT_QUERY:
     default: {
-      const infiniteParame =
-        queryParams && queryParam
-          ? `, ${queryParams?.schema.name}['${queryParam}']`
-          : '';
-      return ` Use${pascal(type)}Result<${
-        hasQueryV5 && type === QueryType.INFINITE
-          ? `InfiniteData<TData${infiniteParame}>`
-          : 'TData'
-      }, TError> & { queryKey: QueryKey }`;
+      return ` Use${pascal(
+        type,
+      )}Result<TData, TError> & { queryKey: QueryKey }`;
     }
   }
 };
@@ -828,9 +828,6 @@ const generateQueryImplementation = ({
     operationName,
     hasVueQueryV4,
     hasSvelteQueryV4,
-    hasQueryV5,
-    queryParams,
-    queryParam,
   });
 
   let errorType = `AxiosError<${response.definition.errors || 'unknown'}>`;
@@ -902,7 +899,17 @@ const generateQueryImplementation = ({
 
   const queryOptionsVarName = isRequestOptions ? 'queryOptions' : 'options';
 
-  const queryOptionsFn = `export const ${queryOptionsFnName} = <TData = Awaited<ReturnType<${dataType}>>, TError = ${errorType}>(${queryProps} ${queryArguments}) => {
+  const infiniteParam =
+    queryParams && queryParam
+      ? `, ${queryParams?.schema.name}['${queryParam}']`
+      : '';
+  const TData =
+    hasQueryV5 &&
+    (type === QueryType.INFINITE || type === QueryType.SUSPENSE_INFINITE)
+      ? `InfiniteData<Awaited<ReturnType<${dataType}>>${infiniteParam}>`
+      : `Awaited<ReturnType<${dataType}>>`;
+
+  const queryOptionsFn = `export const ${queryOptionsFnName} = <TData = ${TData}, TError = ${errorType}>(${queryProps} ${queryArguments}) => {
     
 ${hookOptions}
 
@@ -979,7 +986,7 @@ export type ${pascal(name)}QueryError = ${errorType}
 
 ${doc}export const ${camel(
     `${operationPrefix}-${name}`,
-  )} = <TData = Awaited<ReturnType<${dataType}>>, TError = ${errorType}>(\n ${queryProps} ${queryArguments}\n  ): ${returnType} => {
+  )} = <TData = ${TData}, TError = ${errorType}>(\n ${queryProps} ${queryArguments}\n  ): ${returnType} => {
 
   const ${queryOptionsVarName} = ${queryOptionsFnName}(${queryProperties}${
     queryProperties ? ',' : ''
@@ -1118,6 +1125,25 @@ const generateQueryHook = async (
             },
           ]
         : []),
+      ...(query?.useSuspenseQuery
+        ? [
+            {
+              name: camel(`${operationName}-suspense`),
+              options: query?.options,
+              type: QueryType.SUSPENSE_QUERY,
+            },
+          ]
+        : []),
+      ...(query?.useSuspenseInfiniteQuery
+        ? [
+            {
+              name: camel(`${operationName}-suspense-infinite`),
+              options: query?.options,
+              type: QueryType.SUSPENSE_INFINITE,
+              queryParam: query?.useInfiniteQueryParam,
+            },
+          ]
+        : []),
     ];
 
     const queryKeyFnName = camel(`get-${operationName}-queryKey`);
@@ -1136,7 +1162,6 @@ const generateQueryHook = async (
     }`;
 
     implementation += `${!queryKeyMutator ? queryKeyFn : ''}
-  
 
     ${queries.reduce(
       (acc, queryOption) =>

diff --git a/samples/react-query/basic/orval.config.ts b/samples/react-query/basic/orval.config.ts
@@ -22,6 +22,13 @@ export default defineConfig({
                 '[].id': () => faker.number.int({ min: 1, max: 99999 }),
               }),
             },
+            query: {
+              useQuery: true,
+              useSuspenseQuery: true,
+              useSuspenseInfiniteQuery: true,
+              useInfinite: true,
+              useInfiniteQueryParam: 'limit',
+            },
           },
           showPetById: {
             mock: {
@@ -41,11 +48,6 @@ export default defineConfig({
             '/tag|name/': () => faker.person.lastName(),
           },
         },
-        query: {
-          useQuery: true,
-          useInfinite: true,
-          useInfiniteQueryParam: 'limit',
-        },
       },
     },
     input: {

diff --git a/samples/react-query/basic/package.json b/samples/react-query/basic/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@faker-js/faker": "^8.0.2",
-    "@tanstack/react-query": "^4.0.10",
+    "@tanstack/react-query": "^5.0.0",
     "@types/node": "^14.14.13",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",