Docs
Guides
Actions
Render Data

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 to RenderUserData.
  • 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>