Skip to content

Docs: Add Sequin guide #1368

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 1, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions docs/guides/frameworks/introduction.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,14 @@ import CardNodejs from "/snippets/card-nodejs.mdx";
import CardNextjs from "/snippets/card-nextjs.mdx";
import CardRemix from "/snippets/card-remix.mdx";
import CardSupabase from "/snippets/card-supabase.mdx";
import CardSequin from "/snippets/card-sequin.mdx";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Issue with CardSequin export.

The card-sequin.mdx file exists at docs/snippets/card-sequin.mdx, but it does not export the CardSequin component as expected. Please ensure that the CardSequin component is properly exported in card-sequin.mdx.

🔗 Analysis chain

LGTM! Changes align with PR objectives.

The addition of the CardSequin component is consistent with the existing structure and aligns with the PR objective of adding a Sequin guide to the documentation.

To ensure the completeness of this change, please run the following script to verify the existence and basic structure of the CardSequin component:

This script will help confirm that the CardSequin component has been properly created and structured.

Also applies to: 20-20

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the existence and basic structure of the CardSequin component

# Test 1: Check if the card-sequin.mdx file exists
echo "Checking for card-sequin.mdx file:"
fd -t f "card-sequin.mdx" snippets

# Test 2: Verify the basic structure of the CardSequin component
echo "Verifying the structure of CardSequin component:"
rg --type mdx -A 5 "^export default function CardSequin" snippets/card-sequin.mdx

Length of output: 428


Script:

#!/bin/bash
# Description: Search for card-sequin.mdx in the repository

echo "Searching for card-sequin.mdx in the repository:"
fd -t f "card-sequin.mdx"

Length of output: 162


Script:

#!/bin/bash
# Description: Verify the structure of the CardSequin component

echo "Verifying the structure of CardSequin component:"
rg "^export default function CardSequin" docs/snippets/card-sequin.mdx

Length of output: 179


Script:

#!/bin/bash
# Description: Verify the export statement of the CardSequin component with alternative patterns

echo "Verifying alternative export statements of CardSequin component:"

# Pattern 1: export default CardSequin
rg "^export default CardSequin" docs/snippets/card-sequin.mdx

# Pattern 2: export function CardSequin
rg "^export function CardSequin" docs/snippets/card-sequin.mdx

# Pattern 3: export const CardSequin
rg "^export const CardSequin" docs/snippets/card-sequin.mdx

Length of output: 329


<CardGroup cols={3}>
<CardBun />
<CardNodejs />
<CardNextjs />
<CardRemix />
<CardSequin />
<CardSupabase />

</CardGroup>
319 changes: 319 additions & 0 deletions docs/guides/frameworks/sequin.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,319 @@
---
title: "Sequin database triggers"
sidebarTitle: "Sequin"
description: "This guide will show you how to trigger tasks from database changes using Sequin"
icon: "database"
---

