Skip to content

Commit f9cf164

Browse files
D-K-PD-K-P
committed
Separated out SWR hooks
1 parent 0c4e8ac commit f9cf164

File tree

3 files changed

+90
-78
lines changed

3 files changed

+90
-78
lines changed

‎docs/docs.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,8 @@
125125
"realtime/react-hooks/triggering",
126126
"realtime/react-hooks/realtime",
127127
"realtime/react-hooks/metadata",
128-
"realtime/react-hooks/streams"
128+
"realtime/react-hooks/streams",
129+
"realtime/react-hooks/swr"
129130
]
130131
},
131132
{

‎docs/realtime/react-hooks/overview.mdx‎

Lines changed: 1 addition & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ We provide several categories of hooks:
6060
- **[Triggering hooks](/realtime/react-hooks/triggering)** - Trigger tasks from your frontend application
6161
- **[Realtime hooks](/realtime/react-hooks/realtime)** - Subscribe to runs, batches, and streams using real-time updates
6262
- **[Metadata hooks](/realtime/react-hooks/metadata)** - Subscribe to run metadata updates in React components
63-
- **[SWR hooks](#swr-hooks)** - Fetch data once and cache it using SWR
63+
- **[SWR hooks](/realtime/react-hooks/swr)** - Fetch data once and cache it using SWR
6464

6565
## SWR vs Realtime hooks
6666

@@ -72,80 +72,4 @@ We offer two "styles" of hooks: SWR and Realtime. The SWR hooks use the [swr](ht
7272
we recommend using the Realtime hooks for most use-cases.
7373
</Note>
7474

75-
## SWR Hooks
76-
77-
### useRun
78-
79-
The `useRun` hook allows you to fetch a run by its ID.
80-
81-
```tsx
82-
"use client"; // This is needed for Next.js App Router or other RSC frameworks
83-
84-
import { useRun } from "@trigger.dev/react-hooks";
85-
86-
export function MyComponent({ runId }: { runId: string }) {
87-
const { run, error, isLoading } = useRun(runId);
88-
89-
if (isLoading) return <div>Loading...</div>;
90-
if (error) return <div>Error: {error.message}</div>;
91-
92-
return <div>Run: {run.id}</div>;
93-
}
94-
```
95-
96-
The `run` object returned is the same as the [run object](/management/runs/retrieve) 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:
97-
98-
```tsx
99-
import { useRun } from "@trigger.dev/react-hooks";
100-
import type { myTask } from "@/trigger/myTask";
101-
102-
export function MyComponent({ runId }: { runId: string }) {
103-
const { run, error, isLoading } = useRun<typeof myTask>(runId, {
104-
refreshInterval: 0, // Disable polling
105-
});
106-
107-
if (isLoading) return <div>Loading...</div>;
108-
if (error) return <div>Error: {error.message}</div>;
109-
110-
// Now run.payload and run.output are correctly typed
111-
112-
return <div>Run: {run.id}</div>;
113-
}
114-
```
115-
116-
### Common SWR options
117-
118-
You can pass the following options to the all SWR hooks:
119-
120-
<ParamField path="revalidateOnFocus" type="boolean">
121-
Revalidate the data when the window regains focus.
122-
</ParamField>
123-
124-
<ParamField path="revalidateOnReconnect" type="boolean">
125-
Revalidate the data when the browser regains a network connection.
126-
</ParamField>
127-
128-
<ParamField path="refreshInterval" type="number">
129-
Poll for updates at the specified interval (in milliseconds). Polling is not recommended for most
130-
use-cases. Use the Realtime hooks instead.
131-
</ParamField>
132-
133-
### Common SWR return values
134-
135-
<ResponseField name="error" type="Error">
136-
An error object if an error occurred while fetching the data.
137-
</ResponseField>
138-
139-
<ResponseField name="isLoading" type="boolean">
140-
A boolean indicating if the data is currently being fetched.
141-
</ResponseField>
142-
143-
<ResponseField name="isValidating" type="boolean">
144-
A boolean indicating if the data is currently being revalidated.
145-
</ResponseField>
146-
147-
<ResponseField name="isError" type="boolean">
148-
A boolean indicating if an error occurred while fetching the data.
149-
</ResponseField>
150-
15175
<RealtimeExamplesCards />{" "}

‎docs/realtime/react-hooks/swr.mdx‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
---
2+
title: SWR hooks
3+
sidebarTitle: SWR
4+
description: Fetch and cache data using SWR-based hooks
5+
---
6+
7+
SWR hooks use the [swr](https://swr.vercel.app/) library to fetch data once and cache it. These hooks are useful when you need to fetch data without real-time updates.
8+
9+
<Note>
10+
While SWR can be configured to poll for updates, we recommend using the [Realtime
11+
hooks](/realtime/react-hooks/realtime) for most use-cases due to rate-limits and the way the
12+
Trigger.dev API works.
13+
</Note>
14+
15+
## useRun
16+
17+
The `useRun` hook allows you to fetch a run by its ID.
18+
19+
```tsx
20+
"use client"; // This is needed for Next.js App Router or other RSC frameworks
21+
22+
import { useRun } from "@trigger.dev/react-hooks";
23+
24+
export function MyComponent({ runId }: { runId: string }) {
25+
const { run, error, isLoading } = useRun(runId);
26+
27+
if (isLoading) return <div>Loading...</div>;
28+
if (error) return <div>Error: {error.message}</div>;
29+
30+
return <div>Run: {run.id}</div>;
31+
}
32+
```
33+
34+
The `run` object returned is the same as the [run object](/management/runs/retrieve) 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:
35+
36+
```tsx
37+
import { useRun } from "@trigger.dev/react-hooks";
38+
import type { myTask } from "@/trigger/myTask";
39+
40+
export function MyComponent({ runId }: { runId: string }) {
41+
const { run, error, isLoading } = useRun<typeof myTask>(runId, {
42+
refreshInterval: 0, // Disable polling
43+
});
44+
45+
if (isLoading) return <div>Loading...</div>;
46+
if (error) return <div>Error: {error.message}</div>;
47+
48+
// Now run.payload and run.output are correctly typed
49+
50+
return <div>Run: {run.id}</div>;
51+
}
52+
```
53+
54+
## Common SWR options
55+
56+
You can pass the following options to the all SWR hooks:
57+
58+
<ParamField path="revalidateOnFocus" type="boolean">
59+
Revalidate the data when the window regains focus.
60+
</ParamField>
61+
62+
<ParamField path="revalidateOnReconnect" type="boolean">
63+
Revalidate the data when the browser regains a network connection.
64+
</ParamField>
65+
66+
<ParamField path="refreshInterval" type="number">
67+
Poll for updates at the specified interval (in milliseconds). Polling is not recommended for most
68+
use-cases. Use the Realtime hooks instead.
69+
</ParamField>
70+
71+
## Common SWR return values
72+
73+
<ResponseField name="error" type="Error">
74+
An error object if an error occurred while fetching the data.
75+
</ResponseField>
76+
77+
<ResponseField name="isLoading" type="boolean">
78+
A boolean indicating if the data is currently being fetched.
79+
</ResponseField>
80+
81+
<ResponseField name="isValidating" type="boolean">
82+
A boolean indicating if the data is currently being revalidated.
83+
</ResponseField>
84+
85+
<ResponseField name="isError" type="boolean">
86+
A boolean indicating if an error occurred while fetching the data.
87+
</ResponseField>{" "}

0 commit comments

Comments
 (0)