Creating Frontend component with a data source
- GitHub customer repository access
- studio access
- CLI running
- You've read the creating a Frontend component article, the creating a configurable Frontend component article, and the developing a data source extension article
As mentioned in the creating a configurable Frontend component article, you can create a
schema that makes the studio render a configuration interface for your Frontend component whenever it's used on a page. The resulting configuration is delivered to the mounted React component of the Frontend component as the prop data.
You can create a Frontend component to utilize data from your API provider. To do this, you need to set this up within your
index.tsx component file and within the
schema.json file. To require a data source of a certain type you first need to upload a corresponding data source schema. See the developing a data source extension article for more information.
In this example, we're using a data source with the below schema and the extension configuration to implement the data source code:
To bring the data source into a Frontend component, it needs to have a field type of
datsSource and it needs to have a
dataSourceType within the
Schema type and data sources
The schema array of the Frontend component schema allows you to group configuration fields into logical (and in the studio visual) sections. Each section can contain any number of configuration fields:
In this example, the schema of the
StarWarsCharacterSearchTastic received a section Data source which contains exactly 1 configuration field:
data. The field is of type
dataSource, and the
dataSourceType must be something that's been created in the studio (see the developing a data source extension article for more information. We're using our
example/star-wars-character-search data source for this example.
As we've set
true, when we add the Frontend component to the page it's shown as red with a warning:
Creating this schema in the studio and editing it on a page results in the following settings form:
We can now click + Add data source filter to bring the data into the component. See the using the data source filter editor article for how to use the filter editor.
Once you've configured your
schema.json for your Frontend component with a
dataSourceType, you can then automatically access the data in your
index.tsx file in the corresponding field name. You can then deal with that data as you wish, for example, display the data, send the information to another server, and so on.
The API hub then does all the magic to display products to your customers as they navigate your site.
Find out more about schemas and a complete list of field types and their possibilities in schemas.
Component input in code
In the React entry point of your Frontend component, you'll recieve a
data prop which contains the entire configuration from the studio.
index.tsx defines a type for the
data prop derived from the Frontend component schema. In the code, the provided data can then be directly accessed. It's the
data.dataSource that takes the configuration from the studio.
Frontend component schema is only for visualization purposes. The
field identifiers in different sections are all global. That means you can freely regroup fields into sections, but also that
field identifiers must be unique across all sections!
You can have multiple components on the same page using the same data source. But, data sources don't communicate with each other (unless you configure this yourself), so you could see the same thing in both components.