@@ -18,14 +18,15 @@ description: >-
1818---
1919
2020Creates a reactive resource that manages asynchronous data fetching and loading states, automatically tracking dependencies and providing a simple interface for reading, refreshing, and error handling.
21+ It integrates with Solid's reactivity system and Suspense boundaries.
2122
2223## Import
2324
2425``` typescript
2526import { createResource } from " solid-js" ;
2627```
2728
28- ## Type Signature
29+ ## Type
2930
3031``` typescript
3132// Without source
@@ -42,7 +43,7 @@ function createResource<T, S, R = unknown>(
4243): ResourceReturn <T , R >
4344```
4445
45- ### Related Types
46+ ### Related types
4647
4748` ` ` typescript
4849type ResourceReturn<T, R = unknown> = [Resource<T>, ResourceActions<T, R>]
@@ -97,40 +98,41 @@ Function that receives the source value (or `true` if no source), the current re
9798
9899Configuration options for the resource .
99100
100- ## Options
101-
102- ### ` initialValue `
101+ #### ` initialValue `
103102- ** Type :** ` T `
104103- ** Default :** ` undefined `
105104
106105Initial value for the resource .
107106When provided , the resource starts in " ready" state and the type excludes `undefined`.
108107
109- ### ` name `
108+ #### ` name `
110109- ** Type :** ` string `
111110- ** Default :** ` undefined `
112111
113112A name for debugging purposes in development mode .
114113
115- ### ` deferStream `
114+ #### ` deferStream `
116115- ** Type :** ` boolean `
117116- ** Default :** ` false `
118117
119118Controls streaming behavior during server - side rendering .
120119
121- ### ` ssrLoadFrom `
120+ #### ` ssrLoadFrom `
122121- ** Type :** ` "initial" | "server" `
123122- ** Default :** ` "server" `
124123
125124Determines how the resource loads during SSR hydration .
126125
127- ### ` storage `
126+ - " server" : Uses the server - fetched value during hydration .
127+ - " initial" : Re - fetches on the client after hydration .
128+
129+ #### ` storage `
128130- ** Type :** ` (init: T | undefined) => [Accessor<T | undefined>, Setter<T | undefined>] `
129131- ** Default :** ` createSignal `
130132
131133Custom storage function for the resource value, useful for persistence or custom state management.
132134
133- ### ` onHydrated `
135+ #### ` onHydrated `
134136- ** Type :** ` (k: S | undefined, info: { value: T | undefined }) => void `
135137- ** Default :** ` undefined `
136138
@@ -155,10 +157,19 @@ type Resource<T> = {
155157` ` `
156158
157159- ` state ` : Current state of the resource .
160+ See table below for state descriptions .
158161- ` loading ` : Indicates if the resource is currently loading .
159162- ` error ` : Error information if the resource failed to load .
160163- ` latest ` : The latest value of the resource .
161164
165+ | State | Description | Loading | Error | Latest |
166+ | ------ | ---------- - | ------ - | ---- - | ------ |
167+ | ` unresolved ` | Initial state , not yet fetched | ` false ` | ` undefined ` | ` undefined ` |
168+ | ` pending ` | Fetching in progress | ` true ` | ` undefined ` | ` undefined ` |
169+ | ` ready ` | Successfully fetched | ` false ` | ` undefined ` | ` T ` |
170+ | ` refreshing ` | Refetching while keeping previous value | ` true ` | ` undefined ` | ` T ` |
171+ | ` errored ` | Fetching failed | ` false ` | ` any ` | ` undefined ` |
172+
162173
163174### ` ResourceActions `
164175
@@ -170,16 +181,15 @@ type ResourceActions<T, R = unknown> = {
170181` ` `
171182
172183- ` mutate ` : Function to Manually overwrite the resource value without calling the fetcher .
184+ Allows you to optimistically update the resource value locally , without making a network request .
173185- ` refetch ` : Function to re - run the fetcher without changing the source .
174186If a parameter is provided to ` refetch ` , it will be passed to the fetcher ' s `refetching` property.
175187
176- ## Usage
188+ ## Examples
177189
178- ### Basic Usage
190+ ### Basic usage
179191
180192` ` ` typescript
181- Basic Usage
182-
183193const [data] = createResource(async () => {
184194 const response = await fetch('/api/data');
185195 return response.json();
@@ -254,63 +264,3 @@ const [data] = createResource(
254264 async (id) => fetchUserData(id)
255265);
256266` ` `
257-
258- ## Details
259-
260- Resources provide a reactive pattern for handling asynchronous data that integrates seamlessly with SolidJS ' s reactivity system and Suspense boundaries.
261- Unlike signals , resources are specifically designed for async operations and provide built - in loading states , error handling , and refetching capabilities .
262-
263- ### State Management
264-
265- State follows a predictable lifecycle : ` "unresolved" → "pending" → "ready"/"errored" ` .
266- During refetching , the state transitions to ` "refreshing" ` while maintaining the previous value accessible via the latest property .
267- This prevents UI flickering during updates .
268-
269- In version v .1.5 .0 , resources gained the ability to cover a more detailed view of the Resource state , beyond ` loading ` and ` error ` states .
270- This includes distinct states for initial loading , successful fetches , refetching , and errors :
271-
272- | State | Description | Loading | Error | Latest |
273- | ------ | ---------- - | ------ - | ---- - | ------ |
274- | ` unresolved ` | Initial state , not yet fetched | ` false ` | ` undefined ` | ` undefined ` |
275- | ` pending ` | Fetching in progress | ` true ` | ` undefined ` | ` undefined ` |
276- | ` ready ` | Successfully fetched | ` false ` | ` undefined ` | ` T ` |
277- | ` refreshing ` | Refetching while keeping previous value | ` true ` | ` undefined ` | ` T ` |
278- | ` errored ` | Fetching failed | ` false ` | ` any ` | ` undefined ` |
279-
280- ### Source Reactivity
281-
282- Source automatically triggers refetching when the source value changes .
283- The fetcher only runs when the source is truthy (not ` null ` , ` undefined ` , or ` false ` ), allowing for conditional fetching patterns .
284- Sources can be static values , reactive accessors , or computed values .
285-
286- ### Refetching Behavior
287-
288- Refetching lets you manually trigger the fetcher using the ` refetch ` action , optionally passing extra parameters for more control over the request .
289- The ` mutate ` action allows you to optimistically update the resource value locally , without making a network request .
290-
291- ### Suspense Integration
292-
293- Resources automatically suspend the nearest ` <Suspense> ` boundary while loading , allowing you to declaratively show fallback UI until data is ready .
294- When a resource is pending or refreshing , components reading its value will suspend , and the fallback of the closest Suspense boundary will be displayed .
295- If an error is thrown , the nearest ` <ErrorBoundary> ` will catch it .
296-
297- ### SSR and Hydration
298-
299- Solid ' s resources are designed for seamless server-side rendering (SSR) and hydration.
300- During SSR , resource data is serialized and streamed to the client , enabling fast initial page loads and smooth transitions .
301- The ` ssrLoadFrom ` option lets you control how the resource behaves after hydration :
302-
303- - ` "server" ` (default ): The client uses the value fetched on the server during hydration , providing immediate access to data without additional fetches .
304- - ` "initial" ` : The client re - fetches the data after hydration , allowing for dynamic updates but potentially leading to a loading state on the client .
305-
306- ### Error Handling
307-
308- - Resources provide built - in error handling capabilities , allowing you to easily manage errors that occur during data fetching .
309- - Accessing the resource value when in error state re - throws the error , triggering error boundaries . The ` ErrorBoundary ` component can be used to catch errors and display fallback UI .
310-
311- ### Performance Characteristics
312-
313- Performance is enhanced by automatically deduplicating concurrent fetches and leveraging Solid ' s fine-grained reactivity and batching mechanisms.
314- During server - side rendering , resources can stream data for faster initial loads and improved user experience .
315-
316-
0 commit comments