Skip to content

Commit 6af49e6

Browse files
docs: make the one-line async store the default and the split form the exception
Co-authored-by: Cursor <cursoragent@cursor.com>
1 parent 2ccece3 commit 6af49e6

1 file changed

Lines changed: 17 additions & 7 deletions

File tree

src/routes/(2)concepts/(1)stores.mdx

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -163,21 +163,31 @@ Check the box and "Write docs" appears above it; the row for "Review examples" i
163163

164164
See the [`createProjection` reference](/reference/solid-js/stores/create-projection) for mutation and return forms.
165165

166-
### Fetch in memos, shape in stores
166+
### Fetch into a store
167167

168-
A projection function may return a promise, so `createStore(async () => api.rows(period()), [])` fetches and reconciles in one step.
169-
That collapsed form is right when nothing needs to sit between the request and the store.
168+
A projection function may return a promise, so a store can fetch and reconcile in one step:
170169

171-
When something does, keep the two jobs apart: the memo owns the request, the store owns the shape.
170+
```tsx
171+
const [table] = createStore(async () => api.rows(period()), [] as Row[]);
172+
```
173+
174+
This is the normal way to load server data into a store.
175+
The request starts when `period()` changes, the response reconciles into the same proxy by `id`, and rows that did not change keep their identity and their DOM.
176+
[`isPending(() => table.length)`](/reference/solid-js/reactivity/is-pending) reports a refetch, [`refresh(table)`](/reference/solid-js/lifecycle-actions/refresh) re-asks, and a `Loading` boundary handles the first load.
177+
Nothing else is needed.
178+
179+
Split the request into its own memo only when the response has more than one consumer that shapes it differently, or when a request-level policy must live on the request rather than on the data:
172180

173181
```tsx
174182
const rows = createMemo(() => api.rows(period()));
175183
const [table] = createStore(() => rows(), [] as Row[]);
184+
const total = createMemo(() =>
185+
rows().reduce((sum, row) => sum + row.amount, 0)
186+
);
176187
```
177188

178-
`rows` is where you attach request-level concerns: [`isPending(rows)`](/reference/solid-js/reactivity/is-pending) for the refetch indicator, [`refresh(rows)`](/reference/solid-js/lifecycle-actions/refresh) to re-ask, a second consumer that reads the same response.
179-
`table` is where per-row tracking and reconciliation happen; when a new response lands, `rows` changes once and the store diffs it once.
180-
The line between them is the visible marker of where a request-level policy lives, and it is the shape the rest of the docs use when a fetch and a store appear together.
189+
Here `rows` is fetched once and read twice.
190+
Reach for this shape when you have that second reader; otherwise the one-line form is the right one.
181191

182192
## Optimistic stores
183193

0 commit comments

Comments
 (0)