The RenderUserData action is used to send data to the frontend to perform a number of actions on the frontend.
The RenderUserData action has the following properties:
action: The action to perform. This must be set toRenderUserData.userData: The user data to render in the search results. This can be any JSON object.
Below is an example of the RenderUserData action:
{
"search_settings": {
"query_rules": [
{
"id": "1",
"conditions": [
[
// conditions here
]
],
"actions": [
{
"action": "RenderUserData",
"userData": "{\"title\":\"Star Wars\",\"description\":\"A long time ago in a galaxy far, far away...\",\"image\":\"https://upload.wikimedia.org/wikipedia/en/8/87/StarWarsMoviePoster1977.jpg\"}"
}
]
}
]
}
}and then in your frontend you can use the renderUserData with QueryRuleCustomData component to render the user data:
<QueryRuleCustomData>
{({ items }: { items: any[] }) =>
items.map(({ title }) => {
if (!title) {
return null;
}
return (
<section key={title}>
<h2>{title}</h2>
<p>You have typed in movie, show something wild about movies!</p>
</section>
);
})
}
</QueryRuleCustomData>User Redirect Example
You can also use the RenderUserData action to redirect the user to a different page. An example to do this is store a redirect property with the URL you want to redirect the user to. Below is an example of the RenderUserData action with a redirect:
{
"search_settings": {
"query_rules": [
{
"id": "1",
"conditions": [
[
// conditions here
]
],
"actions": [
{
"action": "RenderUserData",
"userData": "{ \"redirect\": \"https://searchkit.co\" }"
}
]
}
]
}
}and then in your frontend you can use the renderUserData with QueryRuleCustomData component to redirect the user:
<QueryRuleCustomData>
{({ items }: { items: any[] }) =>
items.map((item) => {
if (item.redirect) {
window.location = item.redirect
}
return null;
})
}
</QueryRuleCustomData>