Eric Allam
79 lines
2.3 KiB
Plaintext
79 lines
2.3 KiB
Plaintext
---
|
|
title: "useRunDetails()"
|
|
description: "The `useRunDetails()` React hook will show the live status of run."
|
|
---
|
|
|
|
This hook will automatically update until the run has either completed or failed.
|
|
|
|
There are a couple of ways you can get a runId to pass in:
|
|
|
|
- In the frontend you can get the runId from the `useEventDetails()` hook. Although if you want the first run triggered by an event, we suggest you use [useEventRunDetails()](/sdk/react/useeventrundetails).
|
|
- From the backend you can get the latest runs for a Job using the [client.getRuns()](/sdk/triggerclient/instancemethods/getruns) method. This will return an array of runs, including their ids. You can then pass an id to your frontend to display the live status.
|
|
|
|
<Note>
|
|
You can get the full status of a Run from the backend using the
|
|
[client.getRun()](/sdk/triggerclient/instancemethods/getrun) method.
|
|
</Note>
|
|
|
|
<Snippet file="react-query-note.mdx" />
|
|
|
|
## Parameters
|
|
|
|
<ResponseField name="runId" type="string | undefined" required>
|
|
The run ID to get the details for.
|
|
</ResponseField>
|
|
<Snippet file="run-detail-hook-options.mdx" />
|
|
|
|
## Returns
|
|
|
|
<ResponseField name="data" type="object | undefined">
|
|
The data returned from the server.
|
|
<Expandable title="properties" defaultOpen>
|
|
<Snippet file="run-object-detailed.mdx" />
|
|
</Expandable>
|
|
</ResponseField>
|
|
<Snippet file="react-query-return.mdx" />
|
|
|
|
<RequestExample>
|
|
|
|
```typescript components/EventDetails.tsx
|
|
"use client";
|
|
|
|
import { useEventDetails } from "@trigger.dev/react";
|
|
|
|
export function EventDetails({ runId }: { runId: string }) {
|
|
const { isLoading, isError, data, error } = useRunDetails(runId);
|
|
|
|
if (isLoading) {
|
|
return <div>Loading...</div>;
|
|
}
|
|
|
|
if (isError) {
|
|
return <div>Error: {error.message}</div>;
|
|
}
|
|
|
|
//show the run status and all the tasks
|
|
return (
|
|
<div>
|
|
<h2>Run status: {data?.status}</h2>
|
|
<div>
|
|
{data?.tasks?.map((task) => (
|
|
<div className="flex gap-2 items-center">
|
|
{task.status === "ERRORED"
|
|
? "⛔️"
|
|
: task.status === "COMPLETED"
|
|
? "✅"
|
|
: "⏳"}
|
|
<div className="flex gap-1.5 items-center">
|
|
<h4 className="text-base">{task.displayKey ?? task.name}</h4>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
</RequestExample>
|