What are the steps to reproduce this issue?

1. property readonly in open api
2. check corresponding model

What happens?

property not readonly

What were you expecting to happen?

property to be readonly

What are the steps to reproduce this issue?

1. build a project with the following config:

module.exports = {
  petstore: {
    output: {
      mode: 'split',
      target: './api/petstore/index.ts',
      schemas: './api/petstore/models',
	  client: 'react-query'
    },
    input: {
      target: './petstore.yaml',
    },
  }
}

What happens?

in the api/petstore/index.ts the models are getting imported from models

What were you expecting to happen?

The import path should be ./models

What versions are you using?

Package Version: 5.1.2

add a command to target a specific project

I think it would be a good idea to display the package version number of the script when we run it in the console

Hello @anymaniax,
I am interested in using orval and also gave it a shot. Unfortunately, it did not work even for a single time. I wonder if I am unsure about using Orval at all.

My spec is available at https://github.com/hhimanshu/rapid-front-end-development/tree/openapi3/src/openapi for the context.

I will fill the sections next

What are the steps to reproduce this issue?

I run the following command

➜  openapi git:(openapi3) npx orval --input spec.yaml --output business.ts
🍻 Start orval v4.2.1 - A swagger client generator for typescript
Oups... 🍻

This does not give me any indication on what went wrong, no debug logs either

What happens?

It fails it Oups. I also tried with a specific version, not sure if that is stable, but that doesn't works either

➜  openapi git:(openapi3) npx [email protected] --input spec.yaml --output business.ts
Need to install the following packages:
  [email protected]
