docs/realtime/react-hooks/swr.mdx
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.
<Note> While SWR can be configured to poll for updates, we recommend using our other [Realtime hooks](/realtime/react-hooks/) for most use-cases due to rate-limits and the way the Trigger.dev API works. </Note>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>;
}
You can pass the following options to the all SWR hooks:
<ParamField path="revalidateOnFocus" type="boolean"> Revalidate the data when the window regains focus. </ParamField> <ParamField path="revalidateOnReconnect" type="boolean"> Revalidate the data when the browser regains a network connection. </ParamField> <ParamField path="refreshInterval" type="number"> Poll for updates at the specified interval (in milliseconds). Polling is not recommended for most use-cases. Use the Realtime hooks instead. </ParamField>