useEventDetails()
The useEventDetails() React hook will show the live status of an event that was sent using sendEvent().
It will automatically update until all triggered runs with the event have 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 event ID.
The event name.
When the event was created
When the event was last updated
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 } = useEventDetails(eventId);
if (isLoading) {
return <div>Loading...</div>;
}
if (isError) {
return <div>Error: {error.message}</div>;
}
//get the first run (if one has started yet)
const firstRun = event.data?.runs?.at(0);
//if the run is there, show the status, otherwise loading
return <div>{firstRun ? firstRun.status : "Loading"}</div>;
}
Was this page helpful?
"use client";
import { useEventDetails } from "@trigger.dev/react";
export function EventDetails({ eventId }: { eventId: string }) {
const { isLoading, isError, data, error } = useEventDetails(eventId);
if (isLoading) {
return <div>Loading...</div>;
}
if (isError) {
return <div>Error: {error.message}</div>;
}
//get the first run (if one has started yet)
const firstRun = event.data?.runs?.at(0);
//if the run is there, show the status, otherwise loading
return <div>{firstRun ? firstRun.status : "Loading"}</div>;
}