Retrieving Custom Data
Tastics are populated with required data from Backstage and Frontastic data APIs automatically. But in some cases you need additional, custom data. To achieve this you have multiple possibilities:
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 (e.g. 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.
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