|
| 1 | + |
1 | 2 | --- |
2 | 3 | title: action |
3 | 4 | --- |
@@ -100,3 +101,80 @@ type Submission<T, U> = { |
100 | 101 | const submissions = useSubmissions(action, (input) => filter(input)); |
101 | 102 | const submission = useSubmission(action, (input) => filter(input)); |
102 | 103 | ``` |
| 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