SWR hooks

Fetch and cache data using SWR-based hooks

SWR hooks use the swr library to fetch data once and cache it. These hooks are useful when you need to fetch data without real-time updates.

While SWR can be configured to poll for updates, we recommend using our other Realtime hooks for most use-cases due to rate-limits and the way the Trigger.dev API works.

useRun

The useRun hook allows you to fetch a run by its ID.

"use client"; // This is needed for Next.js App Router or other RSC frameworks

import { useRun } from "@trigger.dev/react-hooks";

export function MyComponent({ runId }: { runId: string }) {
  const { run, error, isLoading } = useRun(runId);

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

  return <div>Run: {run.id}</div>;
}

The run object returned is the same as the run object returned by the Trigger.dev API. To correctly type the run’s payload and output, you can provide the type of your task to the useRun hook:

import { useRun } from "@trigger.dev/react-hooks";
import type { myTask } from "@/trigger/myTask";

export function MyComponent({ runId }: { runId: string }) {
  const { run, error, isLoading } = useRun<typeof myTask>(runId, {
    refreshInterval: 0, // Disable polling
  });

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

  // Now run.payload and run.output are correctly typed

  return <div>Run: {run.id}</div>;
}

Common SWR options

You can pass the following options to the all SWR hooks:

revalidateOnFocus · boolean

Revalidate the data when the window regains focus.

revalidateOnReconnect · boolean

Revalidate the data when the browser regains a network connection.

refreshInterval · number

Poll for updates at the specified interval (in milliseconds). Polling is not recommended for most use-cases. Use the Realtime hooks instead.

Common SWR return values

error · Error

An error object if an error occurred while fetching the data.

isLoading · boolean

A boolean indicating if the data is currently being fetched.

isValidating · boolean

A boolean indicating if the data is currently being revalidated.

isError · boolean

A boolean indicating if an error occurred while fetching the data.