[Sequin](https://sequinstream.com) allows you to trigger tasks from database changes. Sequin captures every insert, update, and delete on a table and then ensures a task is triggered for each change.

Often, task runs coincide with database changes. For instance, you might want to use a Trigger.dev task to generate an embedding for each post in your database:

<Frame>
<img src="/images/sequin-intro.svg" alt="Sequin and Trigger.dev Overview" />
</Frame>

In this guide, you'll learn how to use Sequin to trigger Trigger.dev tasks from database changes.

## Prerequisites

You are about to create a [regular Trigger.dev task](/tasks-regular) that you will execute when ever a post is inserted or updated in your database. Sequin will detect all the changes on the `posts` table and then send the payload of the post to an API endpoint that will call `tasks.trigger()` to create the embedding and update the database.

As long as you create an HTTP endpoint that Sequin can deliver webhooks to, you can use any web framework or edge function (e.g. Supabase Edge Functions, Vercel Functions, Cloudflare Workers, etc.) to invoke your Trigger.dev task. In this guide, we'll show you how to setup Trigger.dev tasks using Next.js API Routes.

You'll need the following to follow this guide:

- A Next.js project with [Trigger.dev](https://trigger.dev) installed
<Info>
If you don't have one already, follow [Trigger.dev's Next.js setup guide](/guides/frameworks/nextjs) to setup your project. You can return to this guide when you're ready to write your first Trigger.dev task.
</Info>
- A [Sequin](https://console.sequinstream.com/register) account
- A Postgres database (Sequin works with any Postgres database version 12 and up) with a `posts` table.

## Create a Trigger.dev task

Start by creating a new Trigger.dev task that takes in a Sequin change event as a payload, creates an embedding, and then inserts the embedding into the database:

<Steps titleSize="h3">
<Step title="Create a `create-embedding-for-post` task">
In your `src/trigger/tasks` directory, create a new file called `create-embedding-for-post.ts` and add the following code:

<CodeGroup>
```ts trigger/create-embedding-for-post.ts
import { task } from "@trigger.dev/sdk/v3";
import { OpenAI } from "openai";
import { upsertEmbedding } from "../util";

const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY,
});

export const createEmbeddingForPost = task({
id: "create-embedding-for-post",
run: async (payload: {
record: {
id: number;
title: string;
body: string;
author: string;
createdAt: string;
embedding: string | null;
},
metadata: {
table_schema: string,
table_name: string,
consumer: {
id: string;
name: string;
};
};
}) => {
// Create an embedding using the title and body of payload.record
const content = `${payload.record.title}\n\n${payload.record.body}`;
const embedding = (await openai.embeddings.create({
model: "text-embedding-ada-002",
input: content,
})).data[0].embedding;

// Upsert the embedding in the database. See utils.ts for the implementation -> ->
await upsertEmbedding(embedding, payload.record.id);

// Return the updated record
return {
...payload.record,
embedding: JSON.stringify(embedding),
};
}
});
```

```ts utils.ts
import pg from "pg";

export async function upsertEmbedding(embedding: number[], id: number) {
const client = new pg.Client({
connectionString: process.env.DATABASE_URL,
});
await client.connect();

try {
const query = `
INSERT INTO post_embeddings (id, embedding)
VALUES ($2, $1)
ON CONFLICT (id)
DO UPDATE SET embedding = $1
`;
const values = [JSON.stringify(embedding), id];

const result = await client.query(query, values);
console.log(`Updated record in database. Rows affected: ${result.rowCount}`);

return result.rowCount;
} catch (error) {
console.error("Error updating record in database:", error);
throw error;
} finally {
await client.end();
}
}
```
</CodeGroup>

This task takes in a Sequin record event, creates an embedding, and then uppserts the embedding into a `post_embeddings` table.
</Step>
<Step title="Add the task to your Trigger.dev project">
Register the `create-embedding-for-post` task to your Trigger.dev cloud project by running the following command:

```bash
npx trigger.dev@latest dev
```

In the Trigger.dev dashboard, you should now see the `create-embedding-for-post` task:

<Frame>
<img src="/images/sequin-register-task.png" alt="Task added" />
</Frame>
</Step>
</Steps>

<Check>
You've successfully created a Trigger.dev task that will create an embedding for each post in your database. In the next step, you'll create an API endpoint that Sequin can deliver records to.
</Check>

## Setup API route

You'll now create an API endpoint that will receive posts from Sequin and then trigger the `create-embedding-for-post` task.

<Info>
This guide covers how to setup an API endpoint using the Next.js App Router. You can find examples for Next.js Server Actions and Pages Router in the [Trigger.dev documentation](https://trigger.dev/docs/guides/frameworks/nextjs).
</Info>

<Steps titleSize="h3">
<Step title="Create a route handler">
Add a route handler by creating a new `route.ts` file in a `/app/api/create-embedding-for-post` directory:

```ts app/api/create-embedding-for-post/route.ts
import type { createEmbeddingForPost } from "@/trigger/create-embedding-for-post";
import { tasks } from "@trigger.dev/sdk/v3";
import { NextResponse } from "next/server";

export async function POST(req: Request) {
const authHeader = req.headers.get('authorization');
if (!authHeader || authHeader !== `Bearer ${process.env.SEQUIN_WEBHOOK_SECRET}`) {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
}
const payload = await req.json();
const handle = await tasks.trigger<typeof createEmbeddingForPost>(
"create-embedding-for-post",
payload
);

return NextResponse.json(handle);
}
```

This route handler will receive records from Sequin, parse them, and then trigger the `create-embedding-for-post` task.
</Step>
<Step title="Set secret keys">
You'll need to set four secret keys in a `.env.local` file:

```bash
SEQUIN_WEBHOOK_SECRET=your-secret-key
TRIGGER_SECRET_KEY=secret-from-trigger-dev
OPENAI_API_KEY=sk-proj-asdfasdfasdf
DATABASE_URL=postgresql://
```

The `SEQUIN_WEBHOOK_SECRET` ensures that only Sequin can access your APIendpoint.

The `TRIGGER_SECRET_KEY` is used to authenticate requests to Trigger.dev and can be found in the **API keys** tab of the Trigger.dev dashboard.

The `OPENAI_API_KEY` and `DATABASE_URL` are used to create an embedding using OpenAI and connect to your database. Be sure to add these as [environment variables](https://trigger.dev/docs/deploy-environment-variables) in Trigger.dev as well.
</Step>
</Steps>

<Check>
You've successfully created an API endpoint that can receive record payloads from Sequin and trigger a Trigger.dev task. In the next step, you'll setup Sequin to trigger the endpoint.
</Check>

## Create Sequin consumer

You'll now configure Sequin to send every row in your `posts` table to your Trigger.dev task.

<Steps titleSize="h3">
<Step title="Connect Sequin to your database">
1. Login to your Sequin account and click the **Add New Database** button.
2. Enter the connection details for your Postgres database.
<Info>
If you need to connect to a local dev database, flip the **use localhost** switch and follow the instructions to create a tunnel using the [Sequin CLI](/cli).
</Info>
3. Follow the instructions to create a publication and a replication slot by running two SQL commands in your database:

```sql
create publication sequin_pub for all tables;
select pg_create_logical_replication_slot('sequin_slot', 'pgoutput');
```

4. Name your database and click the **Connect Database** button.

Sequin will connect to your database and ensure that it's configured properly.

<Note>
If you need step-by-step connection instructions to connect Sequin to your database, check out our [quickstart guide](/quickstart).
</Note>
</Step>
<Step title="Tunnel to your local endpoint">
Now, create a tunnel to your local endpoint so Sequin can deliver change payloads to your local API:

1. In the Sequin console, open the **HTTP Endpoint** tab and click the **Create HTTP Endpoint** button.
2. Enter a name for your endpoint (i.e. `local_endpoint`) and flip the **Use localhost** switch. Follow the instructions in the Sequin console to [install the Sequin CLI](/cli), then run:

```bash
sequin tunnel --ports=3001:local_endpoint
```

3. Now, click **Add encryption header** and set the key to `Authorization` and the value to `Bearer SEQUIN_WEBHOOK_SECRET`.
4. Click **Create HTTP Endpoint**.
</Step>
<Step title="Create a Push Consumer">
Create a push consumer that will capture posts from your database and deliver them to your local endpoint:

1. Navigate to the **Consumers** tab and click the **Create Consumer** button.
2. Select your `posts` table (i.e `public.posts`).
3. You want to ensure that every post receives an embedding - and that embeddings are updated as posts are updated. To do this, select to process **Rows** and click **Continue**.
<Note>
You can also use **changes** for this particular use case, but **rows** comes with some nice replay and backfill features.
</Note>
4. You'll now set the sort and filter for the consumer. For this guide, we'll sort by `updated_at` and start at the beginning of the table. We won't apply any filters:
<Frame>
<img src="/images/sequin-sort-and-filter.png" alt="Consumer Sort and Filter" />
</Frame>
5. On the next screen, select **Push** to have Sequin send the events to your webhook URL. Click **Continue**.
6. Now, give your consumer a name (i.e. `posts_push_consumer`) and in the **HTTP Endpoint** section select the `local_endpoint` you created above. Add the exact API route you created in the previous step (i.e. `/api/create-embedding-for-post`):
<Frame>
<img src="/images/sequin-consumer-config.png" alt="Consumer Endpoint" />
</Frame>
7. Click the **Create Consumer** button.
</Step>
</Steps>

<Check>
Your Sequin consumer is now created and ready to send events to your API endpoint.
</Check>

## Test end-to-end

<Steps titleSize="h3">
<Step title="Spin up you dev environment">
1. The Next.js app is running: `npm run dev`
2. The Trigger.dev dev server is running `npx trigger.dev@latest dev`
3. The Sequin tunnel is running: `sequin tunnel --ports=3001:local_endpoint`
</Step>
<Step title="Create a new post in your database">

```sql
insert into
posts (title, body, author)
values
(
'The Future of AI',
'An insightful look into how artificial intelligence is shaping the future of technology and society.',
'Alice H Johnson'
);
```
</Step>
<Step title="Trace the change in the Sequin dashboard">
In the Sequin console, navigate to the [**Trace**](https://console.sequinstream.com/trace) tab and confirm that Sequin delivered the event to your local endpoint:
<Frame>
<img src="/images/sequin-trace.png" alt="Trace Event" />
</Frame>
</Step>

<Step title="Confirm the event was received by your endpoint">
In your local terminal, you should see a `200` response in your Next.js app:

```bash
POST /api/create-embedding-for-post 200 in 262ms
```
</Step>
<Step title="Observe the task run in the Trigger.dev dashboard">
Finally, in the Trigger.dev dashboard, navigate to the [**Runs**](https://trigger.dev/runs) tab and confirm that the task run completed successfully:

<Frame>
<img src="/images/sequin-final-run.png" alt="Task run" />
</Frame>
</Step>
</Steps>

<Check>
Every time a post is created or updated, Sequin will deliver the row payload to your API endpoint and Trigger.dev will run the `create-embedding-for-post` task.
</Check>

## Next steps

With Sequin and Trigger.dev, every post in your database will now have an embedding. This is a simple example of how you can trigger long-running tasks on database changes.

From here, add error handling and deploy to production:

- Add [retries](/errors-retrying) to your Trigger.dev task to ensure that any errors are captured and logged.
- Deploy to [production](/guides/frameworks/nextjs#deploying-your-task-to-trigger-dev) and update your Sequin consumer to point to your production database and endpoint.
Binary file added docs/images/sequin-consumer-config.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/sequin-final-run.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading