The Inngest SDK leverages the full power of TypeScript, providing you with some awesome benefits when handling events:

- 📑 **Autocomplete** 
 <kbd>Tab ↹</kbd> your way to victory with inferred types for every event.
- **Instant feedback** 
 Understand exactly where your code might error before you even save the file.
- **Painless type generation** 
 Add a simple `"predev"` script and never miss a change.

All of this comes together to provide some awesome type inference based on your actual production data.

![Type inference](/assets/docs/typescript/send_welcome_email.gif)

## Generating types

Using the Inngest CLI, you can generate TS types for your entire Inngest Cloud workspace with a single command:

```sh
npx inngest-cli types ts [--output my/file.ts]
```

This will - by default - guide you through logging in to your Inngest Cloud account and will then create a file at `./__generated__/inngest.ts` with all of your event types.

We recommend placing this in a `"predev"` script in your `package.json` so you're always pulling the latest types whenever your writing code.

```json
{
 "scripts": {
 "dev": "next dev",
 "predev": "npx inngest-cli types ts"
 }
}
```

{/* TODO Mention CI here via `"prebuild": "yarn run predev --check" */}
{/* We don't do this yet because we can't specify a token to log in with, so it would break in practice */}

## Using types

Once your types are generated, there are a few ways we can use them to ensure our functions are protected.

### `new Inngest()` client

We can use these when creating a new Inngest client via `new Inngest()`.

This comes with powerful inference; we autocomplete your event names when selecting what to react to, without you having to dig for the name and data.

```ts
import { Inngest } from "inngest";
import { Events } from "./__generated__/inngest";

const inngest = new Inngest<Events>({ name: "My App" });

const fn = inngest.createFunction("Send welcome email", ...);
```

### `createFunction` helper

We can also use individual events if using the `createFunction` helper directly. Each event is exported individually, so you can import the particular event instead of the `Events` interface.

```ts
import { createFunction } from "inngest";
import { DemoEvent } from "./__generated__/inngest";

const fn = createFunction<DemoEvent>("Demo function", "demo/demo.event", job);
```

### Custom types

Sometimes it's necessary to define custom types to provide type safety before an event has been seen by Inngest.

For this, we can pass extra data to the generated `Events` type.

```ts
const inngest = new Inngest<
 Events<{
 "app/user.created": { data: { id: string } };
 "app/user.updated": AppUserUpdated;
 }>
>({ name: "My App" });
```

TypeScript will also enforce your custom events being the right shape - see [Event Format](/docs/event-format-and-structure) for more details.

By design, these custom types are silently overidden as the events pass through Inngest and become generated types. This helps to ensure you're accounting for the _actual_ data found in the payloads as opposed to what you _hope_ is present when you first define the type.

Using with TypeScript

Generating types

`new Inngest()` client

`createFunction` helper

Custom types

Using types

via Webhooks

Creating webhooks

Transforms

Why use Inngest for webhooks?

Internal tools are a pain to build and maintain. Fortunately, [Retool](https://retool.com/) 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.

{/* TBD diagram? */}

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](https://docs.retool.com/docs/create-forms-using-form-component)*).

## 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](https://docs.retool.com/docs/resources)” 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](/test/sources/new?ref=retool-guide#API)). 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](/assets/guides/trigger-your-code-from-retool/retool-resource.png)

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](/assets/guides/trigger-your-code-from-retool/retool-form.png)

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](/assets/guides/trigger-your-code-from-retool/retool-resource-query.png)

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](/assets/guides/trigger-your-code-from-retool/inngest-view-event-payload.gif)

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](/assets/guides/trigger-your-code-from-retool/retool-resource-query.png)

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](/features/sdk?ref=retool-guide) 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](/docs/reference/functions/retries?ref=retool-guide).


```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](https://expressjs.com/) 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](https://app.inngest.com/secrets)).

```js
import { serve } from "inngest/express"
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.

<aside>
 👉 You can read how to do this in <a href="/docs/deploy#registering-live-functions-with-inngest">our deployment docs here</a>.
</aside>

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

![Inngest Cloud dashboard view deployed function](/assets/guides/trigger-your-code-from-retool/inngest-deployed-function.png)

## 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](/assets/guides/trigger-your-code-from-retool/retool-submit-form.gif)

And a few seconds later in the Inngest cloud dashboard:

![Inngest cloud dashboard view function output](/assets/guides/trigger-your-code-from-retool/inngest-view-function-output.gif)

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.