Calling an action
Read the creating a Frontend component article.
If you want to trigger an operation on a backend system or want to fetch data asynchronously after initial rendering, you call an action extension (see the developing an action extension article for more information).
For this example, we'll use the following Frontend component to implement searching a backend data set using an action:
The Frontend component doesn't provide any configuration to studio and (so far) only renders a rudimentary search form and an empty list.
Perform the fetch call
An action extension is a server function in the API hub which can be invoked by a URL in the following format:
https://<frontastic-host>/frontastic/action/<namespace>/<action>(also see the action API section).
To access it, you should always use the
fetchApiHub() function not only resolves the correct API hub host for you but also ensures to maintain the session. For this reason, you should always use the
fetchApiHub() function for communication with the API hub.
By convention, you should store the file to encapsulate the
fetchApiHub() call in
Sending custom headers
To send custom headers to your actions, you must prefix the header name with
coFE-. Otherwise, the API hub won't pass the header to the action extension handler. For example, to send a custom header called
Custom-Configuration, you'll rename it to
coFE-Custom-Configuration, as shown in the code below.
Register fetcher as a hook
The fetch function is wrapped into a higher-order component to receive the base URL to query. This way, it can be used together with the contenxt provider component, where you should register your fetchers in the manner of ReactJS hooks:
The code above needs to be added to the file
There are 2 steps:
- Register the
characterSearch()function on the context provider
- If not done yet, expose a fetcher function to make use of the functions in the corresponding hook
In this example, a new hook (
useStarWars) is exposed for which a new provider property is used.
The way fetchers are registered in the
lib/ folder will change soon.
Execute the hook to fetch search results
Based on this infrastructure code, you can now complete the Frontend component and use the
useState() hook to maintain the search results locally: