--- title: resource description: Watch for changes and runs async data fetching category: Reactivity --- In SvelteKit, using load functions is the primary approach for data fetching. While you can handle reactive data fetching by using `URLSearchParams` for query parameters, there are cases where you might need more flexibility at the component level. This is where `resource` comes in - it's a utility that seamlessly combines reactive state management with async data fetching. Built on top of `watch`, it runs after rendering by default, but also provides a pre-render option via `resource.pre()`. ## Demo ## Usage ```svelte {#if searchResults.loading}

{:else if searchResults.error}

Error: {searchResults.error.message}

{:else}

{result.title}

{/if} ``` ## Features - **Automatic Request Cancellation**: When dependencies change, in-flight requests are automatically canceled - **Loading & Error States**: Built-in states for loading and error handling - **Debouncing & Throttling**: Optional debounce and throttle options for rate limiting - **Type Safety**: Full TypeScript support with inferred types - **Multiple Dependencies**: Support for tracking multiple reactive dependencies - **Custom Cleanup**: Register cleanup functions that run before refetching - **Pre-render Support**: `resource.pre()` for pre-render execution ## Advanced Usage ### Multiple Dependencies ```svelte ``` ### Custom Cleanup ```svelte ``` ### Pre-render Execution ```svelte ``` ## Configuration Options ### `lazy` When true, skips the initial fetch. The resource will only fetch when dependencies change or `refetch()` is called. ### `once` When true, only fetches once. Subsequent dependency changes won't trigger new fetches. ### `initialValue` Provides an initial value for the resource before the first fetch completes. Useful if you already have the data and don't want to wait for the fetch to complete. ### `debounce` Time in milliseconds to debounce rapid changes. Useful for search inputs. The debounce implementation will cancel pending requests and only execute the last one after the specified delay. ### `throttle` Time in milliseconds to throttle rapid changes. Useful for real-time updates. The throttle implementation will ensure that requests are spaced at least by the specified delay, returning the pending promise if called too soon. Note that you should use either debounce or throttle, not both - if both are specified, debounce takes precedence. ## Type Definitions ```ts type ResourceOptions = { /** Skip initial fetch when true */ lazy?: boolean; /** Only fetch once when true */ once?: boolean; /** Initial value for the resource */ initialValue?: Data; /** Debounce time in milliseconds */ debounce?: number; /** Throttle time in milliseconds */ throttle?: number; }; type ResourceState = { /** Current value of the resource */ current: Data | undefined; /** Whether the resource is currently loading */ loading: boolean; /** Error if the fetch failed */ error: Error | undefined; }; type ResourceReturn = ResourceState & { /** Update the resource value directly */ mutate: (value: Data) => void; /** Re-run the fetcher with current values */ refetch: (info?: RefetchInfo) => Promise; }; type ResourceFetcherRefetchInfo = { /** Previous data return from fetcher */ data: Data | undefined; /** Whether the fetcher is currently refetching or it can be the value you passed to refetch. */ refetching: RefetchInfo | boolean; /** A cleanup function that will be called when the source is invalidated and the fetcher is about to re-run */ onCleanup: (fn: () => void) => void; /** AbortSignal for cancelling fetch requests */ signal: AbortSignal; }; type ResourceFetcher = ( /** Current value of the source */ value: Source extends Array ? { [K in keyof Source]: Source[K]; } : Source, /** Previous value of the source */ previousValue: Source extends Array ? { [K in keyof Source]: Source[K]; } : Source | undefined, info: ResourceFetcherRefetchInfo ) => Promise; function resource< Source, RefetchInfo = unknown, Fetcher extends ResourceFetcher< Source, Awaited>, RefetchInfo > = ResourceFetcher >( source: Getter, fetcher: Fetcher, options?: ResourceOptions>> ): ResourceReturn>, RefetchInfo>; ```