"use client";

import { useEventRunDetails } 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>
  );
}

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

eventId
string | undefined
required

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

options
Object

​
Returns

data
object | undefined

The data returned from the server.

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

output
any

Whatever you returned from your run function, can be undefined

tasks
Task[]

The tasks from the run

nextCursor
string

If there are more tasks, you can use this to get them

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.

Was this page helpful?

useEventDetails()useRunDetails()