Introducing the Inngest TypeScript / JavaScript SDK
Join our Discord
Sign up for free

Trigger your code directly from Retool

Featured image

Internal tools are a pain to build and maintain. Fortunately, Retool has helped tons of companies reduce the burden. Retool primarily focuses on building dashboards and forms and it integrates well with several databases and cloud APIs.

Often though, there are actions that your support or customer success team needs to perform that are too complex for Retool built-in features. You may have even written some of necessary code in your application, but you can't easily run it from Retool.

The problem

Let's say you have an integration built in your application and you backend code imports a bunch of data from that third party. The third party API or your backend may have went down for a few hours and you may have missing data for certain user. When someone reaches out to support, you may need to re-run that import script to backfill the missing data.

We're going to walk through how you can do this so your team can trigger important scripts right from your Retool app. This guide assumes you have a basic experience building forms with Retool (If you don't, check out this great guide).

The plan

The goal is to enable your team to trigger a script anytime they click a button in Retool. To achieve this we will:

  1. Create a Retool button that sends an event to Inngest
  2. Write an Inngest function that uses our existing script
  3. Configure that function to run when our event is received
  4. See how it works end to end

Sending an event from Retool

To send data from Retool, we'll need to set up a “Resource” first. On your Resources tab in Retool, click “Create New” then select “Resource.” Then select “Rest API.” Now jump over to the Inngest Cloud dashboard and create a new Source using the “Add Source” button and selecting “API” (direct link). Copy your brand new key and in the Retool dashboard, prefix your key with the Inngest Source API URL and path: https://inn.gs/e/

shell
https://inn.gs/e/<YOUR-COPIED-SOURCE-API-KEY>

Your new resource will look like this. When it does, click “Create resource.”

Inngest Retool resource screenshot

Now, let's head to the Retool app that you want to add the button form to. Let's say you have already built out the following form called runBackfillForm with a single input called userId and a submit button:

Retool form screenshot

Next, create a new “Resource query” from the “Code” panel at the bottom left (use the + button). Let's name our new query sendBackfillRequested and select our new “Inngest” resource from the drop down. Update the “Action type” to a POST request. In the “Body” section, we need add the data that we want to send to Inngest. Inngest events require a name and some data as JSON. It's useful to prefix your event names to group them, here we'll call our event "retool/backfill.requested" and we'll pass the user id from the form and for future auditing purposes, the email of the current Retool user on your team:

json
{ "user_id": "{{runBackfillForm.data.userId}}", "agent_id": "{{current_user.email}}" }

At the end, your resource query will look like this. Let's save it then click “Run” to test it.

Retool resource query screenshot

In the Inngest Cloud dashboard's “Events” tab, you should see a brand new retool/backfill.requested event. Click on the event and you should be able to select the payload that we just sent.

Inngest Cloud dashboard view event payload

Now that we've verified the data is sent over to Inngest, you can attach the resource query as an event handler to the submit button. Select the “Default” interaction type and click “+ Add” to select our resource query sendBackfillRequested. For fun, you can add an isFetching to show loading.

Retool form submit button event handler

We're halfway there - with this in place any agent from our team can trigger this event as needed.

Writing our Inngest function

Using the Inngest SDK you can define your Inngest function and it's event trigger in one file. We'll create a directory called inngest in our project root:

mkdir -p inngest

Now we'll create a file in this directory for our function - runBackfillForUser.js. This will be our Inngest function which will import our existing backfill code, use the user_id from the event payload to run that code, and return a http status code in our response to tell Inngest if it should be retried or not.

js
// filename: ./inngest/runBackfillForUser.js
import { createFunction } from "inngest";
import { runBackfillForUser } from "../lib/backfill-scripts";
export default createFunction(
"Run backfill for user", // The name displayed in the Inngest dashboard
"retool/backfill.requested", // The event triggger
async ({ event }) => {
const result = await runBackfillForUser(event.data.user_id);
return {
status: result.ok ? 200 : 500,
message: `Ran backfill for user ${event.data.user_id}`,
};
}
);

That's our function - we now just need to serve our function.

Serving our function

There are different ways that you can have Inngest execute your functions:

  1. You can serve the functions securely via HTTP with our framework-specific handlers
  2. You can deploy them to a serverless function runtime with the Inngest CLI (Coming soon!)

For this guide, we'll focus on the former with an existing Express.js application. Inngest's default serve handler can be imported and passed to Express.js' app.use or router.use. You can get your Inngest signing key by visiting the Secrets tab in the Inngest dasboard (direct link).

js
import { serve } from "inngest"
import runBackfillForUser from "../inngest/runBackfillForUser"
app.use("/api/inngest", serve("My API", process.env.INNGEST_SIGNING_KEY, [
runBackfillForUser,
]))
// your existing routes...
app.get("/api/whatever", ...)
app.post("/api/something_else", ...)

Deploying your function

By serving your functions via HTTP, you don't need to deploy your code to Inngest Cloud or set up a new deployment process. After you deploy your code, you need to visit the Inngest dashboard to register your endpoint and functions. This allows Inngest to discover and remotely execute your functions.

After registering your endpoint, your new funciton should appear in the Functions tab of the Inngest Cloud dashboard:

Inngest Cloud dashboard view deployed function

Bringing it all together

Now that our code is pushed to production and we've set the secrets that we need, let's test it end to end.

Retool submit form

And a few seconds later in the Inngest cloud dashboard:

Inngest cloud dashboard view function output

Fantastic. We've now used our Retool form to trigger a backfill script on-demand with no infrastructure required to setup. Every time your support team needs to trigger this script, they can do it and ensure your users are happy.

Over to you

You now know how to get some existing code from your application shipped to Inngest and triggered right from Retool with a full audit trail of who triggered it, for what user and full logs. There was no need to set up a more complex infrastructure with a queue or new endpoint on your production API - Just push your code to Inngest and send an event from Retool - done and dusted.