Support for multi-value parameters in Query string

[kingferiol]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

REST API

Amplify Version

v6

Amplify Categories

api

Backend

None

Environment information

npx envinfo --system --binaries --browsers --npmPackages --duplicates --npmGlobalPackages

  System:
    OS: macOS 14.4.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 89.81 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.1.0 - /opt/homebrew/bin/node
    npm: 10.7.0 - /opt/homebrew/bin/npm
    pnpm: 9.0.6 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 124.0.6367.119
    Edge: 124.0.2478.80
    Safari: 17.4.1
  npmPackages:
    @----/common: workspace:* => 1.0.0 
    @----/store: workspace:* => 1.0.0 
    @aws-amplify/ui-react: 6.1.9 => 6.1.9 
    aws-amplify: 6.2.0 => 6.2.0 
    react-router-dom: 6.23.0 => 6.23.0 
  npmGlobalPackages:
    npm-check-updates: 16.14.18
    npm: 10.7.0
    typescript: 5.4.3

Describe the bug

Hi all

I am trying to create a GET Request with a query string parameter that has multiple values

https://mydomanin.com/path?paramA=value1&paramA=value2

Considering this interface (Record<string, string>) we should add the same key twice.

export interface RestApiOptionsBase {
    headers?: Headers;
    queryParams?: Record<string, string>;
    body?: DocumentType | FormData;
    withCredentials?: boolean;
}

Is there any workaround?

Thanks for the support

Best

Expected behavior

Create an HTTP request with multiple value in query string

https://mydomanin.com/path?paramA=value1&paramA=value2

Reproduction steps

n.a.

Code Snippet

// Put your code below this line.

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[cwomack]

Hey, there @kingferiol 👋. I think I understand the context of what you're looking to do here, but let me know if I'm missing something. You should be able to construct the string yourself by using comma delimited values similar to the following:

var a = new URL('https://mydomanin.com/path?paramA=value1,value2')
a.searchParams.get('paramA')
'value1,value2'

If this doesn't solve what you're looking for, can you clarify what the use case here is or add more context? Thanks.

[dwbelliston]

Is there potential to support the paramsSerializer config like in axios?

[kolodi]

The workaround would be creating search params manually,
example get requests

const values = ["value1", "value2"...]
await get({
    apiName,
    path: `/some_path?paramA=${values.join('&paramA=')}`,
})

As defined in resolveApiUrl it does not consider the possibility of multi value params yet... I would allow adding native URLSearchParams property in options for maximum flexibility.

[dwbelliston]

Thanks for the suggestion. Ended up going this route as well and it is working.

[kingferiol]

Hi all.

Thanks for the answer. Finally I implemented the @kolodi workaround.

Adding the query string parameter into the path attribute.

Thanks

[cwomack]

@kingferiol, thanks for confirming that you got it working and apologies on the delayed response to this issue. We'll close it, but let us know if there's further questions on this (or feel free to open a new issue). Thanks!