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

eventId · string | undefined · required

The event ID to get the details for. This is returned when calling either client.sendEvent() or io.sendEvent().

Returns

data · object | undefined

The data returned from the server.

Hide properties

id · string | undefined

The event ID.

name · string | undefined

The event name.

createdAt · Date | undefined

When the event was created

updatedAt · Date | undefined

When the event was last updated

runs · Run[] | undefined

Show Run

id · string | undefined

The id of the run

status · RunStatus | undefined

The status of the run. Can be one of the following: PENDING, CANCELED, SUCCESS, QUEUED, WAITING_ON_CONNECTIONS, PREPROCESSING, STARTED, FAILURE, TIMED_OUT, ABORTED

startedAt · Date | undefined

The time the run started

completedAt · Date | undefined

The time the run completed

error · Error | undefined

The error object if the request failed.

status · pending | success | error

The status of the request. This can be one of the following values: pending, success and error.

isLoading · boolean

true if the request is currently pending or if it is in a refetch state.

isSuccess · boolean

true if the request succeeded.

isError · boolean

true if the request failed.

isPending · boolean

true if the request is currently pending.

isLoadingError · boolean

true if the request failed with a loading error.

isRefetchError · boolean

true if the request failed with a refetch error.

components/EventDetails.tsx

"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>;
}