Generate clean code?

[ricardobeat]

In the homepage, this example is provided:

---

But the actual result of setting up orval with client: 'react-query' is quite different:

• the interfaces are defined in a separate file
• queryKey becomes a getter function
• extra functions like getListPetsUrl to return a single string
• formatting errors
• lots of indirection in types

Is there a way to actually generate code closer to what's advertised in that example?

The generated code for the same example, formatting preserved:

/**
 * Generated by orval v8.9.1 🍺
 * Do not edit manually.
 * Pet Store API
 * OpenAPI spec version: 1.0.0
 */
import {
  useQuery
} from '@tanstack/react-query';
import type {
  QueryFunction,
  QueryKey,
  UseQueryOptions,
  UseQueryResult
} from '@tanstack/react-query';

import type {
  Pet
} from '../model';


type AwaitedInput<T> = PromiseLike<T> | T;

      type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;




export type listPetsResponse200 = {
  data: Pet[]
  status: 200
}

export type listPetsResponseSuccess = (listPetsResponse200) & {
  headers: Headers;
};
;

export type listPetsResponse = (listPetsResponseSuccess)

export const getListPetsUrl = () => {




  return `/pets`
}

export const listPets = async ( options?: RequestInit): Promise<listPetsResponse> => {

  const res = await fetch(getListPetsUrl(),
  {
    ...options,
    method: 'GET'


  }
)


  const body = [204, 205, 304].includes(res.status) ? null : await res.text();

  const data: listPetsResponse['data'] = body ? JSON.parse(body) : {}
  return { data, status: res.status, headers: res.headers } as listPetsResponse
}





export const getListPetsQueryKey = () => {
    return [
    `/pets`
    ] as const;
    }


export const getListPetsQueryOptions = <TData = Awaited<ReturnType<typeof listPets>>, TError = unknown>( options?: { query?:UseQueryOptions<Awaited<ReturnType<typeof listPets>>, TError, TData>, fetch?: RequestInit}
) => {

const {query: queryOptions, fetch: fetchOptions} = options ?? {};

  const queryKey =  queryOptions?.queryKey ?? getListPetsQueryKey();



    const queryFn: QueryFunction<Awaited<ReturnType<typeof listPets>>> = ({ signal }) => listPets({ signal, ...fetchOptions });





   return  { queryKey, queryFn, ...queryOptions} as UseQueryOptions<Awaited<ReturnType<typeof listPets>>, TError, TData> & { queryKey: QueryKey }
}

export type ListPetsQueryResult = NonNullable<Awaited<ReturnType<typeof listPets>>>
export type ListPetsQueryError = unknown



export function useListPets<TData = Awaited<ReturnType<typeof listPets>>, TError = unknown>(
  options?: { query?:UseQueryOptions<Awaited<ReturnType<typeof listPets>>, TError, TData>, fetch?: RequestInit}

 ):  UseQueryResult<TData, TError> & { queryKey: QueryKey } {

  const queryOptions = getListPetsQueryOptions(options)

  const query = useQuery(queryOptions) as  UseQueryResult<TData, TError> & { queryKey: QueryKey };

  return { ...query, queryKey: queryOptions.queryKey };
}

[melloware]

@anymaniax @soartec-lab ? To me the above code looks like its generating properly i think its just the documentation website that is misleading?

[soartec-lab]

I think so too. The documentation is confusing.

[melloware]

@ricardobeat i formatted it for readability, Orval does NOT format code.... it generates code.... and then you choose to format it yourself based on your own projects formatting standards. See: https://orval.dev/docs/reference/configuration/output#formatter