fix(query): enabled reactivity fix (new) (#1080)

* fix: move 943 changes into new master

* fix: address https://github.com/anymaniax/orval/pull/944/files#r1347320242

* feat: tests

* fix: oops

Author: Maxim-Mazurok

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "cSpell.words": ["listitem", "Petstore", "tanstack"]
+}

packages/query/src/index.ts

@@ -231,7 +231,10 @@ const VUE_QUERY_DEPENDENCIES_V3: GeneratorDependency[] = [
     dependency: 'vue-query/types',
   },
   {
-    exports: [{ name: 'unref', values: true }],
+    exports: [
+      { name: 'unref', values: true },
+      { name: 'computed', values: true },
+    ],
     dependency: 'vue',
   },
   {
@@ -258,7 +261,10 @@ const VUE_QUERY_DEPENDENCIES: GeneratorDependency[] = [
     dependency: '@tanstack/vue-query',
   },
   {
-    exports: [{ name: 'unref', values: true }],
+    exports: [
+      { name: 'unref', values: true },
+      { name: 'computed', values: true },
+    ],
     dependency: 'vue',
   },
   {
@@ -506,10 +512,12 @@ const generateQueryOptions = ({
   params,
   options,
   type,
+  outputClient,
 }: {
   params: GetterParams;
   options?: object | boolean;
   type: QueryType;
+  outputClient: OutputClient | OutputClientFunc;
 }) => {
   if (options === false) {
     return '';
@@ -537,7 +545,11 @@ const generateQueryOptions = ({
 
   return `${
     !isObject(options) || !options.hasOwnProperty('enabled')
-      ? `enabled: !!(${params.map(({ name }) => name).join(' && ')}),`
+      ? isVue(outputClient)
+        ? `enabled: computed(() => !!(${params
+            .map(({ name }) => `unref(${name})`)
+            .join(' && ')})),`
+        : `enabled: !!(${params.map(({ name }) => name).join(' && ')}),`
       : ''
   }${queryConfig} ...queryOptions`;
 };
@@ -931,6 +943,7 @@ const generateQueryImplementation = ({
     params,
     options,
     type,
+    outputClient,
   });
 
   const queryOptionsFnName = camel(

samples/vue-query/src/api/endpoints/petstoreFromFileSpecWithTransformer.ts

@@ -16,7 +16,7 @@ import type {
   UseQueryReturnType,
 } from '@tanstack/vue-query';
 import type { MaybeRef } from '@tanstack/vue-query/build/lib/types';
-import { unref } from 'vue';
+import { computed, unref } from 'vue';
 import type {
   CreatePetsBody,
   Error,
@@ -83,7 +83,7 @@ export const getListPetsInfiniteQueryOptions = <
   return {
     queryKey,
     queryFn,
-    enabled: !!version,
+    enabled: computed(() => !!unref(version)),
     ...queryOptions,
   } as UseInfiniteQueryOptions<
     Awaited<ReturnType<typeof listPets>>,
@@ -155,7 +155,7 @@ export const getListPetsQueryOptions = <
   return {
     queryKey,
     queryFn,
-    enabled: !!version,
+    enabled: computed(() => !!unref(version)),
     ...queryOptions,
   } as UseQueryOptions<Awaited<ReturnType<typeof listPets>>, TError, TData>;
 };
@@ -313,7 +313,7 @@ export const getShowPetByIdInfiniteQueryOptions = <
   return {
     queryKey,
     queryFn,
-    enabled: !!(version && petId),
+    enabled: computed(() => !!(unref(version) && unref(petId))),
     ...queryOptions,
   } as UseInfiniteQueryOptions<
     Awaited<ReturnType<typeof showPetById>>,
@@ -385,7 +385,7 @@ export const getShowPetByIdQueryOptions = <
   return {
     queryKey,
     queryFn,
-    enabled: !!(version && petId),
+    enabled: computed(() => !!(unref(version) && unref(petId))),
     ...queryOptions,
   } as UseQueryOptions<Awaited<ReturnType<typeof showPetById>>, TError, TData>;
 };

samples/vue-query/src/components/pet.vue

@@ -7,15 +7,11 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, unref } from 'vue';
+import { computed, unref } from 'vue';
 import { useShowPetById } from '../api/endpoints/petstoreFromFileSpecWithTransformer';
 
 const props = defineProps<{ petId: string }>();
-const overridePetId = ref<string | undefined>();
-setTimeout(() => {
-  overridePetId.value = '123';
-}, 100);
-const petId = computed(() => overridePetId.value || props.petId);
+const petId = computed(() => props.petId);
 const petQuery = useShowPetById(petId);
 const pet = computed(() => unref(petQuery?.data));
 </script>

samples/vue-query/src/components/pet.spec.ts samples/vue-query/src/components/tests/path-parameter-reactivity-pet.spec.ts

@@ -2,8 +2,8 @@ import { VueQueryPlugin } from '@tanstack/vue-query';
 import { render, screen, waitFor } from '@testing-library/vue';
 import { http } from 'msw';
 import { describe, expect, it } from 'vitest';
-import { server } from '../mocks/server';
-import Pet from './pet.vue';
+import { server } from '../../mocks/server';
+import Pet from './path-parameter-reactivity-pet.vue';
 
 describe('Path parameters reactivity', () => {
   it('works', async () => {

samples/vue-query/src/components/tests/path-parameter-reactivity-pet.vue

@@ -0,0 +1,21 @@
+<template>
+  <div v-if="pet && petId" :key="pet.id">
+    {{ petId }}
+    {{ pet }}
+    <span>{{ pet.name }}</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, unref } from 'vue';
+import { useShowPetById } from '../../api/endpoints/petstoreFromFileSpecWithTransformer';
+
+const props = defineProps<{ petId: string }>();
+const overridePetId = ref<string | undefined>();
+setTimeout(() => {
+  overridePetId.value = '123';
+}, 100);
+const petId = computed(() => overridePetId.value || props.petId);
+const petQuery = useShowPetById(petId);
+const pet = computed(() => unref(petQuery?.data));
+</script>

samples/vue-query/src/components/tests/query-enabled-reactivity-pet-id.spec.ts

@@ -0,0 +1,31 @@
+import { VueQueryPlugin } from '@tanstack/vue-query';
+import { render, waitFor } from '@testing-library/vue';
+import { describe, expect, it, vi } from 'vitest';
+import * as customInstanceModule from '../../api/mutator/custom-instance';
+import Pet from './query-enabled-reactivity-pet-id.vue';
+
+describe('Query `enabled` reactivity', () => {
+  it('works', async () => {
+    // this test is to ensure that we use unref() for `enabled`, like so: `enabled: computed(() => !!unref(petId))`
+
+    const spy = vi.spyOn(customInstanceModule, 'customInstance');
+
+    render(Pet, {
+      global: {
+        plugins: [VueQueryPlugin],
+      },
+    });
+
+    // make sure the query is disabled at first, because `petId` is falsy (empty string)
+    expect(spy).not.toHaveBeenCalled();
+
+    // after the timeout inside of component, `overridePetId` is set to `123` and the query is enabled
+    await waitFor(() => {
+      expect(spy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          url: '/v1/pets/123',
+        }),
+      );
+    });
+  });
+});

samples/vue-query/src/components/tests/query-enabled-reactivity-pet-id.vue

@@ -0,0 +1,20 @@
+<template>
+  <div v-if="pet && petId" :key="pet.id">
+    {{ petId }}
+    {{ pet }}
+    <span>{{ pet.name }}</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, unref } from 'vue';
+import { useShowPetById } from '../../api/endpoints/petstoreFromFileSpecWithTransformer';
+
+const overridePetId = ref<string | undefined>();
+setTimeout(() => {
+  overridePetId.value = '123';
+}, 100);
+const petId = computed(() => overridePetId.value ?? '');
+const petQuery = useShowPetById(petId);
+const pet = computed(() => unref(petQuery?.data));
+</script>

samples/vue-query/src/components/tests/query-enabled-reactivity-version.spec.ts

@@ -0,0 +1,31 @@
+import { VueQueryPlugin } from '@tanstack/vue-query';
+import { render, waitFor } from '@testing-library/vue';
+import { describe, expect, it, vi } from 'vitest';
+import * as customInstanceModule from '../../api/mutator/custom-instance';
+import Pet from './query-enabled-reactivity-version.vue';
+
+describe('Query `enabled` reactivity', () => {
+  it('works for multiple arguments (version and petId)', async () => {
+    // this test is to ensure we don't use `unref(version && petId)` which is not correct, see https://github.com/anymaniax/orval/pull/944/files#r1347320242
+
+    const spy = vi.spyOn(customInstanceModule, 'customInstance');
+
+    render(Pet, {
+      global: {
+        plugins: [VueQueryPlugin],
+      },
+    });
+
+    // make sure the query is disabled at first, because `petId` is falsy (empty string)
+    expect(spy).not.toHaveBeenCalled();
+
+    // after the timeout inside of component, `overridePetId` is set to `123` and the query is enabled
+    await waitFor(() => {
+      expect(spy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          url: '/v1/pets/123',
+        }),
+      );
+    });
+  });
+});

samples/vue-query/src/components/tests/query-enabled-reactivity-version.vue

@@ -0,0 +1,21 @@
+<template>
+  <div v-if="pet && petId" :key="pet.id">
+    {{ petId }}
+    {{ pet }}
+    <span>{{ pet.name }}</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, unref } from 'vue';
+import { useShowPetById } from '../../api/endpoints/petstoreFromFileSpecWithTransformer';
+
+setTimeout(() => {
+  version.value = 1;
+}, 100);
+const petId = ref('123');
+const version = ref(0);
+// @ts-expect-error // version has `number` type instead of `MaybeRef<number>` because of its default value of 1, still version is being trated like ref, so it works. This probably should be addressed separately
+const petQuery = useShowPetById(petId, version);
+const pet = computed(() => unref(petQuery?.data));
+</script>