Search • Svelte

Core conceptsRemote functionsquery

The query function allows you to read dynamic data from the server (for static data, consider using `p

Reference$app/serverquery

namespace query { /** * Creates a batch query function that collects multiple calls and executes th

Core conceptsRemote functionsqueryQuery arguments

Query functions can accept an argument, such as the slug of an individual post:<!--- file: src/routes/

Core conceptsRemote functionsqueryDeduplication

When you call a query function, SvelteKit serializes the argument you call it with and uses it as a ca

Core conceptsRemote functionsqueryRefreshing queries

Any query can be re-fetched via its refresh method, which retrieves the latest value from the server:<

Core conceptsRemote functionsquery.batch

query.batch works like query except that it batches requests that happen within the same macrotask. Th

Reference$app/server

rm, getRequestEvent, prerender, query, read, requested } from '$app/server';

Core conceptsRemote functionsprerender

The prerender function is similar to query, except that it will be invoked at build time to prerender

Core conceptsRemote functionsUsing `getRequestEvent`

Inside query, form and command you can use `getRequestEvent` to get the current `RequestEvent` object.

Core conceptsRemote functionsRedirects

Inside query, form and prerender functions it is possible to use the `redirect(...)` function. It is n

Core conceptsRemote functionsform

t } from '@sveltejs/kit'; import { query, form } from '$app/server'; import * as db from '$lib/server/database'; import * as auth

Core conceptsRemote functionsHandling validation errors

the argument passed to a command, query or prerender function would fail validation:the function signature changed between deploy

AppendixFrequently asked questionsHow do I set up a database?

Put the code to query your database in a server route - don't query the database in .svelte files. You

Reference@sveltejs/kitRemoteResource

<T> & { /** The error in case the query fails. Most often this is a [`HttpError`](https://svelte.dev/docs/kit/@sveltejs-kit

Reference$app/navigationinvalidateAll

Causes all load and query functions belonging to the currently active page to re-run. Returns a Promis

Core conceptsRemote functionsOverview

s file, and come in four flavours: query, form, command and prerender. On the client, the exported functions are transformed to fe

Reference@sveltejs/kitRemoteQuery

type RemoteQuery<T> = RemoteResource<T> & { /** * Returns a plain promise with the result. * Unli

Reference@sveltejs/kitRemoteQueryFunction

The return value of a remote query function. See Remote functions for full documentation. type RemoteQ

Core conceptsForm actionsNamed actions

};To invoke a named action, add a query parameter with the name prefixed by a / character:<!--- file: src/routes/login/+page.svel

Core conceptsRemote functionscommand

disabled or fails to load.As with query and form, if the function accepts an argument, it should be validated by passing a Standa

AdvancedLink optionsdata-sveltekit-keepfocus

epfocus> <input type="text" name="query"> </form>...will cause the currently focused element to retain focus after navigati

Reference$app/navigationinvalidate

sed to fetch or depends (including query parameters). To create a custom identifier, use a string beginning with [a-z]+: (e.g. cus

Best practicesAuthSessions vs tokens

ly revoked, but require a database query to be made on each request.In contrast, JWT generally are not checked against a datastore

Best practicesAccessibilityFocus management

ull} */ const to_focus = document.querySelector('.focus-me'); to_focus?.focus(); });You can also programmatically navigate to a

Reference@sveltejs/kitRequestedResult

for await (const arg of requested(query, ...) { * void query(arg).refresh(); * } * ``` */ refreshAll: () => Promi

Reference$app/serverrequested

unction requested<Input, Output>( query: RemoteQueryFunction<Input, Output>, limit?: number ): RequestedResult<Input>;

Core conceptsRemote functionsSingle-flight mutationsClient-requested refreshes

ple. The server always knows which query functions to update, but it may not know which specific query instances to update. For ex

Build and deployVercelIncremental Static RegenerationallowQuery

A list of valid query parameters that contribute to the cache key. Other parameters (such as utm track

Core conceptsLoading dataUsing URL dataurl

hParams (which contains the parsed query string as a `URLSearchParams` object). url.hash cannot be accessed during load, since it

Core conceptsRemote functionsSingle-flight mutationsServer-driven refreshes

arguments:export const getPosts = query(async () => { /* ... */ }); export const getPost = query(v.string(), async (slug) => { /

Getting startedWeb standardsURL APIsURLSearchParams

ou encounter a URL, you can access query parameters via url.searchParams, which is an instance of `URLSearchParams`:const foo = ur

AdvancedHooksServer hookshandleValidationError

rt * as v from 'valibot'; import { query } from '$app/server'; export const getTodo = query(v.string(), (id) => { // implementat

Best practicesImages@sveltejs/enhanced-imgPer-image transforms

er-image transforms by appending a query string:<enhanced:img src="./path/to/your/image.jpg?blur=15" alt="An alt text" />See the i

Best practicesImages@sveltejs/enhanced-imgDynamically choosing an image

e to specify enhanced via a custom query:<script> const imageModules = import.meta.glob( '/path/to/assets/*.{avif,AVIF,gif,GIF,

Best practicesImages@sveltejs/enhanced-imgsrcset` and sizes`

widths, you can do that with the w query parameter:<enhanced:img src="./image.png?w=1280;640;400" sizes="(min-width:1920px) 12

Best practicesPerformanceNavigationPreventing waterfalls

high latency). For example, if you query a database to get the current user and then use that data to make a second query for a li

AppendixMigrating from SapperPages and layoutsStores

params properties, but no path or query.You access them differently in SvelteKit. stores is now getStores, but in most cases it i