Vue Query: It generates undefined function "useCallback"

[wiz-tajima]

What are the steps to reproduce this issue?

1. …generate on Vue3 project with config below：

import { config } from "dotenv";
import { defineConfig } from "orval";

export default () => {
  config();
  return defineConfig({
    "standard-frontend": {
      output: {
        mode: "tags",
        headers: true,
        workspace: "./openapi/client",
        target: "./endpoints",
        schemas: "./models",
        indexFiles: true,
        client: 'vue-query',
        urlEncodeParameters: true, // https://zenn.dev/hsato_workman/books/5f41b770d9221b/viewer/0bccda#urlencodeparameters
        override: {
          useDates: true,
          mutator: {
            path: "./mutator/use-custom-instance.ts",
            name: "useCustomInstance",
          },
          formData: {
            path: "./mutator/custom-form-data.ts",
            name: "customFormData",
          },
          query: {
            queryOptions: {
              path: "./openapi/client/mutator/custom-query-options.ts",
              name: "customTranQueryOptions",
            },
          },
          mock: {},
          operations: {},
        },
      },
      input: {
        target: "./openapi/openapi-docs.yml",
      },
    },
  });
};

What happens?

Orval generates code below:

export const usePostAuthLoginHook = () => {
        const postAuthLogin = useCustomInstance<void>();

        return useCallback((
    authLoginPostRequest: MaybeRef<AuthLoginPostRequest>,
 signal?: AbortSignal
) => {
        return postAuthLogin(
          {url: `/auths/login`, method: 'POST',
      headers: {'Content-Type': 'application/json', },
      data: authLoginPostRequest, signal
    },
          );
        }, [postAuthLogin])
      }

This code has critical problem: useCallback() doesn't exist on Vue.
So, this makes unavoidable error.
…

What were you expecting to happen?

Before orval version 6.29.0, it generates correct code.
Please make back.
…

Any logs, error output, etc?

…

Any other comments?

Probably, useCallback is made with setting mutator on orval.config.ts.
…

What versions are you using?

Operating System: … Linux (WSL)
Package Version: …6.29.1 ~ 7.4.1
Browser Version: N/A

[wiz-tajima]

Maybe I found code makes matter:
function generateAxiosRequestFunction on packages/query/src/client.ts row 134

if (mutator.isHook) {
      return `${
        override.query.shouldExportMutatorHooks ? 'export ' : ''
      }const use${pascal(operationName)}Hook = () => {
        const ${operationName} = ${mutator.name}<${
          response.definition.success || 'unknown'
        }>();

        return useCallback((\n    ${propsImplementation}\n ${
          isRequestOptions && mutator.hasSecondArg
            ? `options${context.output.optionsParamRequired ? '' : '?'}: SecondParameter<ReturnType<typeof ${mutator.name}>>,`
            : ''
        }${hasSignal ? 'signal?: AbortSignal\n' : ''}) => {${bodyForm}
        return ${operationName}(
          ${mutatorConfig},
          ${requestOptions});
        }, [${operationName}])
      }
    `;
    }

I think it have to have a branch for "vue or not vue", and make making output without "useCallback" when it uses vue-query.

I can solve the problem by adding an simple if branch, but would you be okay with it solving?
If it'll be okay, I'd try to make pull-request.
(I don't know Svelte, Angular and React, so I'll fix only adding pattern for vue.)

============================

問題点が分かったと思います。
packages/query/src/client.ts 134行目 、generateAxiosRequestFunction メソッド内

if (mutator.isHook) {
      return `${
        override.query.shouldExportMutatorHooks ? 'export ' : ''
      }const use${pascal(operationName)}Hook = () => {
        const ${operationName} = ${mutator.name}<${
          response.definition.success || 'unknown'
        }>();

        return useCallback((\n    ${propsImplementation}\n ${
          isRequestOptions && mutator.hasSecondArg
            ? `options${context.output.optionsParamRequired ? '' : '?'}: SecondParameter<ReturnType<typeof ${mutator.name}>>,`
            : ''
        }${hasSignal ? 'signal?: AbortSignal\n' : ''}) => {${bodyForm}
        return ${operationName}(
          ${mutatorConfig},
          ${requestOptions});
        }, [${operationName}])
      }
    `;
    }

ここに、「vue か vue でないかの分岐」をおき、vue の場合は useCallback を使わない形で出力すべきではないでしょうか。

ただ単純に if分岐を足す形の修正であれば、私でも可能かと思います。
（Svelte や Angular、React の方はあまり分からないため、あくまで vue 用の分岐を作るだけです。）
もしよければ、pull-request を出してみますが、いかがでしょうか。

[melloware]

Ahhh good debugging do you want to open a PR?

[wiz-tajima]

@melloware
Sorry to reply so late.
I'm OK. I'll open a PR in this week.