Fix Query parameters reactivity in Vue (#931)

Author: Maxim-Mazurok

.github/workflows/tests.yaml

@@ -16,6 +16,10 @@ jobs:
         os: [ubuntu-latest, windows-latest]
         node-version: [18.x]
     steps:
+      - name: Set git to use LF (instead of CRLF on Windows)
+        run: |
+          git config --global core.autocrlf false
+          git config --global core.eol lf
       - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
@@ -25,6 +29,8 @@ jobs:
         run: yarn
       - name: build
         run: yarn build
+      - name: formatting
+        run: yarn format:check
       - name: unit tests
         run: yarn test:ci
       - name: tests install

.node-version

@@ -0,0 +1 @@
+18

.nvmrc

@@ -0,0 +1 @@
+18

.prettierignore

@@ -5,3 +5,4 @@ node_modules
 
 # Build
 .next
+**/dist

.prettierrc.json

@@ -5,5 +5,6 @@
   "tabWidth": 2,
   "semi": true,
   "singleQuote": true,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "endOfLine": "lf"
 }

package.json

@@ -9,6 +9,7 @@
   "private": true,
   "scripts": {
     "format": "prettier --write .",
+    "format:check": "prettier --check .",
     "format:staged": "pretty-quick --staged",
     "prerelease": "yarn build && cd ./tests && yarn generate && yarn build",
     "release": "dotenv release-it",
@@ -18,7 +19,8 @@
     "update-samples": "zx ./scripts/update-samples.mjs",
     "build": "turbo run build",
     "test": "turbo run test",
-    "test:ci": "turbo run test -- --run",
+    "test:ci": "yarn test -- -- --run && yarn test:vue-query --run",
+    "test:vue-query": "cd ./samples/vue-query && yarn && yarn test",
     "lint": "turbo run lint",
     "dev": "turbo run dev"
   },

packages/core/src/generators/options.ts

@@ -37,6 +37,7 @@ export const generateAxiosOptions = ({
   headers,
   requestOptions,
   hasSignal,
+  isVue,
   paramsSerializer,
   paramsSerializerOptions,
 }: {
@@ -46,6 +47,7 @@ export const generateAxiosOptions = ({
   headers?: GeneratorSchema;
   requestOptions?: object | boolean;
   hasSignal: boolean;
+  isVue: boolean;
   paramsSerializer?: GeneratorMutator;
   paramsSerializerOptions?: ParamsSerializerOptions;
 }) => {
@@ -96,7 +98,11 @@ export const generateAxiosOptions = ({
     value += '\n    ...options,';
 
     if (queryParams) {
-      value += '\n        params: {...params, ...options?.params},';
+      if (isVue) {
+        value += '\n        params: {...unref(params), ...options?.params},';
+      } else {
+        value += '\n        params: {...params, ...options?.params},';
+      }
     }
 
     if (headers) {
@@ -130,6 +136,7 @@ export const generateOptions = ({
   isAngular,
   isExactOptionalPropertyTypes,
   hasSignal,
+  isVue,
   paramsSerializer,
   paramsSerializerOptions,
 }: {
@@ -145,6 +152,7 @@ export const generateOptions = ({
   isAngular?: boolean;
   isExactOptionalPropertyTypes: boolean;
   hasSignal: boolean;
+  isVue?: boolean;
   paramsSerializer?: GeneratorMutator;
   paramsSerializerOptions?: ParamsSerializerOptions;
 }) => {
@@ -160,6 +168,7 @@ export const generateOptions = ({
     requestOptions,
     isExactOptionalPropertyTypes,
     hasSignal,
+    isVue: isVue ?? false,
     paramsSerializer,
     paramsSerializerOptions,
   });
@@ -207,6 +216,7 @@ export const generateBodyMutatorConfig = (
 
 export const generateQueryParamsAxiosConfig = (
   response: GetterResponse,
+  isVue: boolean,
   queryParams?: GetterQueryParam,
 ) => {
   if (!queryParams && !response.isBlob) {
@@ -216,7 +226,11 @@ export const generateQueryParamsAxiosConfig = (
   let value = '';
 
   if (queryParams) {
-    value += ',\n        params';
+    if (isVue) {
+      value += ',\n        params: unref(params)';
+    } else {
+      value += ',\n        params';
+    }
   }
 
   if (response.isBlob) {
@@ -238,6 +252,7 @@ export const generateMutatorConfig = ({
   isBodyVerb,
   hasSignal,
   isExactOptionalPropertyTypes,
+  isVue,
 }: {
   route: string;
   body: GetterBody;
@@ -250,13 +265,15 @@ export const generateMutatorConfig = ({
   isBodyVerb: boolean;
   hasSignal: boolean;
   isExactOptionalPropertyTypes: boolean;
+  isVue?: boolean;
 }) => {
   const bodyOptions = isBodyVerb
     ? generateBodyMutatorConfig(body, isFormData, isFormUrlEncoded)
     : '';
 
   const queryParamsOptions = generateQueryParamsAxiosConfig(
     response,
+    isVue ?? false,
     queryParams,
   );
 

packages/core/src/getters/discriminators.ts

@@ -1,7 +1,7 @@
 import { SchemasObject } from 'openapi3-ts';
 import { ContextSpecs } from '../types';
 import { getRefInfo } from './ref';
-import { pascal } from "../utils";
+import { pascal } from '../utils';
 
 export const resolveDiscriminators = (
   schemas: SchemasObject,
@@ -19,7 +19,7 @@ export const resolveDiscriminators = (
         try {
           const { originalName } = getRefInfo(mappingValue, context);
           // name from getRefInfo may contain a suffix, which we don't want
-          const name = pascal(originalName)
+          const name = pascal(originalName);
           subTypeSchema = transformedSchemas[name];
         } catch (e) {
           subTypeSchema = transformedSchemas[mappingValue];

packages/core/src/getters/object.ts

@@ -181,7 +181,9 @@ export const getObject = ({
   }
 
   return {
-    value: (item.type === 'object' ? '{ [key: string]: any }' : 'unknown') + nullable,
+    value:
+      (item.type === 'object' ? '{ [key: string]: any }' : 'unknown') +
+      nullable,
     imports: [],
     schemas: [],
     isEnum: false,

packages/core/src/writers/schemas.ts

@@ -110,7 +110,7 @@ export const writeSchemas = async ({
   if (indexFiles) {
     const schemaFilePath = upath.join(schemaPath, '/index.ts');
     await fs.ensureFile(schemaFilePath);
-  
+
     // Ensure separate files are used for parallel schema writing.
     // Throw an exception, which list all duplicates, before attempting
     // multiple writes on the same file.
@@ -134,7 +134,7 @@ export const writeSchemas = async ({
             .join('\n'),
       );
     }
-    
+
     try {
       const data = await fs.readFile(schemaFilePath);