Retrieving custom data

Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. are populated with required data from the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. and Frontastic data APIs automatically. But in some cases, you need additional, custom data.

You have multiple possibilities to do this:

fetch()

The simplest way is to use the JavaScript fetch() function in any React Component of your Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. and to handle the loaded state yourself in the component. If the API endpoint you want to call resides on the same domain or allows Cross Origin Requests (CORS) you can just go ahead. If you want to learn more about the fetch() function, please refer to MDN docs on fetch().

While this solution is simple and fast to implement, it requires an asynchronous call to the backend and is therefore not ready for Server Side Rendering (SSR). In many cases, this can be ignored, but sometimes you want the fetched content to appear in SSR for SEO reasons. Also, if the fetched information should be shared between Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code., this solution might not be feasible. If you find yourself in one of these cases, please jump ahead to TasticFieldHandler.

fetch() + custom controller

If the API endpoint you want to work with requires additional work (for example, authentication), you can implement a custom controller in Frontastic. This controller can then easily be reached from the frontend and can implement the additional work.

TasticFieldHandler

If fetch() doesn't work for you, a TasticFieldHandler is the solution. Using this you can fetch() information together with all the other data provided by Frontastic. The fetched data will be automatically injected into the Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code.. Using a TasticFieldHandler is the only way to have the data in your Server Side Rendering.


Did this page help you?