Dynamic configuration from the browser
In the developing a data source extension article, we described how you could create a data source and then configure it in the studio. But, you might need to add additional dynamic configuration options in the browser when requesting a data source. For example, for pagination or a user-provided search string.
In this article, we'll show you how to do that. For our example, we'll continue using our Star Wars API, this time for characters.
Accessing query parameters in the extension
Our data source schema to return a list of all the Star Wars characters would look like this:
You can store the
schema.json file wherever you like, because it's only required in the studio and not by the code.
The parameters for the custom data source are added to the query of the page URL (for example
https://yoursite.com/page?pageSize=20). You can access these parameters as
context.request.query inside the extension implementation:
Setting parameters in the component
You can then use the router inside a Frontend component to change the query parameters:
Clash of parameters
This query is shared between all the data sources available on the same page.
So, you need to ensure you use query parameter names that don't clash between the different data sources. If 2 or more data sources use the same query parameter name, or if multiple instances of the data source are used on the same page with the same query parameter name, they'll clash.
dataSourceId can be used to distinguish different data sources since it's guaranteed to have a unique value for each data source.