useEventRunDetails()
The useEventRunDetails() React hook will show the live status of the first run triggered by sendEvent().
It will automatically update until the run has either completed or failed.
If you’re familiar with React Query, you’ll recognize the data that is returned by this hook. React Query 5 is used internally.
Parameters
The event ID to get the details for. This is returned when calling either client.sendEvent() or io.sendEvent().
Returns
The data returned from the server.
The id of the run
The status of the run. Can be one of the following: PENDING, CANCELED,
SUCCESS, QUEUED, WAITING_ON_CONNECTIONS, PREPROCESSING, STARTED,
FAILURE, TIMED_OUT, ABORTED
The time the run started
The time the run completed
Whatever you returned from your run function, can be undefined
The tasks from the run
If there are more tasks, you can use this to get them
The error object if the request failed.
The status of the request. This can be one of the following values: pending,
success and error.
true if the request is currently pending or if it is in a refetch state.
true if the request succeeded.
true if the request failed.
true if the request is currently pending.
true if the request failed with a loading error.
true if the request failed with a refetch error.
"use client";
import { useEventDetails } from "@trigger.dev/react";
export function EventDetails({ eventId }: { eventId: string }) {
const { isLoading, isError, data, error } = useEventRunDetails(eventId);
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>
);
}
Was this page helpful?
"use client";
import { useEventDetails } from "@trigger.dev/react";
export function EventDetails({ eventId }: { eventId: string }) {
const { isLoading, isError, data, error } = useEventRunDetails(eventId);
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>
);
}