​
The data you can receive

  • Info about an event you sent, including the Runs it triggered.
  • The overall status of the Run (in progress, success and fail statuses).
  • Metadata like start and completed times.
  • The Run output (what is returned or an error that failed the Job)
  • Information about the Tasks that have completed/failed/are running.

​
The hooks

All of these hooks will automatically refresh your components as the state of your Runs or events change.

​
useEventDetails

The useEventDetails hook will get the details of a specific event. You can use this to show the status of a specific event.

This component will show the details of an event and the overall status of Runs that were triggered by the event:

import { useEventDetails } from "@trigger.dev/react";

export default function EventDetails({ eventId }: { eventId: string }) {
  const { data, error } = useEventDetails(eventId);

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>{data.name}</h1>
      <p>Runs: {data.runs?.length}</p>
      <div>
        {data.runs?.map((run) => (
          <div key={run.id}>
            <p>
              Run {run.id}: {run.status}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}

​
useRunDetails

The useRunDetails hook will get the details of a specific Run. You can use this to show the status of a specific Run.

This component will show the details of a Run and the status of each task in the Run:

import { useRunDetails } from "@trigger.dev/react";

export default function RunDetails({ runId }: { runId: string }) {
  const { data, error } = useRunDetails(runId);

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Run {data.id}</h1>
      <p>Status: {data.status}</p>
      <div>
        {data.tasks?.map((task) => (
          <div key={task.id}>
            <p>
              Task {task.id}: {task.status}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}

​
useEventRunDetails

The useEventRunDetails hook will get the details of a specific Run that was triggered by a specific event. You can use this to show the status of a specific Run.

This component will show the details of a Run and the status of each task in the Run:

import { useEventRunDetails } from "@trigger.dev/react";

export default function EventRunDetails({ eventId }: { eventId: string }) {
  const { data, error } = useEventRunDetails(eventId);

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Run {data.id}</h1>
      <p>Status: {data.status}</p>
      <div>
        {data.tasks?.map((task) => (
          <div key={task.id}>
            <p>
              Task {task.id}: {task.status}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}

Was this page helpful?

OverviewExplicit status hooks