Automatic React hooks

These allow you to show Run and Task progress without adding extra code to your Jobs.

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

• useEventDetails: get the details of a specific event
• useRunDetails: get the details of a specific Run
• useEventRunDetails: get the details of a Run triggered from a specific event

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.

How do I get an event id?

When you use sendEvent it will return basic details about the event, including the id of the event. You can then pass this to your frontend to use in the useEventRunDetails hook.

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.

How do I get a Run id?

You can call client.getRuns() with a Job id to get a list of the most recent Runs for that Job. You can then pass that run id to your frontend to use in the hook.

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.

How do I get an event id?

When you use sendEvent it will return basic details about the event, including the id of the event. You can then pass this to your frontend to use in the useEventRunDetails hook.

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