Have you ever come across a scenario where you are trying to create one API, but do not know how many query parameters you can expect.
As your Applications scale, and the backend APIs/Queries get bigger, it would be great to able to trigger a single API for multiple variations of API calls with dynamic query parameters. This also promotes reusability and gives you the familiar sense of how Code and API can be maintained.
This can be achieved using the this.params keyword which you can use inside APIs or Queries. More information on how to use it here.
In the API call, preferably GET, you can append this piece of code below to any of your APIs to receive dynamic query parameters.
{{!!this.params.queryParameters ? `?${this.params.queryParameters}` : ""}}Here is a screenshot below of how it would look like on the API page
After this you can connect to any of your widgets, whether it be a button or input widget to trigger this API and send dynamic query parameters across.
Below is an example of how the widget can be connected to the API through our Action Selector.
Here my Input widget PageSizeInput will trigger the API GetMockUsers every time the value is changed. And from the Action selector we are able to send the dynamic query parameters in the params value. We also created a JSObject called Variables to store the page value as a temporary variable.
JS Code for Action Selector onTextChanged
{{
GetMockUsers.run({
queryParameters: `page=${Variables.page || 0}&pageSize=${Table1.pageSize}`
});
}}Now when I change the pageSize input or click the navigation buttons Previous/Next, a dynamic queryParameters is sent to my API and getting different type of results.