orval icon indicating copy to clipboard operation
orval copied to clipboard

Does not recognize hooks in mutators

Open BartoGabriel opened this issue 2 years ago • 1 comments

As of version 6.9.5 (with the previous ones it works fine), it is not correctly recognizing the hooks.

If in the file https://github.com/anymaniax/orval/blob/master/samples/react-query/hook-mutator/use-custom-instance.ts I modify and add the line (const queryClient = useQueryClient();):

import Axios, { AxiosRequestConfig } from 'axios';
import { useQueryClient } from 'react-query';

export const AXIOS_INSTANCE = Axios.create({ baseURL: '' });

export const useCustomInstance = <T>(): ((
  config: AxiosRequestConfig,
) => Promise<T>) => {
  const queryClient = useQueryClient();

  return (config: AxiosRequestConfig) => {
    const source = Axios.CancelToken.source();
    const promise = AXIOS_INSTANCE({
      ...config,
      cancelToken: source.token,
    }).then(({ data }) => data);

    // @ts-ignore
    promise.cancel = () => {
      source.cancel('Query was cancelled by React Query');
    };

    return promise;
  };
};

export default useCustomInstance;

The generator does not recognize it as a hook.

Version 6.9.5

image

Previus version:

image

BartoGabriel avatar Aug 05 '22 19:08 BartoGabriel

Sorry for that should be fixed with 6.9.6

anymaniax avatar Aug 05 '22 20:08 anymaniax

@anymaniax still the case with 6.9.6.

Here i have base useCustomInstance

import Axios, { AxiosInstance, AxiosRequestConfig } from 'axios'

import { useCredentials } from '../store/useCredentials'

export const useCustomInstance = <T>(
  AXIOS_INSTANCE: AxiosInstance
): ((config: AxiosRequestConfig) => Promise<T>) => {
  const [credentials] = useCredentials()
  return (config: AxiosRequestConfig) => {
    const source = Axios.CancelToken.source()
    const promise = AXIOS_INSTANCE({
      ...config,
      cancelToken: source.token,
      headers: {
        Authorization: `Bearer ${credentials}`,
        ...config.headers
      }
    })
      .then(({ data }) => data)
      .catch((err) => {
        if (err.response.status !== 401 && err.response.status !== 403) {
          // todo error
        }
        return Promise.reject(err)
      })

    // @ts-ignore
    promise.cancel = () => {
      source.cancel('Query was cancelled by React Query')
    }

    return promise
  }
}

export default useCustomInstance

And then creating a wrapper useCustomInstanceAuth over it

import Axios, { AxiosRequestConfig } from 'axios'
import useCustomInstance from './use-custom-instance'

export const AXIOS_INSTANCE = Axios.create({
  baseURL: process.env.NODE_ENV === 'development' ? '/auth/api' : '/auth'
})

export const useCustomInstanceAuth = <T>(): ((config: AxiosRequestConfig) => Promise<T>) => {
  return useCustomInstance(AXIOS_INSTANCE)
}

export default useCustomInstanceAuth

Using just plane useCustomInstance results in correct hook generation. But using useCustomInstanceAuth results in problem that was explained above.

Interesting, though, this pattern worked on 6.9.0

nctay avatar Aug 23 '22 17:08 nctay