Matt Aitken
ad14983e21
* Added stripInternal to SDK tsconfig * Statuses can now be set from a run, and are stored in the database * Added the key to the returned status * Made the test job have an extra step and only pass in some of the options * client.getRunStatuses() and the corresponding endpoint * client.getRun() now includes status info * Fixed circular dependency schema * Translate null to undefined * Added the react package to the nextjs-reference tsconfig * Removed unused OpenAI integration from nextjs-reference project * New hooks for getting the statuses * Disabled most of the nextjs-reference jobs * Updated the hooks UI * Updated the endpoints to deal with null statuses values * The hook is working, with an example * Changeset: “You can create statuses in your Jobs that can then be read using React hooks” * Changeset config is back to the old changelog style * WIP on new React hooks guide * Guide docs for the new hooks * Added the status hooks to the React hooks guide * Removed the links to the status hooks reference for now * Re-ordered the hooks * Fix for an error in the docs * Set a default of a blank array for the GetRunSchema
141 lines
3.5 KiB
Plaintext
141 lines
3.5 KiB
Plaintext
---
|
|
title: "Automatic React hooks"
|
|
description: "These allow you to show Run and Task progress without adding extra code to your Jobs."
|
|
---
|
|
|
|
## The data you can receive
|
|
|
|
- Info about an event you sent, including the Runs it triggered.
|
|
- The overall status of the Run (in progress, success and fail statuses).
|
|
- Metadata like start and completed times.
|
|
- The Run output (what is returned or an error that failed the Job)
|
|
- Information about the Tasks that have completed/failed/are running.
|
|
|
|
## The hooks
|
|
|
|
- [useEventDetails](/sdk/react/useeventdetails): get the details of a specific event
|
|
- [useRunDetails](/sdk/react/userundetails): get the details of a specific Run
|
|
- [useEventRunDetails](/sdk/react/useeventrundetails): get the details of a Run triggered from a specific event
|
|
|
|
All of these hooks will automatically refresh your components as the state of your Runs or events change.
|
|
|
|
#### useEventDetails
|
|
|
|
The `useEventDetails` hook will get the details of a specific event. You can use this to show the status of a specific event.
|
|
|
|
<Snippet file="how-to-get-event-id.mdx" />
|
|
|
|
This component will show the details of an event and the overall status of Runs that were triggered by the event:
|
|
|
|
```tsx
|
|
import { useEventDetails } from "@trigger.dev/react";
|
|
|
|
export default function EventDetails({ eventId }: { eventId: string }) {
|
|
const { data, error } = useEventDetails(eventId);
|
|
|
|
if (error) {
|
|
return <div>Error: {error.message}</div>;
|
|
}
|
|
|
|
if (!data) {
|
|
return <div>Loading...</div>;
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<h1>{data.name}</h1>
|
|
<p>Runs: {data.runs?.length}</p>
|
|
<div>
|
|
{data.runs?.map((run) => (
|
|
<div key={run.id}>
|
|
<p>
|
|
Run {run.id}: {run.status}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
#### useRunDetails
|
|
|
|
The `useRunDetails` hook will get the details of a specific Run. You can use this to show the status of a specific Run.
|
|
|
|
<Snippet file="how-to-get-run-id.mdx" />
|
|
|
|
This component will show the details of a Run and the status of each task in the Run:
|
|
|
|
```tsx
|
|
import { useRunDetails } from "@trigger.dev/react";
|
|
|
|
export default function RunDetails({ runId }: { runId: string }) {
|
|
const { data, error } = useRunDetails(runId);
|
|
|
|
if (error) {
|
|
return <div>Error: {error.message}</div>;
|
|
}
|
|
|
|
if (!data) {
|
|
return <div>Loading...</div>;
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<h1>Run {data.id}</h1>
|
|
<p>Status: {data.status}</p>
|
|
<div>
|
|
{data.tasks?.map((task) => (
|
|
<div key={task.id}>
|
|
<p>
|
|
Task {task.id}: {task.status}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
#### useEventRunDetails
|
|
|
|
The `useEventRunDetails` hook will get the details of a specific Run that was triggered by a specific event. You can use this to show the status of a specific Run.
|
|
|
|
<Snippet file="how-to-get-event-id.mdx" />
|
|
|
|
This component will show the details of a Run and the status of each task in the Run:
|
|
|
|
```tsx
|
|
import { useEventRunDetails } from "@trigger.dev/react";
|
|
|
|
export default function EventRunDetails({ eventId }: { eventId: string }) {
|
|
const { data, error } = useEventRunDetails(eventId);
|
|
|
|
if (error) {
|
|
return <div>Error: {error.message}</div>;
|
|
}
|
|
|
|
if (!data) {
|
|
return <div>Loading...</div>;
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<h1>Run {data.id}</h1>
|
|
<p>Status: {data.status}</p>
|
|
<div>
|
|
{data.tasks?.map((task) => (
|
|
<div key={task.id}>
|
|
<p>
|
|
Task {task.id}: {task.status}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
```
|