Skip to content

Commit 4c918f6

Browse files
committed
more ref updates
1 parent fdab552 commit 4c918f6

5 files changed

Lines changed: 164 additions & 168 deletions

File tree

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,6 @@ Async function called when the action runs.
4848

4949
When native form handling calls the action, the argument is `FormData` for `multipart/form-data` forms and `URLSearchParams` otherwise.
5050

51-
52-
5351
### `options`
5452

5553
- **Type:** `{ name?: string; onComplete?: (submission: Submission<T, U>) => void }`
@@ -62,9 +60,7 @@ Action options.
6260
- **Type:** `string`
6361
- **Required:** No
6462

65-
Name used to create the action URL.
66-
67-
The name provides a stable URL for form actions and server rendering.
63+
Name used to create the action URL when passing an options object.
6864

6965
#### `onComplete`
7066

Lines changed: 56 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,17 @@
11
---
22
title: revalidate
33
use_cases: >-
4-
refresh data, invalidate cache, polling, real-time updates, manual refetch,
5-
stale data
4+
query revalidation, cache invalidation, data refresh
65
tags:
76
- revalidate
87
- cache
9-
- refresh
10-
- invalidation
11-
- polling
12-
- refetch
8+
- query
139
version: "1.0"
1410
description: >-
15-
Manually revalidate cached queries to refresh stale data, implement polling,
16-
or trigger updates after mutations in SolidJS.
11+
revalidate retriggers router query cache entries.
1712
---
1813

19-
The `revalidate` function triggers revalidation of [queries](/solid-router/data-fetching/queries) by their keys.
20-
Each query with active subscribers re-executes and updates its dependents; queries without subscribers are marked stale but don't execute until subscribed.
14+
`revalidate` retriggers [`query`](/solid-router/reference/data-apis/query) cache entries inside a transition.
2115

2216
## Import
2317

