From 88052eecd21e03d48740ab8d0fef608adc7ce667 Mon Sep 17 00:00:00 2001
From: Shodai Suzuki <info@soartec-lab.work>
Date: Mon, 15 Jul 2024 20:31:38 +0900
Subject: [PATCH] fix: using `unref` to http function prop when `fetch` with
 `vue` (#1518)

* fix: using `unref` to http function prop when `fetch` with `vue`

* chore: update sample app
---
 packages/query/src/client.ts                   | 14 ++++++++++++++
 packages/query/src/index.ts                    |  7 ++++++-
 .../custom-fetch/src/gen/pets/pets.ts          | 18 ++++++++++--------
 3 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/packages/query/src/client.ts b/packages/query/src/client.ts
index f6e7759e5..e7088ff15 100644
--- a/packages/query/src/client.ts
+++ b/packages/query/src/client.ts
@@ -18,10 +18,12 @@ import {
 import { generateRequestFunction as generateFetchRequestFunction } from '@orval/fetch';
 
 import {
+  isVue,
   makeRouteSafe,
   vueUnRefParams,
   vueWrapTypeWithMaybeRef,
 } from './utils';
+import exp from 'constants';
 
 export const AXIOS_DEPENDENCIES: GeneratorDependency[] = [
   {
@@ -376,3 +378,15 @@ export const getMutationRequestArgs = (
         : ''
     : '';
 };
+
+export const getHttpFunctionQueryProps = (
+  isVue: boolean,
+  httpClient: OutputHttpClient,
+  queryProperties: string,
+) => {
+  if (isVue && httpClient === OutputHttpClient.FETCH && queryProperties) {
+    return `unref(${queryProperties})`;
+  }
+
+  return queryProperties;
+};
diff --git a/packages/query/src/index.ts b/packages/query/src/index.ts
index 84bbcd589..c80611db8 100644
--- a/packages/query/src/index.ts
+++ b/packages/query/src/index.ts
@@ -47,6 +47,7 @@ import {
   getHooksOptionImplementation,
   getMutationRequestArgs,
   generateQueryRequestFunction,
+  getHttpFunctionQueryProps,
 } from './client';
 
 const REACT_DEPENDENCIES: GeneratorDependency[] = [
@@ -749,7 +750,11 @@ const generateQueryImplementation = ({
             : param.name;
         })
         .join(',')
-    : queryProperties;
+    : getHttpFunctionQueryProps(
+        isVue(outputClient),
+        httpClient,
+        queryProperties,
+      );
 
   const definedInitialDataReturnType = generateQueryReturnType({
     outputClient,
diff --git a/samples/vue-query/custom-fetch/src/gen/pets/pets.ts b/samples/vue-query/custom-fetch/src/gen/pets/pets.ts
index 332e5ff06..7eae84cfe 100644
--- a/samples/vue-query/custom-fetch/src/gen/pets/pets.ts
+++ b/samples/vue-query/custom-fetch/src/gen/pets/pets.ts
@@ -114,7 +114,7 @@ export const getListPetsQueryOptions = <
 
   const queryFn: QueryFunction<Awaited<ReturnType<typeof listPets>>> = ({
     signal,
-  }) => listPets(params, { signal, ...requestOptions });
+  }) => listPets(unref(params), { signal, ...requestOptions });
 
   return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
     Awaited<ReturnType<typeof listPets>>,
@@ -131,7 +131,8 @@ export type ListPetsQueryError = unknown;
 /**
  * @summary List all pets
  */
-export const useListPets = <
+
+export function useListPets<
   TData = Awaited<ReturnType<typeof listPets>>,
   TError = unknown,
 >(
@@ -142,7 +143,7 @@ export const useListPets = <
     >;
     request?: SecondParameter<typeof customFetch>;
   },
-): UseQueryReturnType<TData, TError> & { queryKey: QueryKey } => {
+): UseQueryReturnType<TData, TError> & { queryKey: QueryKey } {
   const queryOptions = getListPetsQueryOptions(params, options);
 
   const query = useQuery(queryOptions) as UseQueryReturnType<TData, TError> & {
@@ -152,7 +153,7 @@ export const useListPets = <
   query.queryKey = unref(queryOptions).queryKey as QueryKey;
 
   return query;
-};
+}
 
 /**
  * @summary Create a pet
@@ -360,7 +361,7 @@ export const getShowPetByIdQueryOptions = <
 
   const queryFn: QueryFunction<Awaited<ReturnType<typeof showPetById>>> = ({
     signal,
-  }) => showPetById(petId, { signal, ...requestOptions });
+  }) => showPetById(unref(petId), { signal, ...requestOptions });
 
   return {
     queryKey,
@@ -378,7 +379,8 @@ export type ShowPetByIdQueryError = Error;
 /**
  * @summary Info for a specific pet
  */
-export const useShowPetById = <
+
+export function useShowPetById<
   TData = Awaited<ReturnType<typeof showPetById>>,
   TError = Error,
 >(
@@ -389,7 +391,7 @@ export const useShowPetById = <
     >;
     request?: SecondParameter<typeof customFetch>;
   },
-): UseQueryReturnType<TData, TError> & { queryKey: QueryKey } => {
+): UseQueryReturnType<TData, TError> & { queryKey: QueryKey } {
   const queryOptions = getShowPetByIdQueryOptions(petId, options);
 
   const query = useQuery(queryOptions) as UseQueryReturnType<TData, TError> & {
@@ -399,4 +401,4 @@ export const useShowPetById = <
   query.queryKey = unref(queryOptions).queryKey as QueryKey;
 
   return query;
-};
+}