Ok to proceed? (y) y
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
🍻 Start orval v5.2.0 - A swagger client generator for typescript
/Users/hhimanshu/.npm/_npx/08ae492f93714e2b/node_modules/orval/dist/chunk-4LSQHVTZ.js:11
    }`});return[{method:"POST",hostname:"api.github.com",path:"/graphql",headers:{"content-type":"application/json","user-agent":"orval-importer",authorization:`bearer ${e}`,"Content-Length":s.length}},s]},ys=async e=>{if(await _fsextra.pathExists.call(void 0, e))return _fsextra.readFile.call(void 0, e,"utf-8");{let t=await _inquirer2.default.prompt([{type:"input",name:"githubToken",message:"Please provide a GitHub token with `repo` rules checked (https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/)"},{type:"confirm",name:"saveToken",message:"Would you like to store your token for the next time? (stored in your node_modules)"}]);return t.saveToken&&await _fsextra.outputFile.call(void 0, e,t.githubToken),t.githubToken}},ds=async e=>{var m;let t=_upath.join.call(void 0, __dirname,".githubToken"),r=await ys(t),[n]=e.split("github.com/").slice(-1),[o,s,,a,...i]=n.split("/"),p=i.join("/");try{let{body:c}=await Zt(...gs({accessToken:r,repo:s,owner:o,branch:a,path:p}));return(m=c.data)==null?void 0:m.repository.object.text}catch(c){throw c.body?(c.body.message==="Bad credentials"&&(await _inquirer2.default.prompt([{type:"confirm",name:"removeToken",message:"Your token doesn't have the correct permissions, should we remove it?"}])).removeToken&&await _fsextra.unlink.call(void 0, t),c.body.message||`Oups... \u{1F37B}. ${c}`):`Oups... \u{1F37B}. ${c}`}},tr={order:199,canRead(e){return e.url.includes("github.com")},read(e){return ds(e.url)}};var Ee=e=>e&&typeof e=="object";function V(e,t){return!Ee(t)||!Ee(e)?e:Object.entries(t).reduce((r,[n,o])=>{let s=r[n];return Array.isArray(s)&&Array.isArray(o)?u(u({},r),{[n]:[...s,...o]}):Ee(s)&&Ee(o)?u(u({},r),{[n]:V(s,o)}):u(u({},r),{[n]:o})},e)}var pe=e=>{try{return new URL(e),!0}catch(t){return!1}};var $=(e,t,r)=>e.reduce(async(n,...o)=>t(await n,...o),Promise.resolve(r));var _swagger2openapi = require('swagger2openapi'); var _swagger2openapi2 = _interopRequireDefault(_swagger2openapi);var rr=(e,t={})=>{try{return new Promise((r,n)=>{!e.openapi||!e.openapi.startsWith("3.0")?_swagger2openapi2.default.convertObj(e,t,(o,{openapi:s})=>{o?n(o):r(s)}):r(e)})}catch(r){throw`Oups... \u{1F37B}. Parsing Error: ${r}`}};var me=async(e,t=process.cwd())=>{if(!e)return e;try{if(M(e)){let r=_upath.resolve.call(void 0, t,e),n=await Promise.resolve().then(()=>Ce(require(r)));return R(n)&&n.default?n.default:n}return Promise.resolve(e)}catch(r){throw`Oups... \u{1F37B}. Path: ${e} => ${r}`}};var _lodashget = require('lodash.get'); var _lodashget2 = _interopRequireDefault(_lodashget);var N=e=>{if(!(Lt(e)||Ht(e)))return M(e)?`'${e}'`:Ut(e)||ae(e)||ie(e)?`${e}`:Array.isArray(e)?`[${e.map(N).join(", ")}]`:Object.entries(e).reduce((t,[r,n],o,s)=>{let a=N(n);return s.length===1?`{ ${r}: ${a}, }`:o?s.length-1===o?t+`${r}: ${a}, }`:t+`${r}: ${a}, `:`{ ${r}: ${a}, `},"")},k=(e,t)=>{let{whitespace:r="",underscore:n=""}=t||{},o=e.replace(/[^\w\s]/g,"");return r!==!0&&(o=o.replace(/[\s]/g,r)),n!==!0&&(o=o.replace(/['_']/g,n)),o},q=(e,t)=>e.length?(t?e.map(n=>_lodashget2.default.call(void 0, n,t)):e).join(`,


TypeError: Cannot destructure property 'openapi' of 'undefined' as it is undefined.
    at /Users/hhimanshu/.npm/_npx/08ae492f93714e2b/node_modules/orval/dist/chunk-4LSQHVTZ.js:11:2132
    at /Users/hhimanshu/.npm/_npx/08ae492f93714e2b/node_modules/call-me-maybe/index.js:13:28
    at processTicksAndRejections (internal/process/task_queues.js:75:11)

What were you expecting to happen?

I expected for API and models to be generated for TypeScript and React-Query

Any logs, error output, etc?

I added all of what I saw above, and I hope that helps.

Any other comments?

Do you see any issues in my approach? Does Orval only work if the $ref is in the same file? How can I resolve this issue my friend?
Thank you

What versions are you using?

Operating System: Mac 10.15.7
Package Version:

➜  openapi git:(openapi3) npm -v
7.5.6
➜  openapi git:(openapi3) node -v
v14.16.0

Browser Version: N/A since I am not doing anything related to browser, yet.

• check if the reference always exist
• no-existing type in generated code when declaring a schema type object without other details
  #19 #21

In writers/SingleMode.ts there's a part producing incorrect relative schemas path
Code here https://github.com/anymaniax/orval/blob/master/src/core/writers/singleMode.ts#L43

export const writeSingleMode = (...) {

// (1)
 const { path, dirname } = getFileInfo(
     join(workspace, targetedPath),
    camel(info.title),
  );

// (2)
const schemasPath = relative(dirname || '', output.schemas); // ←—— This line

What are the steps to reproduce this issue?

1. setup output with relative parts:

mode    : 'single',
target  : `../../openapi/orval-build/endpoints/openapi.ts`,
schemas : `../../openapi/orval-build/model`,

2. run build

What happens?

endpoints/openapi.ts output file will get incorrect import path:

from '..\..\..\..\..\openapi\orval-build\model'

What were you expecting to happen?

but expected to get from '../model';

Any other comments?

So we are getting 2 problems:

1. inverted slashes (OS separators could be straight or back slashes, but imports must not be backslash).
2. incorrect relative part.

The solution.

1. Slashes direction could be easily solved by adding .replace(/\\/g, '/');
2. When using relative(dirname || '', output.schemas);, dirname is already absolute path, processed with path.join ((1)). But output.schemas is still dirty input from config file (2). So the result is incorrect.
   Fix could look this way:

relative(dirname, join(workspace, output.schemas)).replace(/\\/g, '/');

What versions are you using?

Operating System: Win10
Node 14

I would like to add more examples for each client and with more complex config

I want to track progress of my POST request. With Axios I would usually pass an onUploadProgress parameter to axios.post(...). With orval I would want to do this from the function/hook it generates. Is this currently possible? This seems to be a more general issue with other parameters of AxiosRequestConfig not being exposed to the user of the orval.

What versions are you using?

**Package Version: 5.0.0-alpha.9
**Browser Version: Firefox 87

What are the steps to reproduce this issue?

1. Run orval 4.2.0 on our OpenAPI JSON with any basic config
2. View type errors in editor

What happens?

A few types are not generated in the models: DatasetUpload, Labels, DatasetAttach.
These are all located in the components > parameters > requestBodies section of the OpenAPI and then are referenced in paths $ref: #/components/requestBodies/datasetUpload

What were you expecting to happen?

These types to be generated from the schema like other sections of components

Any logs, error output, etc?

None

Any other comments?

Something about our spec that orval doesn't like, such as dupe key names betweens sections?

What versions are you using?

**Operating System: Ubuntu 20.04 …
**Package Version: 4.2.0 …
**Browser Version:

Would be could to add tests to avoid regression or bug. (test generated code or business logic)

First, thanks for the great work on this library,
I am opening this issue to ask if we can only generate react query hooks for only specific operation ids,

for example, we have hundreds of operations on our API but only we want a small part of our API in the mobile app?
if this something you find useful to be added, i would be happy to help

Ex: Import undefined file for schema

throw error or log in console

Node's path.join(...) generates platform-specific path separators, so it's not safe to use in generateImports(...).

Generated imports in Windows:

import { ... } from '..\model';
import { customInstance } from '..\mutator\custom-instance';

Tested in 5.0.0-alpha.5

What are the steps to reproduce this issue?

1. an input with enum definition

{
...
"status": {
          "title": "Status",
          "type": "string",
          "enum": ["Draft", "Submitted", "Delegator Approval"],
          "default": "Draft"
        },
...

What happens?

syntax error

/*
 * Generated by orval v5.1.3 🍺
 * Do not edit manually.
 * API Documentation
 * OpenAPI spec version: v1
 */

export type XXXStatus =
  | 'Draft'
  | 'Submitted'
  | 'Delegator Approval';

export const XXXStatus = {
  Draft: 'Draft' as XXXStatus,
  Submitted: 'Submitted' as XXXStatus,
  Delegator Approval: 'Delegator Approval' as XXXStatus,
};

What were you expecting to happen?

/*
 * Generated by orval v5.1.3 🍺
 * Do not edit manually.
 * API Documentation
 * OpenAPI spec version: v1
 */

export type XXXStatus =
  | 'Draft'
  | 'Submitted'
  | 'Delegator Approval';

export const XXXStatus = {
  Draft: 'Draft' as XXXStatus,
  Submitted: 'Submitted' as XXXStatus,
  'Delegator Approval': 'Delegator Approval' as XXXStatus,
};

Any other comments?

I think you are generating this object for mocking, so maybe we don't need to generate it while mock: false

What versions are you using?

Package Version: v5.1.3

This is not an issue 😀 I am just wondering why you opted to update the 2nd argument for query hooks instead of using the 3rd argument for Axios instance config starting from the version 5.
i think the old way is easier as we use generate hooks the same way we use native react-query hook, please lets me know if I am missing something 🙏

Would be great and simplify a lot a think if we normalize and validate the orval config before everything else

What are the steps to reproduce this issue?

1. install orval@next
2. create orval.config.js with output.client set to axios
3. run orval

What happens?

Orval generates the following broken code:

ts playground

What were you expecting to happen?

Seemingly, the <Data = unknown> part cannot be parsed by typescript. Everything works perfectly fine if you remove the = unknown Though.
After searching for a while, It looks like there is really no way for having default value for generic object literal methods.
Not only the notation we use, but neither of { method: <Data = unknown>() => {} } nor { method: function<Data = unknown>() {} } works.

Solution

Multiple solutions comes to mind, but before anything, I'm failing to understand why the axios generator, unlike the others, generates the getExampleService function in the first place? Maybe it's a legacy thing we can fix while we are upgrading to v5? The problem wouldn't exist if the output was like the react-query one, only without the hooks.

But otherwise, doing the following can solve the issue:

ts playground

I'm still only somewhat familiar with the codebase, So I don't know how exactly we can split the definition and the export. But I believe the return value can easily be generated just by putting all of the function names together, separated with commas.

What versions are you using?

**Package Version:**v5.1.3

I would like to add an option to the library, so that the user can deserialize date and datetime objects (both have type string and format date and date-time, respectively) as JavaScript Date object.

I have already tested it and this change in scalar.ts seems to actually be the only change needed (to be added inside the string case statement):

      if(item.format === 'date' || item.format === 'date-time') {
        return {
          value: 'Date' + nullable,
          isEnum: false,
          type: 'string',
          imports: [],
          schemas: [],
        };
      }

This would only support ISO 8601 dates and date times (default in the OpenAPI specification) but that is what most of the people use in the REST APIs these days.

However, there will also be change needed in the Axios instance, so that dates are properly deserialized as Date objects (currently these are strings).

Would you be open for such change? Do you think we should make it optional, via dedicated field in the configuration object?

Hi, I'd like to use fetch instead of axios for the basic setup since it's lightweight. Is there a way that's possible right now?

add a mode in the config to split the types, mock, implementation into different files

What are the steps to reproduce this issue?

1. input Schema with an empty type definition
   example

{
...
    "PaymentRequestSubmit": {"type": "object", "properties": {}},
...
}

2. run oval to generate typing and client

What happens?

issue generating typing interface : missed {}

/*
 * Generated by orval v5.1.3 🍺
 * Do not edit manually.
 * API Documentation
 * OpenAPI spec version: v1
 */

// tslint:disable-next-line:no-empty-interface
export interface PaymentRequestSubmit 

What were you expecting to happen?

/*
 * Generated by orval v5.1.3 🍺
 * Do not edit manually.
 * API Documentation
 * OpenAPI spec version: v1
 */

// tslint:disable-next-line:no-empty-interface
export interface PaymentRequestSubmit {}

Any other comments?

…

What versions are you using?

Operating System: Mac os
Package Version: 5.1.3

I think it would be beneficial to add a more complete and descriptive log system

Add something to generate all files, with an improvements of string manipulation.
To avoid string += and add '/n'

When you have two times the same property in your definition the mock generated will have two times the property

What are the steps to reproduce this issue?

1. Go to the link: React Query Guides
2. Scroll down on the page
3. And the page crashes

Any logs, error output, etc?

b1542cc239bf56c8a14913c0a930efe682b5cf86.2ba98681f4df29c6d98f.module.js:formatted:1655 
TypeError: Cannot read property 'url' of null
    at 6a8c181fd0cf765182a97666adfab6794b546aa0.22d83259182eaa1973d2.module.js:1
    at Array.map (<anonymous>)
    at Re (6a8c181fd0cf765182a97666adfab6794b546aa0.22d83259182eaa1973d2.module.js:1)

What versions are you using?

Operating System: macOS 11.2.3
Browser Version: Brave Version 1.24.86 Chromium: 90.0.4430.212 (Official Build) (x86_64)

if no payload pass undefined

If you use an external function to define your mock orval doesn't resolve correctly the import

What are the steps to reproduce this issue?

1. Generate a swagger.json file with around 7000 lines
2. Run orval with config:

module.exports = {
    petstore: {
        output: {
            mode: 'tags-split',
            target: 'src/hooks/api/generated/generated.ts',
            schemas: 'src/generated/models',
            client: 'react-query',
            mock: true,
        },
        input: {
            target: './src/swagger.json',
        },
    },
};

What happens?

Commands stops with following error:

RangeError: Maximum call stack size exceeded

What were you expecting to happen?

That generated.ts is generated

Any logs, error output, etc?

Nope

Any other comments?

…

What versions are you using?

Operating System: macOs Catalina
Package Version: 4.1.0
Browser Version: Not relevant

What are the steps to reproduce this issue?

1. Generate based on a Swagger document with a parameter name such as "name-like". Example:

          {
            "name": "name-like",
            "in": "query",
            "description": "name-like",
            "required": false,
            "type": "string"
          }

What happens?

Code is generated with syntax errors. Example:

export type getAllThingsUsingGETParams = { name-like?: string; page-number?: number; page-size?: number };

What were you expecting to happen?

The code to generate without syntax errors, by removing the dashes, replacing them with underscores, or using camelCase. Example:

export type getAllThingsUsingGETParams = { name_like?: string; page_number?: number; page_size?: number };

Any logs, error output, etc?

N/A

Any other comments?

N/A

What versions are you using?

Operating System: MacOS
Package Version: 2.0.4
Browser Version: N/A

For non-cli usage purposes it would be great to have not minified version of library (as it was in v4-)

It would be nice to be able to put any url to an hosted swagger.
For example:

orval --input https://my.domain.tld/assets/swagger.json --output FETCHER.tsx

it isn't an issue. it's more a question

I tried many ways to generate a code like this:
{ enabled: !!(version && petId), ...queryConfig },

how can I configure my orval.config.js in order to generate a code like this?

I'm following this doc over here https://orval.dev/guides/react-query#how-use-other-query

I did the documentation really quickly. Could be interesting to add more guide or improve some explanation.

The provided regex for URLs (as an input target in config) doesn't support localhost, e.g. http://localhost:5001/swagger/v1.json.

I'm assuming this is not the intended behaviour?

Here is the example in a playground.

When defining a path with a return of type object that doesn't specify a ref or any props, the generated code is broken.

Swagger:

...
paths:
  /profile:
    get:
      operationId: getProfile
      parameters: []
      responses:
        '200':
          description: ''
          content:
            application/json:
              schema:
                type: object
...

This results in the following output:

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

export interface DefaultApi {
    
  getProfile(): AxiosPromise<GetProfileResponse>;
};

export const getDefaultApi = (axios: AxiosInstance): DefaultApi => ({
  getProfile(): AxiosPromise<GetProfileResponse> {
    
    
    return axios.get(`/profile`  );
  },
})

Which contains the GetProfileResponse type that doesn't exist.

Generators customization

I want to change the behavior of generator. For example, add some JSDoc generation. It will be huge and quite easy boost for whole library, if we do next way.

1 Create custom client object

  [OutputClient.REACT_QUERY]: {
    client: myCustomGeneratorHere, // <---- HERE
    msw: generateMSW,
    header: generateReactQueryHeader,
    dependencies: getReactQueryDependencies,
    footer: generateReactQueryFooter,
    title: generateReactQueryTitle,
  }, //...

2 Include that in project

Could be done in 2 ways

2A

tell program, that we want to use customClientGeneratorFunc here:
https://github.com/anymaniax/orval/blob/master/src/core/generators/client.ts#L177

const generator = GENERATOR_CLIENT[outputClient];
const client = generator.client(verbOption, options);

Custom client could be passed

• as override.client property
• as output.client as function:

  const generator = typeof outputClient === 'function' ? outputClient : GENERATOR_CLIENT[outputClient];
  // this should be done in all spots where GENERATOR_CLIENT is invoked.

2B

Make GENERATOR_CLIENT a singleton, which could be mutated.

// generators/client.ts
const GENERATOR_CLIENT = {...};

export function addGeneratorClient(key, obj) {
    GENERATOR_CLIENT[key] = obj;
}

// in orval.config.js 
import { addGeneratorClient } from 'orval';
addGeneratorClient('custom-query', {
  client : foo(){},
 // ...
});

export default {
   output: { client: 'custom-query' }
}

Of course that could be realized with class and private properties, anyway - idea was modifying global object with own generators.

steps are

1. make this tiny code change
2. adopt change typings for new changes
3. update documentation

Profit

Users can change main functions with their own just in few operations. It would be easy to change just one generator (i. e. client) and the rest ones (msw, title) could be imported as is.

add the possibility to use your own HTTP client

At the moment, I only generate useQuery and useMutation hook for the react query client.

I want to add the possibility to put other query hook (usePaginatedQuery and useInfiniteQuery).

Prettier is already imported. I see no disadvantages to use it for generated code. That will correct all ugly linebreaks produced

1. add src/utils/formatter.ts

import Prettier from 'prettier';
export function prettifyTypescript(data){
    return Prettier.format(data, {
        parser: 'typescript',
        "useTabs": false,
        "tabWidth": 4,
        "singleQuote": true,
        "semi": true,
        "printWidth": 100,
        "trailingComma": "all",
        "proseWrap": "never"
    });
}

2. apply prettifyTypescript in all writers before writing TS-code.

Enhancement suggestion

JSDoc generation would be awesome feature, for all who uses contemporary IDE