@toktokhan-dev/cli-plugin-gen-api-react-query 0.0.19 → 0.1.0

package/dist/index.d.ts

@@ -38,11 +38,10 @@ interface GenerateSwaggerApiConfig {
     swaggerSchemaUrl: string;
     /** 생성될 파일들이 위치할 경로입니다. */
     output: string;
-    /** 생성되는 코드의 React Query 포함 여부 입니다.
-     *  해당 옵션이 false 일경우 infiniteQuery 를 포함한 모든 Query 가 생성되지 않습니다. */
+    /** 생성되는 코드의 useQuery, useInfiniteQuery 포함 여부 입니다. */
     includeReactQuery: boolean;
-    /** 생성되는 코드의 InfiniteQuery 포함 여부 입니다. */
-    includeReactInfiniteQuery: boolean;
+    /** 생성되는 코드의 useSuspenseQuery, useSuspenseInfiniteQuery 포함 여부 입니다. */
+    includeReactSuspenseQuery: boolean;
     /** Api 의 axios 혹은 fetch 요청 instance 주소입니다. */
     instancePath: string;
     /** http client 타입입니다. */

package/dist/index.js

@@ -23,11 +23,12 @@ const GENERATE_SWAGGER_DATA = {
     TYPE_FILE: ['react-query-type.ts', 'data-contracts.ts', 'util-types.ts'],
     UTIL_FILE: ['param-serializer-by.ts'],
     QUERY_HOOK_INDICATOR: '@indicator-for-query-hook',
+    USE_SUSPENSE_QUERY_HOOK_INDICATOR: '@indicator-for-use-suspense-query-hook',
     AXIOS_DEFAULT_INSTANCE_PATH: '@/configs/axios/instance',
     FETCH_DEFAULT_INSTANCE_PATH: '@/configs/fetch/fetch-extend',
 };
 
-const { EXTRA_TEMPLATE_FOLTER, CUSTOM_AXIOS_TEMPLATE_FOLDER, CUSTOM_FETCH_TEMPLATE_FOLDER, QUERY_HOOK_INDICATOR: QUERY_HOOK_INDICATOR$1, } = GENERATE_SWAGGER_DATA;
+const { EXTRA_TEMPLATE_FOLTER, CUSTOM_AXIOS_TEMPLATE_FOLDER, CUSTOM_FETCH_TEMPLATE_FOLDER, QUERY_HOOK_INDICATOR: QUERY_HOOK_INDICATOR$1, USE_SUSPENSE_QUERY_HOOK_INDICATOR: USE_SUSPENSE_QUERY_HOOK_INDICATOR$1, } = GENERATE_SWAGGER_DATA;
 const parseSwagger = (config) => generateApi({
     templates: config.httpClientType === 'axios' ?
         CUSTOM_AXIOS_TEMPLATE_FOLDER
@@ -62,15 +63,19 @@ const parseSwagger = (config) => generateApi({
         onPrepareConfig: (defaultConfig) => {
             return {
                 ...defaultConfig,
-                myConfig: { QUERY_HOOK_INDICATOR: QUERY_HOOK_INDICATOR$1, ...config },
+                myConfig: {
+                    QUERY_HOOK_INDICATOR: QUERY_HOOK_INDICATOR$1,
+                    USE_SUSPENSE_QUERY_HOOK_INDICATOR: USE_SUSPENSE_QUERY_HOOK_INDICATOR$1,
+                    ...config,
+                },
             };
         },
     },
 });
 
-const { TYPE_FILE, UTIL_FILE, QUERY_HOOK_INDICATOR } = GENERATE_SWAGGER_DATA;
+const { TYPE_FILE, UTIL_FILE, QUERY_HOOK_INDICATOR, USE_SUSPENSE_QUERY_HOOK_INDICATOR, } = GENERATE_SWAGGER_DATA;
 const writeSwaggerApiFile = (params) => {
-    const { input, output, spinner } = params;
+    const { input, output, spinner, config } = params;
     input.files.forEach(async ({ fileName, fileContent: content, fileExtension }) => {
         const name = fileName + fileExtension;
         try {
@@ -97,9 +102,14 @@ const writeSwaggerApiFile = (params) => {
                 return;
             }
             if (isApiFile) {
-                const { apiContents, hookContents } = spilitHookContents(filename, content);
-                genreatePretty(path.resolve(targetFolder, `${filename}.api.ts`), apiContents);
-                genreatePretty(path.resolve(targetFolder, `${filename}.query.ts`), hookContents);
+                const { apiContents, hookParts } = splitHookContents(filename, content);
+                generatePretty(path.resolve(targetFolder, `${filename}.api.ts`), apiContents);
+                if (config.includeReactQuery) {
+                    generatePretty(path.resolve(targetFolder, `${filename}.query.ts`), hookParts[0]);
+                }
+                if (config.includeReactSuspenseQuery) {
+                    generatePretty(path.resolve(targetFolder, `${filename}.suspenseQuery.ts`), hookParts[1]);
+                }
                 return;
             }
             generate(path.resolve(targetFolder, name), content);
@@ -109,7 +119,7 @@ const writeSwaggerApiFile = (params) => {
         }
     });
 };
-async function genreatePretty(path, contents) {
+async function generatePretty(path, contents) {
     const organized = await prettierString(contents, {
         parser: 'babel-ts',
         plugins: ['prettier-plugin-organize-imports'],
@@ -123,8 +133,9 @@ async function genreatePretty(path, contents) {
 function generate(path, contents) {
     fs.writeFileSync(path, contents);
 }
-function spilitHookContents(filename, content) {
+function splitHookContents(filename, content) {
     const [_apiContent, _hookContent] = content.split(QUERY_HOOK_INDICATOR);
+    const _hookParts = _hookContent.split(USE_SUSPENSE_QUERY_HOOK_INDICATOR);
     const lastImport = getLastImportLine(content);
     const lines = content.split('\n');
     const importArea = [
@@ -133,7 +144,7 @@ function spilitHookContents(filename, content) {
     ].join('\n');
     return {
         apiContents: _apiContent,
-        hookContents: importArea + _hookContent,
+        hookParts: _hookParts.map((d) => importArea + d),
     };
 }
 function getLastImportLine(content) {
@@ -155,7 +166,7 @@ const genApi = defineCommand({
         swaggerSchemaUrl: '',
         output: 'src/generated/apis',
         includeReactQuery: true,
-        includeReactInfiniteQuery: true,
+        includeReactSuspenseQuery: false,
         httpClientType: 'axios',
         instancePath: GENERATE_SWAGGER_DATA.AXIOS_DEFAULT_INSTANCE_PATH,
         paginationSets: [
@@ -191,7 +202,12 @@ const genApi = defineCommand({
         }
         withLoading('Write Swagger API', //
         covered.output, (spinner) => {
-            writeSwaggerApiFile({ input: parsed, output: covered.output, spinner });
+            writeSwaggerApiFile({
+                input: parsed,
+                output: covered.output,
+                spinner,
+                config,
+            });
         });
     },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toktokhan-dev/cli-plugin-gen-api-react-query",
-  "version": "0.0.19",
+  "version": "0.1.0",
   "description": "A CLI plugin for generating API hooks with React Query built by TOKTOKHAN.DEV",
   "author": "TOKTOKHAN.DEV <fe-system@toktokhan.dev>",
   "license": "ISC",

package/templates/custom-axios/api.eta

@@ -6,36 +6,36 @@ const {  RESERVED_REQ_PARAMS_ARG_NAMES } = config.constants;
 const routes = route.routes;
 const dataContracts = _.map(modelTypes, "name");
 
-
 const projectRootPath = process.env.PWD;
-const myTemeplatePath = `../my`
-const reactQueryTemplatePath = `${myTemeplatePath}/react-query-hook.eta`
-const reactQuerKeyTemplatePath = `${myTemeplatePath}/react-query-key.eta`
+const myTemeplatePath = `../my`;
+const reactQueryTemplatePath = `${myTemeplatePath}/react-query-hook.eta`;
+const reactSuspenseQueryTemplatePath = `${myTemeplatePath}/react-query-suspense-hook.eta`;
+const reactQuerKeyTemplatePath = `${myTemeplatePath}/react-query-key.eta`;
 
 const apiClassName = classNameCase(route.moduleName) + 'Api';
-const paginationSets = myConfig?.paginationSets
-const instancePath = myConfig?.instancePath
-
-const apiInstanceName =route.moduleName + "Api";
-const queryKeyName = "QUERY_KEY_" + _.upperCase(apiClassName).replace(/ /g, '_');
+const paginationSets = myConfig?.paginationSets;
+const instancePath = myConfig?.instancePath;
 
+const includeReactQuery = myConfig?.includeReactQuery;
+const includeReactSuspenseQuery = myConfig?.includeReactSuspenseQuery;
 
+const apiInstanceName = route.moduleName + "Api";
+const queryKeyName = "QUERY_KEY_" + _.upperCase(apiClassName).replace(/ /g, '_');
 
 const hasPaginationKeyword = (queryString, keywords = paginationKeywords ) => {
-  if(!myConfig?.includeReactInfiniteQuery) return false;
+  if(!includeReactQuery && !includeReactSuspenseQuery ) return false;
   const keywordUnion = keywords.map(str => `.*${str}.*`).join("|");
   const rgxSting = keywords.map(str => `(${keywordUnion})`).join("");
   const rgx = new RegExp(rgxSting);
   return rgx.test(queryString);
-}
-
+};
 
 const upperSnakeCase = (str) => _.upperCase(str).replace(/ /g, '_');
 
-const removeModuleName = (str) =>  str.replace(route.moduleName,'');
+const removeModuleName = (str) => str.replace(route.moduleName,'');
 
 const getConfigByRoute = (route) => {
-  const { specificArgNameResolver } = route
+  const { specificArgNameResolver } = route;
   const { parameters, path, method, payload, query, formData, security, requestParams } = route.request;
   const pathParams = _.values(parameters);
   const pathParamsNames = _.map(pathParams, "name");
@@ -45,7 +45,7 @@ const getConfigByRoute = (route) => {
     name: specificArgNameResolver.resolve(RESERVED_REQ_PARAMS_ARG_NAMES),
     optional: true,
     type: "RequestParams",
-}
+  };
 
   const argToTmpl = ({ name, optional, type, defaultValue }) => `${name}${!defaultValue && optional ? '?' : ''}: ${type}`;
 
@@ -71,30 +71,29 @@ const getConfigByRoute = (route) => {
     // Sort by optionality
     .sortBy(rawWrapperArgs, [o => o.optional])
     .map(argToTmpl)
-    .join('; ')
-
+    .join('; ');
 
   const functionName = route.routeName.usage;
-  const hookVariant = _.upperCase(method) === "GET" ? "Query" : "Mutation"
+  const hookVariant = _.upperCase(method) === "GET" ? "Query" : "Mutation";
   const key = upperSnakeCase(functionName);
   const methodKey = upperSnakeCase(removeModuleName(functionName));
-  const pagination = paginationSets.find(d => !!query?.type &&  hasPaginationKeyword(query?.type.split("\n").join(""), d.keywords));
+  const pagination = paginationSets.find(d => !!query?.type && hasPaginationKeyword(query?.type.split("\n").join(""), d.keywords));
 
   const isQuery = hookVariant === "Query";
   const isMutation = hookVariant === "Mutation";
   const hasPagination = !!pagination;
 
-  const isOptionalVariables  = _
-  // Find optional value
+  const isOptionalVariables = _
   .filter(rawWrapperArgs, o => o.optional).length === rawWrapperArgs.length;
 
-  const conditionalVriablesText = isOptionalVariables? "variables?" : "variables";
+  const conditionalVriablesText = isOptionalVariables ? "variables?" : "variables";
   const repalceTarget = "${" + conditionalVriablesText + ".";
 
-
   return {
-    conditions:{
+    conditions: {
       hasPagination,
+      includeReactQuery,
+      includeReactSuspenseQuery,
       isQuery,
       isMutation,
       isOptionalVariables,
@@ -116,31 +115,32 @@ const getConfigByRoute = (route) => {
       removeModuleName,
       argToTmpl,
     }
-  }
-}
+  };
+};
 
 const dataForReactHookTemplate = {
-        getConfigByRoute,
-        queryKeyName,
-        apiClassName,
-        apiInstanceName,
-    };
-
+  getConfigByRoute,
+  queryKeyName,
+  apiClassName,
+  apiInstanceName,
+};
 %>
 
-<% if (config.httpClientType === config.constants.HTTP_CLIENT.AXIOS) { %> import { AxiosRequestConfig, AxiosResponse } from "axios"; <% } %>
+<% if (config.httpClientType === config.constants.HTTP_CLIENT.AXIOS) { %> 
+import { AxiosRequestConfig, AxiosResponse } from "axios"; 
+<% } %>
 
 import { AxiosError } from 'axios';
-import { useQuery, useMutation, useInfiniteQuery, InfiniteData } from '@tanstack/react-query';
-import { QueryHookParams, InfiniteQueryHookParams, MutationHookParams, Parameter, RequestFnReturn } from "../@types/react-query-type";
-import { paramsSerializerBy } "../@utils/param-serializer-by"
+import { useQuery, useMutation, useInfiniteQuery, useSuspenseQuery, useSuspenseInfiniteQuery, InfiniteData } from '@tanstack/react-query';
+import { QueryHookParams, InfiniteQueryHookParams, MutationHookParams, Parameter, RequestFnReturn, SuspenseInfiniteQueryHookParams, SuspenseQueryHookParams } from "../@types/react-query-type";
+import { paramsSerializerBy } from "../@utils/param-serializer-by";
 
-import instance from "<%~ instancePath %>";
-import { HttpClient, RequestParams, ContentType, HttpResponse } from "../@<%~ config.fileNames.httpClient %>";
+import instance from "<%= instancePath %>";
+import { HttpClient, RequestParams, ContentType, HttpResponse } from "../@<%= config.fileNames.httpClient %>";
 import { DeepOmitReadOnly } from '../@types/util-types';
 
 <% if (dataContracts.length) { %>
-  import { <%~ dataContracts.join(", ") %> } from "../@types/<%~ config.fileNames.dataContracts %>"
+import { <%= dataContracts.join(", ") %> } from "../@types/<%= config.fileNames.dataContracts %>";
 <% } %>
 
 /**
@@ -149,8 +149,6 @@ import { DeepOmitReadOnly } from '../@types/util-types';
  * 스크립트가 실행될때, 파일을 항상 새로 쓰기 때문에 파일 수정시 작성내용이 제거 될 수 있습니다.
  */
 
-
-
 export class <%= apiClassName %><SecurityDataType = unknown><% if (!config.singleHttpClient) { %> extends HttpClient<SecurityDataType> <% } %> {
 <% if(config.singleHttpClient) { %>
   http: HttpClient<SecurityDataType>;
@@ -160,33 +158,52 @@ export class <%= apiClassName %><SecurityDataType = unknown><% if (!config.singl
   }
 <% } %>
 
-    <% routes.forEach((route) => { %>
-        <%~ includeFile('./procedure-call.eta', { ...it, route }) %>
-    <% }) %>
+  <% routes.forEach((route) => { %>
+    <%~ includeFile('./procedure-call.eta', { ...it, route }) %>
+  <% }) %>
 }
 
+<% if(myConfig.includeReactQuery || myConfig.includeReactSuspenseQuery) { %>
+  //<%= myConfig.QUERY_HOOK_INDICATOR %>
 
+  <% if(myConfig.includeReactQuery) { %>
+    /**
+    * !DO NOT EDIT THIS FILE
+    * 
+    * 스크립트가 실행될때, 파일을 항상 새로 쓰기 때문에 파일 수정시 작성내용이 제거 될 수 있습니다.
+    */
 
-<% if(myConfig.includeReactQuery) { %>
-  //<%~ myConfig.QUERY_HOOK_INDICATOR %>
+    /**
+    * tok-cli.config.ts 에서 설정된 instance 경로의 axios instace 가 적용된, api 의 instance 입니다.
+    */
+    export const <%= apiInstanceName %> = new <%= apiClassName %>({ instance:instance });
 
-/**
- * !DO NOT EDIT THIS FILE
- * 
- * 스크립트가 실행될때, 파일을 항상 새로 쓰기 때문에 파일 수정시 작성내용이 제거 될 수 있습니다.
- */
+    <%~ includeFile(reactQuerKeyTemplatePath, { ...it, route , dataFromApiTemplate:dataForReactHookTemplate}) %>
+
+    <% routes.forEach((route) => { %>
+      <%~ includeFile(reactQueryTemplatePath, { ...it, route , dataFromApiTemplate:dataForReactHookTemplate}) %>
+    <% }) %>
+  <% } %>
 
+  <% if(myConfig.includeReactSuspenseQuery) { %>
+    //<%= myConfig.USE_SUSPENSE_QUERY_HOOK_INDICATOR %>
 
-/**
- * tok-cli.config.ts 에서 설정된 instance 경로의 axios instace 가 적용된, api 의 instance 입니다.
- */
-export const <%= apiInstanceName %> = new <%= apiClassName %>({ instance:instance })
+    /**
+    * !DO NOT EDIT THIS FILE
+    * 
+    * 스크립트가 실행될때, 파일을 항상 새로 쓰기 때문에 파일 수정시 작성내용이 제거 될 수 있습니다.
+    */
 
-   <%~ includeFile(reactQuerKeyTemplatePath, { ...it, route , dataFromApiTemplate:dataForReactHookTemplate}) %>
-  
-   <% routes.forEach((route) => { %>
-      <%~ includeFile(reactQueryTemplatePath, { ...it, route , dataFromApiTemplate:dataForReactHookTemplate}) %>
+    /**
+    * tok-cli.config.ts 에서 설정된 instance 경로의 axios instace 가 적용된, api 의 instance 입니다.
+    */
+    export const <%= apiInstanceName %> = new <%= apiClassName %>({ instance:instance });
+
+    <%~ includeFile(reactQuerKeyTemplatePath, { ...it, route , dataFromApiTemplate:dataForReactHookTemplate}) %>
+
+    <% routes.forEach((route) => { %>
+      <%~ includeFile(reactSuspenseQueryTemplatePath, { ...it, route , dataFromApiTemplate:dataForReactHookTemplate}) %>
     <% }) %>
+  <% } %>
 <% } %>
- 
 

package/templates/custom-fetch/api.eta

@@ -9,12 +9,16 @@ const dataContracts = _.map(modelTypes, "name");
 const projectRootPath = process.env.PWD;
 const myTemeplatePath = `../my`
 const reactQueryTemplatePath = `${myTemeplatePath}/react-query-hook.eta`
-const reactQuerKeyTemplatePath = `${myTemeplatePath}/react-query-key.eta`
+const reactSuspenseQueryTemplatePath = `${myTemeplatePath}/react-query-suspense-hook.eta`;
+const reactQueryKeyTemplatePath = `${myTemeplatePath}/react-query-key.eta`
 
 const apiClassName = classNameCase(route.moduleName) + 'Api';
 const paginationSets = myConfig?.paginationSets;
 const instancePath = myConfig?.instancePath || "@/configs/fetch/fetch-extend";
 
+const includeReactQuery = myConfig?.includeReactQuery;
+const includeReactSuspenseQuery = myConfig?.includeReactSuspenseQuery;
+
 const apiInstanceName = route.moduleName + "Api";
 const queryKeyName = "QUERY_KEY_" + _.upperCase(apiClassName).replace(/ /g, '_');
 
@@ -90,6 +94,8 @@ const getConfigByRoute = (route) => {
   return {
     conditions: {
       hasPagination,
+      includeReactQuery,
+      includeReactSuspenseQuery,
       isQuery,
       isMutation,
       isOptionalVariables,
@@ -122,8 +128,8 @@ const dataForReactHookTemplate = {
 };
 %>
 
-import { useQuery, useMutation, useInfiniteQuery, InfiniteData } from '@tanstack/react-query';
-import { QueryHookParams, InfiniteQueryHookParams, MutationHookParams, Parameter, RequestFnReturn } from "../@types/react-query-type";
+import { useQuery, useMutation, useInfiniteQuery, useSuspenseQuery, useSuspenseInfiniteQuery, InfiniteData } from '@tanstack/react-query';
+import { QueryHookParams, InfiniteQueryHookParams, MutationHookParams, Parameter, RequestFnReturn, SuspenseInfiniteQueryHookParams, SuspenseQueryHookParams } from "../@types/react-query-type";
 import { paramsSerializerBy } from "../@utils/param-serializer-by";
 import fetchExtended from "<%= instancePath %>";
 
@@ -141,13 +147,11 @@ import { <%~ dataContracts.join(", ") %> } from "../@types/<%~ config.fileNames.
  * 스크립트가 실행될때, 파일을 항상 새로 쓰기 때문에 파일 수정시 작성내용이 제거 될 수 있습니다.
  */
 
-
-
 export class <%= apiClassName %><SecurityDataType = unknown><% if (!config.singleHttpClient) { %> extends HttpClient<SecurityDataType> <% } %> {
-<% if (config.singleHttpClient) { %>
+<% if(config.singleHttpClient) { %>
   http: HttpClient<SecurityDataType>;
 
-  constructor(http: HttpClient<SecurityDataType>) {
+  constructor (http: HttpClient<SecurityDataType>) {
     this.http = http;
   }
 <% } %>
@@ -157,25 +161,47 @@ export class <%= apiClassName %><SecurityDataType = unknown><% if (!config.singl
   <% }) %>
 }
 
+<% if(myConfig.includeReactQuery || myConfig.includeReactSuspenseQuery) { %>
+  //<%= myConfig.QUERY_HOOK_INDICATOR %>
 
-<% if (myConfig.includeReactQuery) { %>
-  //<%~ myConfig.QUERY_HOOK_INDICATOR %>
+  <% if(myConfig.includeReactQuery) { %>
+    /**
+    * !DO NOT EDIT THIS FILE
+    * 
+    * 스크립트가 실행될때, 파일을 항상 새로 쓰기 때문에 파일 수정시 작성내용이 제거 될 수 있습니다.
+    */
 
+    /**
+    * tok-cli.config.ts 에서 설정된 instance 경로의 axios instace 가 적용된, api 의 instance 입니다.
+    */
+    export const <%= apiInstanceName %> = new <%= apiClassName %>({ customFetch: fetchExtended });
 
-/**
- * !DO NOT EDIT THIS FILE
- * 
- * 스크립트가 실행될때, 파일을 항상 새로 쓰기 때문에 파일 수정시 작성내용이 제거 될 수 있습니다.
- */
+    <%~ includeFile(reactQueryKeyTemplatePath, { ...it, route , dataFromApiTemplate:dataForReactHookTemplate}) %>
 
+    <% routes.forEach((route) => { %>
+      <%~ includeFile(reactQueryTemplatePath, { ...it, route , dataFromApiTemplate:dataForReactHookTemplate}) %>
+    <% }) %>
+  <% } %>
 
-/**
- * tok-cli.config.ts 에서 설정된 instance 경로의 fetch instance 가 적용된, api 의 instance 입니다.
- */
-export const <%= apiInstanceName %> = new <%= apiClassName %>({ customFetch: fetchExtended });
-  <%~ includeFile(reactQuerKeyTemplatePath, { ...it, route, dataFromApiTemplate: dataForReactHookTemplate }) %>
+  <% if(myConfig.includeReactSuspenseQuery) { %>
+    //<%= myConfig.USE_SUSPENSE_QUERY_HOOK_INDICATOR %>
 
-  <% routes.forEach((route) => { %>
-    <%~ includeFile(reactQueryTemplatePath, { ...it, route, dataFromApiTemplate: dataForReactHookTemplate }) %>
-  <% }) %>
+    /**
+    * !DO NOT EDIT THIS FILE
+    * 
+    * 스크립트가 실행될때, 파일을 항상 새로 쓰기 때문에 파일 수정시 작성내용이 제거 될 수 있습니다.
+    */
+
+    /**
+    * tok-cli.config.ts 에서 설정된 instance 경로의 axios instace 가 적용된, api 의 instance 입니다.
+    */
+    export const <%= apiInstanceName %> = new <%= apiClassName %>({ customFetch: fetchExtended  });
+
+    <%~ includeFile(reactQueryKeyTemplatePath, { ...it, route , dataFromApiTemplate:dataForReactHookTemplate}) %>
+
+    <% routes.forEach((route) => { %>
+      <%~ includeFile(reactSuspenseQueryTemplatePath, { ...it, route , dataFromApiTemplate:dataForReactHookTemplate}) %>
+    <% }) %>
+  <% } %>
 <% } %>
+

package/templates/custom-fetch/http-client.eta

@@ -42,9 +42,10 @@ export interface ApiConfig<SecurityDataType = unknown> {
     customFetch?: typeof fetch;
 }
 
-export interface HttpResponse<D extends unknown, E extends unknown = unknown> extends Response {
-    data: D;
-    error: E;
+export interface HttpResponse<D, E = unknown>
+  extends Response {
+  data: D
+  error: E
 }
 
 type CancelToken = Symbol | string | number;

package/templates/my/react-query-hook.eta

@@ -4,10 +4,11 @@
   const { errorType } = route.response;
   const { getConfigByRoute,paginationTargetKeywords } = dataFromApiTemplate;
 
-
   const { 
     conditions:{
       hasPagination,
+      includeReactQuery,
+      includeReactSuspenseQuery,
       isQuery,
       isMutation,
       isOptionalVariables,
@@ -47,8 +48,6 @@
   const isAxiosInstance = myConfig.httpClientType === 'axios'
   const fetchErrorType = `{ error: ${errorType} }`
 
-
-
   const initialPageParam = () => {
     if(typeof pagination.initialPageParam === "string") return pagination.initialPageParam;
     if(typeof pagination.initialPageParam === "function") return pagination.initialPageParam({ apiInstanceName, functionName, pagination})
@@ -63,111 +62,114 @@
     if(typeof pagination.getNextPageParam === "string") return pagination.getNextPageParam;
     if(typeof pagination.getNextPageParam === "function") return pagination.getNextPageParam({ apiInstanceName, functionName, pagination})
   }
-
-
  %>
 
- /**
- <%~ routeDocs.description %>
+<% if (isQuery) { %>
+  <% if(includeReactQuery) { %>
+    /**
+      <%~ routeDocs.description %>
 
- * <% /* Here you can add some other JSDoc tags */ %>
+      * <% /* Here you can add some other JSDoc tags */ %>
 
-<%~ routeDocs.lines %>
- */
+      <%~ routeDocs.lines %>
+    */
 
-<% if (isQuery) { %>
-  export const use<%~ classNameCase(functionName) %>Query = <
-   TData = RequestFnReturn<typeof <%= apiInstanceName %>.<%~ functionName %>>,
-  >(
-  <%~ conditionalParamsText %>: QueryHookParams<typeof <%= apiInstanceName %>.<%~ functionName %>,
-    <% if (isAxiosInstance) { %>
-    AxiosError<<%~ errorType %>>
-    <% } else { %>
-    <%~ fetchErrorType %>
-    <% } %>
-  , TData>,
-) => {
-  const <%~ hookKeyName %> = <%~ queryKeyName %>.<%~ methodKey %>(<%~ `${conditionalParamsText}.variables` %>);
-  return useQuery({
-    <%~ hookKeyName %>,
-    queryFn: () => <%= apiInstanceName %>.<%~ functionName %>(<%~ `${conditionalParamsText}.variables` %>),
-    ...params?.options,
-  });
-};
+    export const use<%~ classNameCase(functionName) %>Query = <
+      TData = RequestFnReturn<typeof <%= apiInstanceName %>.<%~ functionName %>>,
+    >(
+      <%~ conditionalParamsText %>: QueryHookParams<typeof <%= apiInstanceName %>.<%~ functionName %>,
+      <% if (isAxiosInstance) { %>
+        AxiosError<<%~ errorType %>>
+      <% } else { %>
+        <%~ fetchErrorType %>
+      <% } %>
+      , TData>,
+    ) => {
+      const <%~ hookKeyName %> = <%~ queryKeyName %>.<%~ methodKey %>(<%~ `${conditionalParamsText}.variables` %>);
+      return useQuery({
+        <%~ hookKeyName %>,
+        queryFn: () => <%= apiInstanceName %>.<%~ functionName %>(<%~ `${conditionalParamsText}.variables` %>),
+        ...params?.options,
+      });
+    }
+  <% } %>
 <% } else { %>
+    /**
+    <%~ routeDocs.description %>
+
+    * <% /* Here you can add some other JSDoc tags */ %>
+
+    <%~ routeDocs.lines %>
+  */
+
   export const use<%~ classNameCase(functionName) %>Mutation = (
-  <%~ conditionalParamsText %>: MutationHookParams<typeof <%= apiInstanceName %>.<%~ functionName %>,
+    <%~ conditionalParamsText %>: MutationHookParams<typeof <%= apiInstanceName %>.<%~ functionName %>,
     <% if (isAxiosInstance) { %>
-    AxiosError<<%~ errorType %>>
+      AxiosError<<%~ errorType %>>
     <% } else { %>
-    <%~ fetchErrorType %>
+      <%~ fetchErrorType %>
     <% } %>
   >,
-) => {
-  const <%~ hookKeyName %> = <%~ queryKeyName %>.<%~ methodKey %>();
-  return useMutation({
-    <%~ hookKeyName %>,
-    mutationFn: <%= apiInstanceName %>.<%~ functionName %>,
-    ...params?.options,
-  });
-};
+  ) => {
+    const <%~ hookKeyName %> = <%~ queryKeyName %>.<%~ methodKey %>();
+    return useMutation({
+      <%~ hookKeyName %>,
+      mutationFn: <%= apiInstanceName %>.<%~ functionName %>,
+      ...params?.options,
+    });
+  };
 <% } %>
 
-
 <% if (isQuery && hasPagination) { %>
-
- /**
- <%~ routeDocs.description %>
-
- * <% /* Here you can add some other JSDoc tags */ %>
-
-<%~ routeDocs.lines %>
-
- */
-export const use<%~ classNameCase(functionName) %>InfiniteQuery = <
-   TData = InfiniteData<
-       RequestFnReturn<typeof <%= apiInstanceName %>.<%~ functionName %>>,
-       Parameter<typeof <%= apiInstanceName %>.<%~ functionName %>>
-  >,
->(
-  <%~ conditionalParamsText %>: InfiniteQueryHookParams<typeof <%= apiInstanceName %>.<%~ functionName %>,
-  <% if (isAxiosInstance) { %>
-  AxiosError<<%~ errorType %>>
-    <% } else { %>
-  <%~ errorType %>
-  <% } %>
-, TData>,
-) => {
-  const <%~ hookKeyName %> =  <%~ queryKeyName %>.<%~ methodKey %>_INFINITE(<%~ conditionalQueryKeyParams %>);
-
-  return useInfiniteQuery({
-    <%~ hookKeyName %>,
-    initialPageParam:  <% if (initialPageParam()) { %>
-      <%~ initialPageParam() %> 
-      <% } else { %>
-         null
-      <% } %>,
-    queryFn: <% if (getNextPage()) { %>
-      <%~ getNextPage() %> 
+  <% if (includeReactQuery) { %>
+    /**
+    <%~ routeDocs.description %>
+    * <% /* Here you can add some other JSDoc tags */ %>
+    <%~ routeDocs.lines %>
+    */
+    export const use<%~ classNameCase(functionName) %>InfiniteQuery = <
+      TData = InfiniteData<
+        RequestFnReturn<typeof <%= apiInstanceName %>.<%~ functionName %>>,
+        Parameter<typeof <%= apiInstanceName %>.<%~ functionName %>>
+      >,
+    >(
+      <%~ conditionalParamsText %>: InfiniteQueryHookParams<typeof <%= apiInstanceName %>.<%~ functionName %>,
+      <% if (isAxiosInstance) { %>
+        AxiosError<<%~ errorType %>>
       <% } else { %>
-        ({ pageParam }) => {
-          return <%= apiInstanceName %>.<%~ functionName %>({
-            ...params?.variables,
-            query: { ...params?.variables?.query, <%~ pagination.nextKey %>: pageParam, }
-          });
-        }
-      <% } %>,
-      getNextPageParam: 
-      <% if (getNextPageParam()) { %>
-        <%~ getNextPageParam() %> 
+        <%~ errorType %>
+      <% } %>
+      , TData>,
+    ) => {
+      const <%~ hookKeyName %> =  <%~ queryKeyName %>.<%~ methodKey %>_INFINITE(<%~ conditionalQueryKeyParams %>);
+      return useInfiniteQuery({
+        <%~ hookKeyName %>,
+        initialPageParam:  <% if (initialPageParam()) { %>
+          <%~ initialPageParam() %> 
+        <% } else { %>
+          null
+        <% } %>,
+        queryFn: <% if (getNextPage()) { %>
+          <%~ getNextPage() %> 
+        <% } else { %>
+          ({ pageParam }) => {
+            return <%= apiInstanceName %>.<%~ functionName %>({
+              ...params?.variables,
+              query: { ...params?.variables?.query, <%~ pagination.nextKey %>: pageParam, }
+            });
+          }
+        <% } %>,
+        getNextPageParam: 
+        <% if (getNextPageParam()) { %>
+          <%~ getNextPageParam() %> 
         <% } else { %>
           (lastPage) => {
             const <%~ pagination.nextKey %> = lastPage.cursor ?? null;
             return <%~ pagination.nextKey %>;
           }
         <% } %>,
-      ...params?.options,
-  });
-};
-
+        ...params?.options,
+      });
+    };
+  <% } %>
 <% } %>

package/templates/my/react-query-key.eta

@@ -5,7 +5,7 @@ const { getConfigByRoute, queryKeyName } = dataFromApiTemplate;
 %>
 
 /**
- * query key 에 undfined 를 포함시키지 않기 위한 함수입니다.
+ * query key 에 undefined 를 포함시키지 않기 위한 함수입니다.
  */
 const isDefined = (v: unknown) => typeof v !== "undefined"
 

package/templates/my/react-query-suspense-hook.eta

@@ -0,0 +1,175 @@
+
+<%
+  const { utils, route, config, myConfig, dataFromApiTemplate } = it;
+  const { query } = route.request;
+  const { errorType } = route.response;
+  const { getConfigByRoute,paginationTargetKeywords } = dataFromApiTemplate;
+
+  const { 
+    conditions:{
+      hasPagination,
+      includeReactQuery,
+      includeReactSuspenseQuery,
+      isQuery,
+      isMutation,
+      isOptionalVariables,
+    },
+    data: {
+      rawWrapperArgs,
+      wrapperArgs,
+      queryKeyName,
+      functionName,
+      apiInstanceName,
+      apiClassName,
+      hookVariant,
+      key,
+      methodKey,
+      pagination
+    },
+    utils: {
+      upperSnakeCase,
+      removeModuleName,
+      argToTmpl,
+    }
+  } = getConfigByRoute(route);
+
+  const { _, classNameCase } = utils;
+
+  const conditionalParamsText = isOptionalVariables ? "params?" : "params"
+  const conditionCallWithVariabels = isQuery ? `(${conditionalParamsText}.variables)` : "";
+  const conditionParamQueryKey = isQuery ? `,${conditionalParamsText}.variables` : "";
+  const conditionWrapFunc =  isQuery ? "() =>" : "";
+  const conditionalQueryKeyParams =  isQuery ? `${conditionalParamsText}.variables` : "";
+  const conditionalFn =  isQuery ? "queryFn" : "mutationFn";
+
+  const routeDocs = includeFile("@base/route-docs", { config, route, utils });
+  const lowerhookVariant =  _.lowerCase(hookVariant)
+  const hookKeyName = `${lowerhookVariant}Key`;
+
+  const isAxiosInstance = myConfig.httpClientType === 'axios'
+  const fetchErrorType = `{ error: ${errorType} }`
+
+  const initialPageParam = () => {
+    if(typeof pagination.initialPageParam === "string") return pagination.initialPageParam;
+    if(typeof pagination.initialPageParam === "function") return pagination.initialPageParam({ apiInstanceName, functionName, pagination})
+  }
+
+  const getNextPage = () => {
+    if(typeof pagination.getNextPage === "string") return pagination.getNextPage;
+    if(typeof pagination.getNextPage === "function") return pagination.getNextPage({ apiInstanceName, functionName, pagination})
+  }
+
+  const getNextPageParam = () => {
+    if(typeof pagination.getNextPageParam === "string") return pagination.getNextPageParam;
+    if(typeof pagination.getNextPageParam === "function") return pagination.getNextPageParam({ apiInstanceName, functionName, pagination})
+  }
+ %>
+
+<% if (isQuery) { %>
+  <% if (includeReactSuspenseQuery) { %>
+    /**
+      <%~ routeDocs.description %>
+
+      * <% /* Here you can add some other JSDoc tags */ %>
+
+      <%~ routeDocs.lines %>
+    */
+
+    export const use<%~ classNameCase(functionName) %>SuspenseQuery = <
+      TData = RequestFnReturn<typeof <%= apiInstanceName %>.<%~ functionName %>>,
+    >(
+      <%~ conditionalParamsText %>: SuspenseQueryHookParams<typeof <%= apiInstanceName %>.<%~ functionName %>,
+      <% if (isAxiosInstance) { %>
+        AxiosError<<%~ errorType %>>
+      <% } else { %>
+        <%~ fetchErrorType %>
+      <% } %>
+      , TData>,
+    ) => {
+      const <%~ hookKeyName %> = <%~ queryKeyName %>.<%~ methodKey %>(<%~ `${conditionalParamsText}.variables` %>);
+      return useSuspenseQuery({
+        <%~ hookKeyName %>,
+        queryFn: () => <%= apiInstanceName %>.<%~ functionName %>(<%~ `${conditionalParamsText}.variables` %>),
+        ...params?.options,
+      });
+    };
+
+
+  /**
+     * @name <%~ _.camelCase(functionName) %>QueryOptions
+     * @description 이 옵션은 Suspense 기반의 병렬 데이터 쿼리를 위한 설정입니다.
+     * `useSuspenseQueries`를 사용하여 여러 쿼리를 병렬로 처리할 때 활용하세요.
+  */
+  
+  export const <%~ _.camelCase(functionName) %>SuspenseQueryOptions = <
+    TData = RequestFnReturn<typeof <%= apiInstanceName %>.<%~ functionName %>>,
+  >(
+    <%~ conditionalParamsText %>: SuspenseQueryHookParams<typeof <%= apiInstanceName %>.<%~ functionName %>,
+    <% if (isAxiosInstance) { %>
+       unknown
+    <% } else { %>
+      <%~ fetchErrorType %>
+    <% } %>
+    , TData>,
+  ) => {
+    const queryKey = <%~ queryKeyName %>.<%~ methodKey %>(<%~ `${conditionalParamsText}.variables` %>);
+    return {
+      queryKey,
+      queryFn: () => <%= apiInstanceName %>.<%~ functionName %>(<%~ `${conditionalParamsText}.variables` %>),
+      ...params?.options,
+    };
+  };
+  <% } %>
+
+  <% if (isQuery && hasPagination) { %>
+    /**
+    <%~ routeDocs.description %>
+    * <% /* Here you can add some other JSDoc tags */ %>
+    <%~ routeDocs.lines %>
+    */
+    export const use<%~ classNameCase(functionName) %>InfiniteSuspenseQuery = <
+      TData = InfiniteData<
+        RequestFnReturn<typeof <%= apiInstanceName %>.<%~ functionName %>>,
+        Parameter<typeof <%= apiInstanceName %>.<%~ functionName %>>
+      >,
+    >(
+      <%~ conditionalParamsText %>: SuspenseInfiniteQueryHookParams<typeof <%= apiInstanceName %>.<%~ functionName %>,
+      <% if (isAxiosInstance) { %>
+        AxiosError<<%~ errorType %>>
+      <% } else { %>
+        <%~ errorType %>
+      <% } %>
+      , TData>,
+    ) => {
+      const <%~ hookKeyName %> =  <%~ queryKeyName %>.<%~ methodKey %>_INFINITE(<%~ conditionalQueryKeyParams %>);
+      return useSuspenseInfiniteQuery({
+        <%~ hookKeyName %>,
+        initialPageParam:  <% if (initialPageParam()) { %>
+          <%~ initialPageParam() %> 
+        <% } else { %>
+          null
+        <% } %>,
+        queryFn: <% if (getNextPage()) { %>
+          <%~ getNextPage() %> 
+        <% } else { %>
+          ({ pageParam }) => {
+            return <%= apiInstanceName %>.<%~ functionName %>({
+              ...params?.variables,
+              query: { ...params?.variables?.query, <%~ pagination.nextKey %>: pageParam, }
+            });
+          }
+        <% } %>,
+        getNextPageParam: 
+        <% if (getNextPageParam()) { %>
+          <%~ getNextPageParam() %> 
+        <% } else { %>
+          (lastPage) => {
+            const <%~ pagination.nextKey %> = lastPage.cursor ?? null;
+            return <%~ pagination.nextKey %>;
+          }
+        <% } %>,
+        ...params?.options,
+      });
+    };
+  <% } %>
+<% } %>

package/templates/my/react-query-type.eta

@@ -8,6 +8,8 @@ import {
   UseInfiniteQueryOptions,
   UseMutationOptions,
   UseQueryOptions,
+  UseSuspenseQueryOptions,
+  UseSuspenseInfiniteQueryOptions,
 } from '@tanstack/react-query';
 
 
@@ -59,6 +61,34 @@ export type MutationHookParams<
   >;
 };
 
+export type SuspenseQueryHookParams<
+  T extends CustomRequestFn,
+  Error = <%~ errorType %>,
+  TData = RequestFnReturn<T>,
+  OriginData = RequestFnReturn<T>,
+  Variables = Parameter<T>,
+> = {
+  options?: Omit<
+    UseSuspenseQueryOptions<OriginData, Error, TData>,
+    'queryKey' | 'queryFn'
+  >;
+} & OptionalVariables<Variables>;
+
+export type SuspenseInfiniteQueryHookParams<
+  T extends CustomRequestFn,
+  Error = <%~ errorType %>,
+  TData = RequestFnReturn<T>,
+  OriginData = RequestFnReturn<T>,
+  Variables = Parameter<T>,
+> = {
+  options?: Partial<
+    Omit<
+      UseSuspenseInfiniteQueryOptions<OriginData, Error, TData, OriginData, any, any>,
+      'queryKey' | 'queryFn'
+    >
+  >;
+} & OptionalVariables<Variables>;
+
 export type OptionalVariables<T> = undefined extends T
   ? { variables?: T }
   : { variables: T };