@@ -41,69 +35,92 @@ function revalidate(
4135
- **Type:** `string | string[] | void`
4236
- **Required:** No
4337

44-
The query key or array of query keys to revalidate.
45-
If not provided, all queries on the current page are revalidated.
38+
Cache key or keys from a query function's [`key`](/solid-router/reference/data-apis/query#key) or [`keyFor`](/solid-router/reference/data-apis/query#keyfor) property.
4639

4740
### `force`
4841

4942
- **Type:** `boolean`
50-
- **Required:** No
5143
- **Default:** `true`
44+
- **Required:** No
5245

53-
When `true`, clears the internal cache used for deduplication.
54-
When `false`, allows cached data to be reused if available.
46+
When `true`, matching cache entries are marked as cache misses before subscribers are retriggered.
47+
When `false`, subscribers are retriggered without changing cache entry timestamps.
5548

5649
## Return value
5750

58-
`revalidate` returns a `Promise` that resolves when the revalidation transition completes.
51+
- **Type:** `Promise<void>`
52+
53+
Resolves when the revalidation transition completes.
54+
55+
## Behavior
56+
57+
- Runs inside [`startTransition`](/reference/reactive-utilities/start-transition).
58+
- When `key` is undefined, every cache entry matches.
59+
- A string or array `key` matches cache entries by key prefix. [`query.key`](/solid-router/reference/data-apis/query#key) targets every cached argument set for that query; [`query.keyFor(...)`](/solid-router/reference/data-apis/query#keyfor) targets one serialized argument list.
60+
- Matching cache entries update their live signal with the current timestamp, retriggering active cache reads through primitives such as [`createAsync`](/solid-router/reference/data-apis/create-async).
61+
- Without active subscribers, `revalidate` does not call the query function.
5962

6063
## Examples
6164

6265
### Basic usage
6366

6467
```tsx
65-
import { query, createAsync, revalidate } from "@solidjs/router";
68+
import { For } from "solid-js";
69+
import { createAsync, query, revalidate } from "@solidjs/router";
6670

67-
const getUserQuery = query(async () => {
68-
// ... Fetches user data.
69-
return { name: "John" };
70-
}, "user");
71+
const getTodos = query(async () => {
72+
const response = await fetch("/api/todos");
73+
return response.json() as Promise<{ id: string; title: string }[]>;
74+
}, "todos");
7175

72-
function UserProfile() {
73-
const user = createAsync(() => getUserQuery());
76+
function Todos() {
77+
const todos = createAsync(() => getTodos(), { initialValue: [] });
7478

75-
function refreshUser() {
76-
revalidate(getUserQuery.key);
79+
function refreshTodos() {
80+
void revalidate(getTodos.key);
7781
}
7882

7983
return (
80-
<div>
81-
<button onClick={refreshUser}>Refresh</button>
82-
<p>{user()?.name}</p>
83-
</div>
84+
<>
85+
<button onClick={refreshTodos}>Refresh todos</button>
86+
<ul>
87+
<For each={todos()}>{(todo) => <li>{todo.title}</li>}</For>
88+
</ul>
89+
</>
8490
);
8591
}
8692
```
8793

88-
### Revalidating multiple queries
94+
### Revalidate a query argument
8995

9096
```tsx
91-
import { query, revalidate } from "@solidjs/router";
97+
import { createAsync, query, revalidate } from "@solidjs/router";
9298

93-
const getUsersQuery = query(async () => {
94-
// ... Fetches users.
95-
}, "users");
99+
const getProjectTasks = query(async (projectId: string) => {
100+
const response = await fetch(`/api/projects/${projectId}/tasks`);
101+
return response.json() as Promise<{ id: string; title: string }[]>;
102+
}, "projectTasks");
96103

97-
const getPostsQuery = query(async () => {
98-
// ... Fetches posts.
99-
}, "posts");
104+
function ProjectTasks(props: { projectId: string }) {
105+
const tasks = createAsync(() => getProjectTasks(props.projectId), {
106+
initialValue: [],
107+
});
100108

101-
function refreshAll() {
102-
revalidate([getUsersQuery.key, getPostsQuery.key]);
109+
function refreshProjectTasks() {
110+
void revalidate(getProjectTasks.keyFor(props.projectId));
111+
}
112+
113+
return (
114+
<>
115+
<button onClick={refreshProjectTasks}>Refresh project tasks</button>
116+
<div>{tasks().length} tasks</div>
117+
</>
118+
);
103119
}
104120
```
105121

106122
## Related
107123

108124
- [`query`](/solid-router/reference/data-apis/query)
109125
- [`createAsync`](/solid-router/reference/data-apis/create-async)
126+
- [`reload`](/solid-router/reference/response-helpers/reload)
Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,17 @@
11
---
22
title: useAction
33
use_cases: >-
4-
programmatic forms, client-side mutations, imperative actions, non-form
5-
submissions
4+
actions, programmatic actions, mutations
65
tags:
76
- actions
87
- mutations
9-
- client
10-
- imperative
118
- programmatic
129
version: "1.0"
1310
description: >-
14-
Invoke actions programmatically without forms using useAction. Perfect for
15-
client-side mutations and imperative updates.
11+
useAction returns a router-bound action caller.
1612
---
1713

18-
The `useAction` primitive returns a function that triggers an [action](/solid-router/concepts/actions) when called.
19-
20-
`useAction` requires client-side JavaScript and is not progressively enhanceable.
14+
`useAction` returns a function that calls an [`action`](/solid-router/reference/data-apis/action) with the current router context. It is the programmatic caller for non-form submissions.
2115

2216
## Import
2317

@@ -40,25 +34,36 @@ function useAction<T extends Array<any>, U, V>(
4034
- **Type:** `Action<T, U, V>`
4135
- **Required:** Yes
4236

43-
The action to be triggered.
37+
[`Action`](/solid-router/reference/data-apis/action) to bind to the current router.
4438

4539
## Return value
4640

47-
`useAction` returns a function that triggers the action.
48-
It takes the same parameters as the action handler and returns a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that resolves with the action's result.
41+
- **Type:** `(...args: Parameters<Action<T, U, V>>) => Promise<NarrowResponse<U>>`
42+
43+
Returns a router-bound caller with the same arguments as `action`.
44+
45+
## Behavior
46+
47+
- Unlike native form submissions, calls made with `useAction` depend on client-side JavaScript.
4948

50-
## Example
49+
## Examples
50+
51+
### Basic usage
5152

5253
```tsx
5354
import { action, useAction } from "@solidjs/router";
5455

55-
const likePostAction = action(async (id: string) => {
56-
// ... Likes a post on the server.
57-
});
56+
const likePost = action(async (id: string) => {
57+
return id;
58+
}, "likePost");
5859

59-
function LikeButton(props: { postId: string }) {
60-
const likePost = useAction(likePostAction);
60+
function LikeButton(props: { id: string }) {
61+
const like = useAction(likePost);
6162

62-
return <button onClick={() => likePost(props.postId)}>Like</button>;
63+
return <button onClick={() => like(props.id)}>Like</button>;
6364
}
6465
```
66+
67+
## Related
68+
69+
- [`action`](/solid-router/reference/data-apis/action)

0 commit comments

Comments
 (0)