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

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.

​
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.

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