Response interface in SvelteKit
An instance of Response is returned from await fetch(...) and handlers in +server.js files. Fundamentally, a SvelteKit app is a machine for turning a Request into a Response.
Svelte · SvelteKit · all subjects
web-standards
27 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
fetch API in SvelteKit
SvelteKit uses the fetch API for getting data from the network. It is available in hooks and server routes as well as in the browser.
Special fetch in load functions and server code
A special version of fetch is available in load functions, server hooks, API routes, and remote functions. It allows invoking endpoints directly during server-side rendering without making an HTTP call while preserving credentials. It also allows making relative requests, whereas server-side fetch normally requires a fully qualified URL. To make credentialled fetches in server-side code outside load, you must explicitly pass cookie and/or authorization headers.
Request interface in hooks and server routes
An instance of Request is accessible in hooks and server routes as event.request. It contains useful methods like request.json() and request.formData() for getting data that was posted to an endpoint.
Headers interface for request and response headers
The Headers interface allows you to read incoming request.headers and set outgoing response.headers. You can retrieve specific headers using request.headers.get() and set response headers in the options object passed to response-returning functions.
FormData for HTML form submissions
When dealing with HTML native form submissions, you work with FormData objects. You can access the form data via event.request.formData() in server routes and get individual field values using the get() method.
Stream APIs for large responses
For responses that are too large to fit in memory at once or are delivered in chunks, the platform provides Stream APIs including ReadableStream, WritableStream, and TransformStream.
URL interface in SvelteKit
URLs are represented by the URL interface, which includes useful properties like origin and pathname (and in the browser, hash). The URL interface appears in event.url in hooks and server routes, page.url in pages, from and to in beforeNavigate and afterNavigate, and other places.
URLSearchParams for query parameters
Wherever you encounter a URL, you can access query parameters via url.searchParams, which is an instance of URLSearchParams.
Web Crypto API availability
The Web Crypto API is made available via the crypto global. It is used internally for Content Security Policy headers but can also be used for tasks like generating UUIDs via crypto.randomUUID().
$app/environment module exports
The $app/environment module exports four constants: browser, building, dev, and version. These are imported using: import { browser, building, dev, version } from '$app/environment';
browser constant in $app/environment
The browser constant is a boolean that is true if the app is running in the browser.
building constant in $app/environment
The building constant is a boolean that is true when SvelteKit analyses the app during the build step by running it. This also applies during prerendering.
dev constant in $app/environment
The dev constant is a boolean that indicates whether the dev server is running. It is not guaranteed to correspond to NODE_ENV or MODE.
version constant in $app/environment
The version constant is a string that holds the value of config.kit.version.name.
$app/paths module exports
The $app/paths module exports the following functions and variables: asset, assets, base, match, resolve, and resolveRoute. These are imported from '$app/paths'.
asset function for static directory URLs
The asset function resolves the URL of an asset in the static directory by prefixing it with config.kit.paths.assets if configured, or otherwise with the base path. During server rendering, the base path is relative and depends on the page being rendered. The function signature is: function asset(file: Asset): string. Available since version 2.26.
assets variable deprecated, use asset function
The assets variable is deprecated and should be replaced with the asset() function. The assets variable is an absolute path that matches config.kit.paths.assets with type: '' | `https://${string}` | `http://${string}` | '/_svelte_kit_assets'. If config.kit.paths.assets is specified, it is replaced with '/_svelte_kit_assets' during 'vite dev' or 'vite preview' since assets do not yet live at their eventual URL.
base variable deprecated, use resolve function
The base variable is deprecated and should be replaced with the resolve() function. The base variable is a string that matches config.kit.paths.base with type: '' | `/${string}`. Example usage is <a href="{base}/your-page">Link</a>.
json() creates JSON Response
The json() function creates a JSON Response object from supplied data. It accepts data and optional ResponseInit options. Signature: json(data: any, init?: ResponseInit): Response
text() creates text Response
The text() function creates a Response object from the supplied body string. It accepts body and optional ResponseInit options. Signature: text(body: string, init?: ResponseInit): Response
Cookies.get() method
Cookies.get() retrieves a cookie previously set with cookies.set or from request headers. It accepts name and optional CookieParseOptions. Signature: get(name: string, opts?: import('cookie').CookieParseOptions): string | undefined
Cookies.getAll() method
Cookies.getAll() retrieves all cookies previously set with cookies.set or from request headers. It accepts optional CookieParseOptions and returns an array of { name: string; value: string }. Signature: getAll(opts?: import('cookie').CookieParseOptions): Array<{ name: string; value: string }>
Cookies.set() defaults and requirements
Cookies.set() adds a set-cookie header and makes the cookie available via cookies.get during the current request. httpOnly and secure default to true (except on http://localhost where secure is false). sameSite defaults to lax. The path option is required and should typically be set to '/' for app-wide availability. Signature: set(name: string, value: string, opts: import('cookie').CookieSerializeOptions & { path: string }): void
Cookies.delete() method
Cookies.delete() deletes a cookie by setting its value to empty and setting expiry in the past. The path must match the original cookie's path. Signature: delete(name: string, opts: import('cookie').CookieSerializeOptions & { path: string }): void
Cookies.serialize() method
Cookies.serialize() serializes a cookie name-value pair into a Set-Cookie header string without applying it to the response. httpOnly, secure, and sameSite defaults are the same as set(). Signature: serialize(name: string, value: string, opts: import('cookie').CookieSerializeOptions & { path: string }): string
MaybePromise type definition
MaybePromise<T> is type T | Promise<T>, representing a value that may or may not be wrapped in a Promise.