Skip to main content

Hi everyone, 

I recently checked the documentation on dynamic pages and the commercetools extension repository (https://github.com/FrontasticGmbH/extension-commercetools). 

There is one point I don’t understand right now: why does a dynamic page defines a data source, even though the dynamic page handler already loads the necessary data?

For example the product details page. The dynamic page handler (https://github.com/FrontasticGmbH/extension-commercetools/blob/master/index.ts) uses the ProductApi in line 65 to retrieve the product data and add it to the response. Furthermore the schema for the dynamic page additionally defined the data source type “frontastic/product”, which loads the product data too in line 216 (https://github.com/FrontasticGmbH/extension-commercetools/blob/master/index.ts).

So why is it necessary to load the data in the dynamic page handler and define a data source for the dynamic page too, which loads the same data? What point am I missing?

Thank you and kind regards, 
Torben

Hi there,

Thanks for raising this interesting question about dynamic pages and data sources! It's a point of confusion that's worth clarifying.

The reason a dynamic page defines a data source, even though the dynamic page handler loads data, isn't about loading the same data twice. Instead, the data source definition in the dynamic page schema primarily serves the Studio.

The Studio needs to understand the type of data your dynamic page handler will return. Crucially, this data doesn't have to be limited to a specific entity like "product"; it can be any kind of data your handler is designed to fetch. The data source type in the schema signals to the Studio the structure and nature of this data. This understanding allows the Studio to:

  • Determine which frontend components are suitable for that page based on their data requirements.
  • Enable content editors to effectively manage and configure these components within the Studio interface.

The data your handler loads becomes the primary data source for the page, accessible by frontend components in the API Hub's response under data.dataSources.__master. So, the handler handles the data retrieval, and the schema's data source definition acts as metadata for the Studio to understand and work with that data, regardless of its specific content.

So, to summarize:

  • The Dynamic Page Handler (DPH) fetches the initial data required for the dynamic page.
  • The API Hub receives the handler's data and structures it within the data.dataSources.__master object in its response.
  • The data source specified in the dynamic page schema tells the Studio what type of data to expect from the handler, aiding in component selection.
  •  Frontend components, recognizing the data source type, access and utilize the pre-loaded data found in data.dataSources.__master within the API Hub's response to render.

Hope this explanation clears things up! Let me know if you have any more questions.


Reply