04 : background jobs#2
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughThis PR integrates Inngest background job queue functionality into the application. It adds an Inngest client and function definition, exposes a new TRPC mutation to trigger background jobs, wires an Inngest API route handler, and refactors the page component from server-side prefetching to client-side event triggering with toast notifications. Changes
Sequence DiagramsequenceDiagram
participant User
participant ClientUI as Client (page.tsx)
participant TRPC
participant Inngest API
participant InngestWorker as Inngest Worker
User->>ClientUI: Click button
ClientUI->>TRPC: invoke mutation (text)
TRPC->>Inngest API: POST event (test/hello.world)
Inngest API->>InngestWorker: Queue background job
InngestWorker->>InngestWorker: step.sleep (10s)
InngestWorker->>InngestWorker: step.sleep (5s)
Inngest API-->>TRPC: { ok: "success" }
TRPC-->>ClientUI: Mutation success
ClientUI->>ClientUI: Show toast
ClientUI->>User: Display success feedback
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
.. |
|
. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (3)
src/inngest/client.ts (1)
4-4: Replace the generic app ID with a meaningful identifier.The hardcoded ID "my-app" is too generic. Consider using a more descriptive identifier that reflects your application name, or use an environment variable for different environments.
Apply this diff to use an environment variable with a fallback:
-export const inngest = new Inngest({ id: "my-app" }); +export const inngest = new Inngest({ + id: process.env.INNGEST_APP_ID || "vibe-app", + eventKey: process.env.INNGEST_EVENT_KEY, + signingKey: process.env.INNGEST_SIGNING_KEY, +});src/app/page.tsx (2)
8-8: Follow JavaScript naming conventions.The variable
Invokeshould follow camelCase convention for variables (start with lowercase).- const Invoke = useMutation(trpc.invoke.mutationOptions({ + const invoke = useMutation(trpc.invoke.mutationOptions({And update the references:
- <button disabled = {Invoke.isPending} onClick={()=> Invoke.mutate({text : "Ankit"})} className="px-4 py-2 bg-black text-white rounded hover:bg-blue-700"> + <button disabled={invoke.isPending} onClick={() => invoke.mutate({text: "Ankit"})} className="px-4 py-2 bg-black text-white rounded hover:bg-blue-700">
16-18: Remove hardcoded value and improve button formatting.The button has a hardcoded value "Ankit" which should be configurable or removed. Also, fix spacing issues in the JSX attributes.
Apply this diff to improve the button:
- <button disabled = {Invoke.isPending} onClick={()=> Invoke.mutate({text : "Ankit"})} className="px-4 py-2 bg-black text-white rounded hover:bg-blue-700"> + <button + disabled={invoke.isPending} + onClick={() => invoke.mutate({text: "user"})} + className="px-4 py-2 bg-black text-white rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed" + > - Invoke Background Job + {invoke.isPending ? "Invoking..." : "Invoke Background Job"} </button>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (8)
package.json(1 hunks)src/app/api/inngest/route.ts(1 hunks)src/app/client.tsx(0 hunks)src/app/layout.tsx(2 hunks)src/app/page.tsx(1 hunks)src/inngest/client.ts(1 hunks)src/inngest/functions.ts(1 hunks)src/trpc/routers/_app.ts(1 hunks)
💤 Files with no reviewable changes (1)
- src/app/client.tsx
🧰 Additional context used
🧬 Code graph analysis (4)
src/inngest/functions.ts (1)
src/inngest/client.ts (1)
inngest(4-4)
src/app/api/inngest/route.ts (2)
src/inngest/client.ts (1)
inngest(4-4)src/inngest/functions.ts (1)
helloWorld(3-16)
src/trpc/routers/_app.ts (2)
src/trpc/init.ts (2)
createTRPCRouter(21-21)baseProcedure(23-23)src/inngest/client.ts (1)
inngest(4-4)
src/app/page.tsx (1)
src/trpc/server.tsx (1)
trpc(10-14)
🔇 Additional comments (3)
src/app/layout.tsx (1)
4-4: LGTM! Toaster integration is correct.The Toaster component from sonner is properly imported and placed in the layout, enabling toast notifications throughout the application.
Also applies to: 35-35
src/trpc/routers/_app.ts (1)
27-30: LGTM! Input destructuring improves readability.The refactoring to destructure the input parameter makes the code cleaner and more consistent.
package.json (1)
53-53: No issues found—inngest@3.45.1 is current and secure.Verification confirms no public CVEs or recorded security vulnerabilities for inngest version 3.45.1, and the specified version matches the latest available release.
| import { inngest } from "@/inngest/client"; | ||
| import { helloWorld } from "@/inngest/functions"; | ||
|
|
||
| // Create an API that serves zero functions |
There was a problem hiding this comment.
Fix the misleading comment.
The comment states "Create an API that serves zero functions", but the code actually registers the helloWorld function.
Apply this diff to correct the comment:
-// Create an API that serves zero functions
+// Create an API that serves Inngest functions📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // Create an API that serves zero functions | |
| // Create an API that serves Inngest functions |
🤖 Prompt for AI Agents
In src/app/api/inngest/route.ts around line 5, the inline comment "Create an API
that serves zero functions" is misleading because the file registers the
helloWorld function; update the comment to accurately reflect that this API
registers/serves the helloWorld function (e.g., "Create an API that serves the
helloWorld function" or similar), keeping tone concise and matching surrounding
comment style.
| // simulate processing the file | ||
| await step.sleep("wait-a-moment", "10s"); | ||
|
|
||
| // simulate uploading the file | ||
| await step.sleep("wait-a-moment", "5s"); | ||
| return { message: `Hello ${event.data.email}!` }; |
There was a problem hiding this comment.
Rename the misleading field and update comments.
The field name event.data.email is misleading since it receives arbitrary text (e.g., "Ankit"), not an email address. The comments also mention "file processing" when the function is just simulating delays.
Consider renaming for clarity:
- // simulate processing the file
+ // simulate processing step 1
await step.sleep("process-file", "10s");
- // simulate uploading the file
+ // simulate processing step 2
await step.sleep("upload-file", "5s");
- return { message: `Hello ${event.data.email}!` };
+ return { message: `Hello ${event.data.name}!` };Note: This change requires updating the corresponding field in src/trpc/routers/_app.ts from email: input.text to name: input.text.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/inngest/functions.ts around lines 9 to 14, the handler uses
event.data.email and comments referencing "file processing" which are
misleading; rename the field to event.data.name, update the return to use `Hello
${event.data.name}!`, and change comments to reflect simulated delays rather
than file processing; also update the corresponding mapping in
src/trpc/routers/_app.ts by changing `email: input.text` to `name: input.text`
so the input field names remain consistent.
| await step.sleep("wait-a-moment", "10s"); | ||
|
|
||
| // simulate uploading the file | ||
| await step.sleep("wait-a-moment", "5s"); |
There was a problem hiding this comment.
Fix duplicate step IDs.
Both step.sleep calls use the same step ID "wait-a-moment". Inngest requires unique step IDs within a function to properly track execution state. This will cause runtime issues.
Apply this diff to use unique step IDs:
- await step.sleep("wait-a-moment", "10s");
+ await step.sleep("process-file", "10s");
// simulate uploading the file
- await step.sleep("wait-a-moment", "5s");
+ await step.sleep("upload-file", "5s");📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| await step.sleep("wait-a-moment", "10s"); | |
| // simulate uploading the file | |
| await step.sleep("wait-a-moment", "5s"); | |
| await step.sleep("process-file", "10s"); | |
| // simulate uploading the file | |
| await step.sleep("upload-file", "5s"); |
🤖 Prompt for AI Agents
In src/inngest/functions.ts around lines 10 to 13 there are duplicate step IDs:
both await step.sleep calls use "wait-a-moment", which will break Inngest's step
tracking; update the second (or both) step IDs to be unique (e.g.,
"wait-a-moment-1" and "wait-a-moment-2" or similar distinct names) so each step
has a unique identifier and keep any references consistent.
| await inngest.send({ | ||
| name: "test/hello.world", | ||
| data: { | ||
| email: input.text, | ||
| }, | ||
| }); |
There was a problem hiding this comment.
Add error handling for the Inngest event emission.
The inngest.send call is not wrapped in error handling. If the event emission fails, the mutation will throw an unhandled error without a meaningful response.
Apply this diff to add error handling:
- await inngest.send({
- name: "test/hello.world",
- data: {
- email: input.text,
- },
- });
- return { ok: "success" };
+ try {
+ await inngest.send({
+ name: "test/hello.world",
+ data: {
+ email: input.text,
+ },
+ });
+ return { ok: "success" };
+ } catch (error) {
+ throw new Error("Failed to invoke background job");
+ }Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/trpc/routers/_app.ts around lines 13 to 18, the await inngest.send({...})
call is unguarded and can throw an unhandled error; wrap the send call in a
try/catch, log the caught error (with context and the input data), and convert
it into a proper tRPC error response (e.g., throw a TRPCError with code
"INTERNAL" and a clear message) so the mutation returns a meaningful error
instead of crashing; ensure the handler still returns success when send
succeeds.
| await inngest.send({ | ||
| name: "test/hello.world", | ||
| data: { | ||
| email: input.text, |
There was a problem hiding this comment.
Rename the misleading field from "email" to "name" or "text".
The field name email is misleading since it receives arbitrary text like "Ankit", not an email address. This is inconsistent with how the field is used.
This requires coordinated changes:
- In this file:
data: {
- email: input.text,
+ name: input.text,
},- In
src/inngest/functions.ts(Line 14):
- return { message: `Hello ${event.data.email}!` };
+ return { message: `Hello ${event.data.name}!` };Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/trpc/routers/_app.ts around line 16 the input field is named "email" but
it carries arbitrary text (e.g., "Ankit"); rename this field to a descriptive
name such as "name" or "text" and update all usages accordingly. Change the
input schema key, any places reading input.email to input.name (or input.text),
and update types/interfaces. Also update the referenced src/inngest/functions.ts
(around line 14) to use the new field name and adjust any event payloads or
handlers that expect "email" so they consume the new key consistently.
1 participant
Summary by CodeRabbit
New Features
Removed