[BUG] [typescript-angular] Query param key is undefined when using queryParamObjectFormat=json

[thccorni]

Bug Report Checklist

• Have you provided a full/minimal spec to reproduce the issue?
• Have you validated the input using an OpenAPI validator (example)?
• Have you tested with the latest master to confirm the issue still exists?
• Have you searched for related issues/PRs?
• What's the actual output vs expected output?
• [Optional] Sponsorship to speed up the bug fix or feature request (example)

Description

Generating the client with queryParamObjectFormat set to json breaks the query string resulting in request urls like:
https://example.com/pizzas?undefined={someJSON} instead of https://example.com/pizzas?filter={someJSON}.

openapi-generator version

v5.0.0-beta2

OpenAPI declaration file content or url

openapi: 3.0.0
info:
  title: 'Sample-API'
  version: '1.0.0'
paths:
  /pizzas:
    get:
      parameters:
        - name: filter
          in: query
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/PizzaFilter'
      responses:
        200:
          description: Delicious pizzas
          content:
            application/json:
              schema:
                type: array
                items:
                  type: string

components:
  schemas:
    PizzaFilter:
      type: object
      additionalProperties: true

Generation Details

Steps to reproduce

npx @openapitools/openapi-generator-cli version-manager set 5.0.0-beta2
npx @openapitools/openapi-generator-cli generate -i spec.yaml -g typescript-angular -o ./generated --additional-properties=queryParamObjectFormat=json

Related issues/PRs

Suggest a fix

I think the Problem is that the key parameter is not passed here:

openapi-generator/modules/openapi-generator/src/main/resources/typescript-angular/api.service.mustache

Line 97 in d8ba49b

httpParams = this.addToHttpParamsRecursive(httpParams, value);

Therefore it is undefined here:

openapi-generator/modules/openapi-generator/src/main/resources/typescript-angular/api.service.mustache

Line 111 in d8ba49b

httpParams = httpParams.append(key, JSON.stringify(value));

A possible fix could be to move the distinction of the query param format to addToHttpParams instead of addToHttpParamsRecursive

private addToHttpParams(httpParams: HttpParams, value: any, key?: string): HttpParams {
    if (typeof value === "object" && value instanceof Date === false) {
        {{#isQueryParamObjectFormatJson}}
        httpParams = httpParams.append(key, JSON.stringify(value));
        {{/isQueryParamObjectFormatJson}}
        {{^isQueryParamObjectFormatJson}}
        httpParams = this.addToHttpParamsRecursive(httpParams, value);
        {{/isQueryParamObjectFormatJson}}
    } else {
        httpParams = this.addToHttpParamsRecursive(httpParams, value, key);
    }
    return httpParams;
}

private addToHttpParamsRecursive(httpParams: HttpParams, value?: any, key?: string): HttpParams {
    if (value == null) {
        return httpParams;
    }

    if (typeof value === "object") {
        if (Array.isArray(value)) {
            (value as any[]).forEach( elem => httpParams = this.addToHttpParamsRecursive(httpParams, elem, key));
        } else if (value instanceof Date) {
            if (key != null) {
                httpParams = httpParams.append(key,
                    (value as Date).toISOString(){{^isDateTime}}.substr(0, 10)){{/isDateTime}};
            } else {
                throw Error("key may not be null if value is Date");
            }
        } else {
            Object.keys(value).forEach( k => httpParams = this.addToHttpParamsRecursive(
                httpParams, value[k], key != null ? `${key}{{#isQueryParamObjectFormatDot}}.{{/isQueryParamObjectFormatDot}}{{#isQueryParamObjectFormatKey}}[{{/isQueryParamObjectFormatKey}}${k}{{#isQueryParamObjectFormatKey}}]{{/isQueryParamObjectFormatKey}}` : k));
        }
    } else if (key != null) {
        httpParams = httpParams.append(key, value);
    } else {
        throw Error("key may not be null if value is not object or array");
    }
    return httpParams;
}

[godfryd]

I'm not sure if this is the same. I'm observing the same wrong result when I pass an array as argument.

private addToHttpParams(httpParams: HttpParams, value: any, key?: string): HttpParams {
        if (typeof value === "object" && value instanceof Date === false) {
            httpParams = this.addToHttpParamsRecursive(httpParams, value);
        } else {
            httpParams = this.addToHttpParamsRecursive(httpParams, value, key);
        }
        return httpParams;
    }

this function does not recognize that value is an array and it goes into the first condition (as array is object type). And then key is missed and then throw Error("key may not be null if value is not object or array"); happens.

From debugger:

you can see that the value is an array and it gets into the first condition and then key is dropped.

[p-wunderlich]

Any news on this? I have the same problem when using a schema as query parameter:

      parameters:
        - name: reportingRequestParmas
          in: query
          description: Suchkriterien
          required: false
          schema:
            $ref: "#/components/schemas/ReportingRequestParams"

The generated request looks like this:

http://localhost:8888/reporting/requests/details?start=2021-04-05&sortBy=requestCreated&sortDir=asc

But should be something like this (swagger ui does it in a correct way):

http://localhost:8888/reporting/requests/details?reportingRequestParmas=start%3D2021-04-05%26sortBy%3DrequestCreated%26sortDir%3Dasc

It's the same Problem as described in previous posts, in addToHttpParams, the key is simply dropped if the given value is an object ... (in my case an instance of ReportingRequestParams)

Although the query which got's build has at least no "undefined" key in it, the generated java spring server side code is not able to deal with this. (Just the second query is working)