Retrieving custom data

Tastics are populated with required data from the Frontastic Editor and Frontastic data APIs automatically. But in some cases, you need additional, custom data. To achieve this you have multiple possibilities:

fetch()

The simplest way is to use the JavaScript  fetch() function in any React Component of your Tastic 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 Tastics, this solution might not be feasible. If you find yourself in one of these cases, please jump ahead to custom stream.

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.

Custom stream

If fetch() doesn't work for you, a custom stream 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 the Tastic. Using a custom stream is the only way to have the data in your Server Side Rendering.

You may want to combine a custom stream with storing data in a custom app.


‹ Back to article list

Next article ›

Injecting custom components and reducers

Still need help? Contact us Contact us