Client adding [] to list parameters in query

[aquirdTurtle]

Description

I'm using fastapi for my server for a react project and using openapi-ts to create the client-code. I was trying to follow the fast-api docs for creating a list-type query parameter here. The client ends up appending [] to the query parameter name, and e.g. with the openapi spec for I get errors like this:

INFO:     127.0.0.1:46393 - "GET /api/wtf/?q[]=wtf&q[]=wtf2&q[]=wtf3 HTTP/1.1" 422 Unprocessable Entity

I haven't really successfully trackeds down how the [] is getting appended precisely. The query without the [] is successful, e.g. using the swagger docs api, so I think this is a problem with the openapi-ts part of the stack. Please let me know if there's more info I can provide.

Reproducible example or configuration

https://stackblitz.com/edit/hey-api-client-fetch-example

OpenAPI specification (optional)

'/wtf/': {'get': {'summary': 'Problem Query', 'operationId': 'problem_query_wtf__get', 'parameters': [
                    {'name': 'q', 'in': 'query', 'required': True, 'schema': {'type': 'array', 'items': {'type': 'string'
                            }, 'title': 'Q'
                        }
                    }
                ], 'responses': {'200': {'description': 'Successful Response', 'content': {'application/json': {'schema': {}
                            }
                        }
                    }, '422': {'description': 'Validation Error', 'content': {'application/json': {'schema': {'$ref': '#/components/schemas/HTTPValidationError'
                                }
                            }
                        }
                    }
                }
            }

System information (optional)

No response

[stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• hey-api-client-fetch-example (Open reproduction)

[mrlubos]

Hey @aquirdTurtle, can you update the StackBlitz example so I can see how to reproduce?

[aquirdTurtle]

Sorry trying to orient myself with the stackblitz example. I guess you just want me to manually overwrite the src/client/ folder with my own minimal example that works with this swagger petstore backend? I guess I can use the find by status endpoint there.

[mrlubos]

Yes! I just need to see the spec that generates the code (you shared above) and how you call the client that results in the incorrect call (missing)

[mrlubos]

FastAPI documentation is also quite old at this point, so it would be helpful to see your final configuration!

[aquirdTurtle]

Here is a fairly minimal stack blitz example. Sorry I haven't actually used stackblitz very much... it forked as soon as I saved anything, maybe there was a better way for me to edit it. https://stackblitz.com/edit/hey-api-client-fetch-example-uqbbag?file=src%2FApp.tsx

The main part is this call:

findPetsByStatus({
  client: localClient,
  query: { status: ['available', 'pending'] },
}).then((res: any) => console.log('findPetsByStatus result', res));

Which logs errors and indicates it tried to query https://petstore3.swagger.io/api/v3/pet/findByStatus?status[]=available&status[]=pending, with the extra [].

I am using the axios client and it might be an error specific to that pathway. I'm also realizing that I'm not doing any client config for my actual project and maybe that's related... but using the axios client here also doesn't work.

[aquirdTurtle]

I think the client code in the original stack-blitz example is for an older version of the swagger petstore, as the original findPetsByStatus function expected a string-type status instead of an array type status. I downloaded the openapi spec from the swagger petstore docs and recreated the client with openapi-ts --input swagger_petstore.json --output ./src/openapi2 --client @hey-api/client-axios on my local project.

[mrlubos]

I see. It gets tricky with Axios because it has its own optional paramsSerializer function. The problem is that I can't currently tell what you're using to serialize your parameters (nothing is also an option). So the quick fix is, supply your own paramsSerializer() function to that service and serialize parameters however you want. The longer fix will be for me to handle this, likely by copy-pasting the serializers from Fetch API client.

[aquirdTurtle]

Ok thanks. I'm not quite sure what you mean by

I can't currently tell what you're using to serialize your parameters

But I'm not intentionally doing special for parameter serialization, so I think it should be using Axios's default serializer.

[mrlubos]

Yeah. I mean even if you used your own serializer (I use qs), I wouldn't know that I need to generate a qs function. But I think that's okay, I will fix this!

[itstueben]

FYI: we ran in the same issue with axios. would be nice if this will be fixed in the near future. Big Thanks!

[itstueben]

@aquirdTurtle For me there is a quick fix to set the axios config serializer to following.

paramsSerializer: {
   indexes: null,
},

See issue from axios from 2022. https://github.com/axios/axios/discussions/4883

indexes: null -> post?foo=bar&arr=1&arr=2&arr=3
indexes: false (default) -> post?foo=bar&arr[]=1&arr[]=2&arr[]=3
indexes: true -> post?foo=bar&arr[0]=1&arr[1]=2&arr[2]=3