[REQ][Typescript-axios], ability to pass in parameters as an object

[standayweb]

Is your feature request related to a problem? Please describe.

It can be hard to read the code and can introduce bugs when using normal function parameters, for instance, if you have this:

api.getMembers(orgId, offset, limit, sortBy, sortOrder, options)

and the backend adds an argument websiteId, after orgId, depending on the types of the items it won't necessarily cause a type error.

Describe the solution you'd like

I would like the option to pass in the parameters as an object

Describe alternatives you've considered

For now, I am manually creating helper functions like this, but it's still a hassle to make sure to keep them up to date, it would be nicer to have the security of having objects here so that if anything at all is wrong, it will give a type error

getMembers: ({ orgId, offset, limit, sortBy, sortOrder, options }: GetOrgMembersReq) =>
    api.getMembers(orgId, offset, limit, sortBy, sortOrder, options)

Additional context

No additional context, let me know if you have any questions

[macjohnny]

which generator do you use? e.g. the typescript-angular generator supports this feature already.

[standayweb]

We are using typescript-axios @macjohnny Would typescript-angular be appropriate for a react app?

[macjohnny]

the typescript-angular generator is not suitable for a react app, since it generates services that rely on the angular HttpClient service.
However, you could use the typescript-rxjs generator by @denyo, as it supports passing all parameters in an object, see e.g.

openapi-generator/samples/client/petstore/typescript-rxjs/builds/default/apis/PetApi.ts

Line 91 in 972ba18

deletePet = ({ petId, apiKey }: DeletePetRequest): Observable<void> => {

or you could use the ...Raw methods of the typescript-fetch generator:

openapi-generator/samples/client/petstore/typescript-fetch/builds/multiple-parameters/apis/PetApi.ts

Line 112 in 972ba18

async deletePetRaw(requestParameters: DeletePetRequest): Promise<runtime.ApiResponse<void>> {

[standayweb]

Thanks, we would rather not introduce rxjs just for this, although the typescript-fetch looks promising, any idea how complex it would be to submit a PR to typescript-axios, allowing a flag to be passed which generates functions taking in objects rather than regular parameters?

[macjohnny]

the simplest approach, which would cost you less than an hour, would be to conditionally wrap the method parameters with braces:
from

someMethod(param1: string, param2: string) {
   ...
}

to

someMethod({param1, param2}: {param1: string, param2: string}) {
   ...
}

you could do that here:

openapi-generator/modules/openapi-generator/src/main/resources/typescript-axios/apiInner.mustache

Line 37 in 972ba18

{{nickname}}({{#allParams}}{{paramName}}{{^required}}?{{/required}}: {{{dataType}}}, {{/allParams}}options: any = {}): RequestArgs {

which currently results in

openapi-generator/samples/client/petstore/typescript-axios/builds/default/api.ts

Line 310 in 972ba18

deletePet(petId: number, apiKey?: string, options: any = {}): RequestArgs {

A better approach would be to create separate ...RequestParams interfaces and use them instead.
See these PRs for the typescript-angular case:
#4479
#5308

[amakhrov]

the simplest approach, which would cost you less than an hour

That's exactly what I did in a previous project that used axios - worked well for me. A drawback, of course, is that occasionally I needed to modify my local template copy to catch up with the changes introduced by newer openapi-generator changes.

[facundomedica]

Hey! We had the exact same issue, we came up with this:

From c29980f45fc1c42f088e026c2e5f721b2bc5f48c Mon Sep 17 00:00:00 2001
From: Facundo Medica <redacted@gmail.com>
Date: Thu, 5 Mar 2020 15:31:16 -0300
Subject: [PATCH] named params for typescript-axios

---
 .../src/main/resources/typescript-axios/apiInner.mustache     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/modules/openapi-generator/src/main/resources/typescript-axios/apiInner.mustache b/modules/openapi-generator/src/main/resources/typescript-axios/apiInner.mustache
index 9f798331db..ed8c7d9d49 100644
--- a/modules/openapi-generator/src/main/resources/typescript-axios/apiInner.mustache
+++ b/modules/openapi-generator/src/main/resources/typescript-axios/apiInner.mustache
@@ -317,8 +317,8 @@ export class {{classname}} extends BaseAPI {
      * @throws {RequiredError}
      * @memberof {{classname}}
      */
-    public {{nickname}}({{#allParams}}{{paramName}}{{^required}}?{{/required}}: {{{dataType}}}, {{/allParams}}options?: any) {
-        return {{classname}}Fp(this.configuration).{{nickname}}({{#allParams}}{{paramName}}, {{/allParams}}options)(this.axios, this.basePath);
+    public {{nickname}}(params:{ {{#allParams}}{{paramName}}{{^required}}?{{/required}}: {{{dataType}}}, {{/allParams}}options?: any}) {
+        return {{classname}}Fp(this.configuration).{{nickname}}({{#allParams}}params.{{paramName}}, {{/allParams}}params.options)(this.axios, this.basePath);
     }
 
     {{/operation}}
-- 
2.20.1 (Apple Git-117)

Should we open a PR with this?

[macjohnny]

@facundomedica PRs are welcome

[ruiaraujolink]

Any update? I'm facing the same.

[supra28]

Anyone still looking for a solution, you can use useSingleRequestParameter in the config to achieve this.