Skip to content

Commit a789bea

Browse files
Update action.mdx (solidjs#846)
Co-authored-by: Atila Fassina <atilafassina@gmail.com>
1 parent 454623d commit a789bea

File tree

1 file changed

+78
-0
lines changed
  • src/routes/solid-router/reference/data-apis

1 file changed

+78
-0
lines changed

src/routes/solid-router/reference/data-apis/action.mdx

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
12
---
23
title: action
34
---
@@ -100,3 +101,80 @@ type Submission<T, U> = {
100101
const submissions = useSubmissions(action, (input) => filter(input));
101102
const submission = useSubmission(action, (input) => filter(input));
102103
```
104+
## Revalidate cached functions
105+
106+
### Revalidate all (default)
107+
By default all cached functions will be revalidated wether the action does not return or return a "normal" response.
108+
```jsx
109+
110+
const deleteTodo = action(async (formData: FormData) => {
111+
const id = Number(formData.get("id"))
112+
await api.deleteTodo(id)
113+
// ...
114+
return new Response("success", { status: 200 });
115+
})
116+
```
117+
118+
### Revalidate specific cached keys
119+
120+
By returning a response with solid-router's `json`, `reload` or `redirect` helpers you can pass a key / keys to the revalidate prop as the second argument of the json response helper.
121+
You can either pass as `string` directly or use the cached functions `key` or `keyFor` props.
122+
123+
```jsx
124+
import { action, json, reload, redirect } from "@solidjs/router"
125+
126+
const deleteTodo = action(async (formData: FormData) => {
127+
const id = Number(formData.get("id"))
128+
await api.deleteTodo(id)
129+
return json(
130+
{ deleted: id },
131+
{ revalidate: ["getAllTodos", getTodos.key, getTodoByID.keyFor(id)]}
132+
)
133+
134+
//or
135+
return reload({ revalidate: ["getAllTodos", getTodos.key, getTodoByID.keyFor(id)]})
136+
137+
//or
138+
return redirect("/", { revalidate: ["getAllTodos", getTodos.key, getTodoByID.keyFor(id)]})
139+
140+
})
141+
```
142+
143+
Prevent revalidation
144+
To opt out of any revalidation you can pass any `string` to revalidate which is not a key of any cached function.
145+
```jsx
146+
const deleteTodo = action(async (formData: FormData) => {
147+
const id = Number(formData.get("id"))
148+
await api.deleteTodo(id)
149+
// returns a `json` without revalidating the action.
150+
return json(`deleted ${id}`,{ revalidate: "nothing" })
151+
152+
// or reload the route without revalidating the request.
153+
return reload({ revalidate: "nothing" })
154+
155+
// or redirect without revalidating
156+
return redirect("/", { revalidate: "nothing" })
157+
})
158+
```
159+
160+
### Revalidate without action
161+
Cached functions can also be revalidated by the `revalidate` helper.
162+
```jsx
163+
revalidate([getTodos.key, getTodoByID.keyFor(id)])
164+
```
165+
This is also great if you want to set your own "refresh" interval e.g. poll data every 30 seconds.
166+
167+
```jsx
168+
export default function TodoLayout(){
169+
170+
const todos = createAsync(() => getTodos())
171+
172+
onMount(() => {
173+
//30 second polling
174+
const interval = setInterval(() => revalidate(getTodos.key),1000 * 30)
175+
onCleanup(() => clearInterval(interval))
176+
})
177+
178+
// ...
179+
}
180+
```

0 commit comments

Comments
 (0)