<% user.full_name %>
<% util.level ? util.level.title : '' %>
Explorer Pioneer Apollo Viking Voyager Pathfinder Orion
Points
<% user.points ? user.points.toLocaleString() : 0 %>
Badges
<% util.badgeCount %>
Streaks
Congratulations You've <% util.newestBadge.isCurriculum ? 'completed' : 'earned' %> the
<% util.newestBadge.title %> <% util.newestBadge.isCurriculum ? 'curriculum' : 'badge' %>!
previous
next
Share to Social Media
Linked In Facebook
Status
<% util.level ? util.level.title : '' %>
<% util.level ? util.level.points : '' %>
<% util.nextLevel ? util.nextLevel.title : '' %>
<% util.nextLevel ? util.nextLevel.points : '' %>
Level up! <% util.levelPointsRemaining %> points to go
Level up! <% util.levelPointsRemaining %> points to go
Badges
Completed Hitchhikers Track Completed Content Track Completed Pages Track Completed Page Builder Track Completed Search Backend Track Completed Search Frontend Theme Track Completed Search UI React Track Completed Solution Templates and the Admin Console Track Completed Technical Skills Track Completed Platform Basics Track Completed Listings Track Completed Reviews Track Completed Industry Overview Track Completed Analytics Track Completed Industry Overview & Product Basics Track Completed Multi-Language Experiences Track Completed Chat Track
<% util.expandBadges ? 'Less' : 'More' %>
Playground Accounts
New +
No Playground Accounts
Create Playground +
View Profile
Log Out loading
Mission Complete! 🚀
Congratulations, you’ve completed your first module!

We hope you enjoy exploring the rest of the site. Please don’t forget to leave us feedback - we are constantly looking to improve. Happy Hitchhiking!
Home
Welcome to Hitchhikers! 👋
To learn more about the platform we encourage you to get started by completing the Hitchhikers Program Track and earning your first badge!
Start Here
Close notification
Guide
Serverless Functions in Query Rules
Arrow Back
Completed
Introduction
Introduction
completed
Completed 1
Step 1
Approach
completed
Completed 2
Step 2
USE_FUNCTION Backend
completed
Completed 3
Step 3
USE_FUNCTION Frontend
completed
Completed 4
Step 4
RETURN_CUSTOM_DATA Backend
completed
home

Step 1: Approach

There are two places a developer could choose to execute their own custom logic - server-side or client-side. Our goal is to support both places. There are various advantages and disadvantages to each:

Server-Side Client-Side
More Secure - doesn’t require publishing sensitive API keys client-side Better Latency - invoking a function server-side will add latency to the Search API
Analytics and Logging - we can log all of the functions and their responses Loading State - allows developer to implement a loading state for subsequent API calls, creating a better UX and reducing the time to contentful paint

Whether a developer is implementing logic server-side or client-side, they will use query rules to trigger their logic. This means that they can choose to trigger logic using all of the criteria that we currently support - like regular expressions and string matching - as well as more powerful, NLP-powered criteria coming in the future.

Depending on whether the developer wants to run the code server-side or client-side, they can use one of two new query rules actions:

  • USE_FUNCTION: This runs a Typescript function from a Yext plugin on our servers and forwards the return value to the front-end.

  • RETURN_CUSTOM_DATA: This simply returns a static JSON blob that is used to signal to the front-end that it’s supposed to trigger an action, like redirecting to a URL or fetching data on the client-side.

    In addition to triggering actions, custom data could also be used for display. For example, you could write the content for promotions in the back-end as JSON blobs, but then write the display and styling on the front-end.

Putting it all together, the architecture looks like this:

query rules functions architecture

Next let’s dive into both of these new actions in query rules.

<% elem.innerText %>