API โบ @qwik.dev/qwik-city
Action
export type Action<
RETURN,
INPUT = Record<string, unknown>,
OPTIONAL extends boolean = true,
> = {
(): ActionStore<RETURN, INPUT, OPTIONAL>;
};
References: ActionStore
ActionConstructor
export type ActionConstructor = {
<
OBJ extends Record<string, any> | void | null,
VALIDATOR extends TypedDataValidator,
REST extends [DataValidator, ...DataValidator[]],
>(
actionQrl: (
data: GetValidatorOutputType<VALIDATOR>,
event: RequestEventAction,
) => ValueOrPromise<OBJ>,
options: {
readonly id?: string;
readonly validation: [VALIDATOR, ...REST];
},
): Action<
StrictUnion<
| OBJ
| FailReturn<ValidatorErrorType<GetValidatorInputType<VALIDATOR>>>
| FailReturn<FailOfRest<REST>>
>,
GetValidatorInputType<VALIDATOR>,
false
>;
<
OBJ extends Record<string, any> | void | null,
VALIDATOR extends TypedDataValidator,
>(
actionQrl: (
data: GetValidatorOutputType<VALIDATOR>,
event: RequestEventAction,
) => ValueOrPromise<OBJ>,
options: {
readonly id?: string;
readonly validation: [VALIDATOR];
},
): Action<
StrictUnion<
OBJ | FailReturn<ValidatorErrorType<GetValidatorInputType<VALIDATOR>>>
>,
GetValidatorInputType<VALIDATOR>,
false
>;
<
OBJ extends Record<string, any> | void | null,
REST extends [DataValidator, ...DataValidator[]],
>(
actionQrl: (
data: JSONObject,
event: RequestEventAction,
) => ValueOrPromise<OBJ>,
options: {
readonly id?: string;
readonly validation: REST;
},
): Action<StrictUnion<OBJ | FailReturn<FailOfRest<REST>>>>;
<
OBJ extends Record<string, any> | void | null,
VALIDATOR extends TypedDataValidator,
REST extends [DataValidator, ...DataValidator[]],
>(
actionQrl: (
data: GetValidatorOutputType<VALIDATOR>,
event: RequestEventAction,
) => ValueOrPromise<OBJ>,
options: VALIDATOR,
...rest: REST
): Action<
StrictUnion<
| OBJ
| FailReturn<ValidatorErrorType<GetValidatorInputType<VALIDATOR>>>
| FailReturn<FailOfRest<REST>>
>,
GetValidatorInputType<VALIDATOR>,
false
>;
<
OBJ extends Record<string, any> | void | null,
VALIDATOR extends TypedDataValidator,
>(
actionQrl: (
data: GetValidatorOutputType<VALIDATOR>,
event: RequestEventAction,
) => ValueOrPromise<OBJ>,
options: VALIDATOR,
): Action<
StrictUnion<
OBJ | FailReturn<ValidatorErrorType<GetValidatorInputType<VALIDATOR>>>
>,
GetValidatorInputType<VALIDATOR>,
false
>;
<
OBJ extends Record<string, any> | void | null,
REST extends [DataValidator, ...DataValidator[]],
>(
actionQrl: (
form: JSONObject,
event: RequestEventAction,
) => ValueOrPromise<OBJ>,
...rest: REST
): Action<StrictUnion<OBJ | FailReturn<FailOfRest<REST>>>>;
<OBJ>(
actionQrl: (
form: JSONObject,
event: RequestEventAction,
) => ValueOrPromise<OBJ>,
options?: {
readonly id?: string;
},
): Action<StrictUnion<OBJ>>;
};
References: TypedDataValidator, DataValidator, GetValidatorOutputType, Action, StrictUnion, FailReturn, ValidatorErrorType, GetValidatorInputType, FailOfRest, JSONObject
ActionReturn
export type ActionReturn<RETURN> = {
readonly status?: number;
readonly value: RETURN;
};
ActionStore
export type ActionStore<RETURN, INPUT, OPTIONAL extends boolean = true> = {
readonly actionPath: string;
readonly isRunning: boolean;
readonly status?: number;
readonly formData: FormData | undefined;
readonly value: RETURN | undefined;
readonly submit: QRL<
OPTIONAL extends true
? (form?: INPUT | FormData | SubmitEvent) => Promise<ActionReturn<RETURN>>
: (form: INPUT | FormData | SubmitEvent) => Promise<ActionReturn<RETURN>>
>;
readonly submitted: boolean;
};
References: ActionReturn
ContentHeading
export interface ContentHeading
Property
Modifiers
Type
Description
readonly
string
readonly
number
readonly
string
ContentMenu
export interface ContentMenu
Property
Modifiers
Type
Description
readonly
string
(Optional)
readonly
(Optional)
readonly
string
DataValidator
export type DataValidator<T extends Record<string, any> = {}> = {
validate(ev: RequestEvent, data: unknown): Promise<ValidatorReturn<T>>;
};
References: ValidatorReturn
DocumentHead
export type DocumentHead =
| DocumentHeadValue
| ((props: DocumentHeadProps) => DocumentHeadValue);
References: DocumentHeadValue, DocumentHeadProps
DocumentHeadProps
export interface DocumentHeadProps extends RouteLocation
Extends: RouteLocation
Property
Modifiers
Type
Description
readonly
readonly
ResolveSyncValue
readonly
<T>(fn: () => T) => T
DocumentHeadValue
export interface DocumentHeadValue<FrontMatter extends Record<string, any> = Record<string, unknown>>
Property
Modifiers
Type
Description
readonly
Readonly<FrontMatter>
(Optional) Arbitrary object containing custom data. When the document head is created from markdown files, the frontmatter attributes that are not recognized as a well-known meta names (such as title, description, author, etc...), are stored in this property.
readonly
readonly DocumentLink[]
(Optional) Used to manually append <link>
elements to the <head>
.
readonly
readonly DocumentMeta[]
(Optional) Used to manually set meta tags in the head. Additionally, the data
property could be used to set arbitrary data which the <head>
component could later use to generate <meta>
tags.
readonly
readonly DocumentScript[]
(Optional) Used to manually append <script>
elements to the <head>
.
readonly
readonly DocumentStyle[]
(Optional) Used to manually append <style>
elements to the <head>
.
readonly
string
(Optional) Sets document.title
.
DocumentLink
export interface DocumentLink
Property
Modifiers
Type
Description
string
(Optional)
string
(Optional)
boolean
(Optional)
string
(Optional)
string
(Optional)
string
(Optional)
string
(Optional)
string
(Optional)
string
(Optional)
string
(Optional)
string
(Optional)
string
(Optional)
string
(Optional)
string
(Optional)
string
(Optional)
string
(Optional)
string
(Optional)
DocumentMeta
export interface DocumentMeta
Property
Modifiers
Type
Description
readonly
string
(Optional)
readonly
string
(Optional)
readonly
string
(Optional)
readonly
string
(Optional)
readonly
string
(Optional)
readonly
string
(Optional)
readonly
string
(Optional)
DocumentScript
This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
export interface DocumentScript
Property
Modifiers
Type
Description
readonly
string
(ALPHA) (Optional)
readonly
Readonly<QwikIntrinsicElements['script']>
(ALPHA) (Optional)
readonly
string
(ALPHA) (Optional)
DocumentStyle
export interface DocumentStyle
Property
Modifiers
Type
Description
readonly
string
(Optional)
readonly
Readonly<QwikIntrinsicElements['style']>
(Optional)
readonly
string
FailOfRest
export type FailOfRest<REST extends readonly DataValidator[]> =
REST extends readonly DataValidator<infer ERROR>[] ? ERROR : never;
References: DataValidator
FailReturn
export type FailReturn<T> = T & Failed;
Form
Form: <O, I>(
{ action, spaReset, reloadDocument, onSubmit$, ...rest }: FormProps<O, I>,
key: string | null,
) => import("@qwik.dev/core").JSXOutput;
Parameter
Type
Description
{ action, spaReset, reloadDocument, onSubmit$, ...rest }
FormProps<O, I>
key
string | null
import("@qwik.dev/core").JSXOutput
FormProps
export interface FormProps<O, I> extends Omit<QwikJSX.IntrinsicElements['form'], 'action' | 'method'>
Extends: Omit<QwikJSX.IntrinsicElements['form'], 'action' | 'method'>
Property
Modifiers
Type
Description
ActionStore<O, I, true | false>
(Optional) Reference to the action returned by action()
.
string | number | null
(Optional)
QRLEventHandlerMulti<SubmitEvent, HTMLFormElement> | undefined
(Optional) Event handler executed right when the form is submitted.
QRLEventHandlerMulti<CustomEvent<FormSubmitCompletedDetail<O>>, HTMLFormElement> | undefined
(Optional) Event handler executed right after the action is executed successfully and returns some data.
boolean
(Optional) When true
the form submission will cause a full page reload, even if SPA mode is enabled and JS is available.
boolean
(Optional) When true
all the form inputs will be reset in SPA mode, just like happens in a full page form submission.
Defaults to false
FormSubmitSuccessDetail
export interface FormSubmitCompletedDetail<T>
Property
Modifiers
Type
Description
number
T
GetValidatorInputType
export type GetValidatorInputType<VALIDATOR extends TypedDataValidator> =
VALIDATOR extends ValibotDataValidator<infer TYPE>
? v.InferInput<TYPE>
: VALIDATOR extends ZodDataValidator<infer TYPE>
? z.input<TYPE>
: never;
References: TypedDataValidator
GetValidatorOutputType
export type GetValidatorOutputType<VALIDATOR extends TypedDataValidator> =
VALIDATOR extends ValibotDataValidator<infer TYPE>
? v.InferOutput<TYPE>
: VALIDATOR extends ZodDataValidator<infer TYPE>
? z.output<TYPE>
: never;
References: TypedDataValidator
GetValidatorType
export type GetValidatorType<VALIDATOR extends TypedDataValidator> =
GetValidatorOutputType<VALIDATOR>;
References: TypedDataValidator, GetValidatorOutputType
globalAction$
globalAction$: ActionConstructor;
globalActionQrl
globalActionQrl: ActionConstructorQRL;
JSONObject
export type JSONObject = {
[x: string]: JSONValue;
};
References: JSONValue
JSONValue
export type JSONValue =
| string
| number
| boolean
| {
[x: string]: JSONValue;
}
| Array<JSONValue>;
References: JSONValue
Link
Link: import("@qwik.dev/core").Component<LinkProps>;
LinkProps
export interface LinkProps extends AnchorAttributes
Extends: AnchorAttributes
Property
Modifiers
Type
Description
boolean | 'js'
(Optional) **Defaults to _true_.**
Whether Qwik should prefetch and cache the target page of this **Link
**, this includes invoking any **routeLoader$
**, **onGet
**, etc.
This **improves UX performance** for client-side (**SPA**) navigations.
Prefetching occurs when a the Link enters the viewport in production (**on:qvisibile
**), or with **mouseover
/focus
** during dev.
Prefetching will not occur if the user has the **data saver** setting enabled.
Setting this value to **"js"
** will prefetch only javascript bundles required to render this page on the client, **false
** will disable prefetching altogether.
boolean
(Optional)
boolean
(Optional)
boolean
(Optional)
Loader_2
export type Loader<RETURN> = {
(): LoaderSignal<RETURN>;
};
References: LoaderSignal
LoaderSignal
export type LoaderSignal<TYPE> = TYPE extends () => ValueOrPromise<
infer VALIDATOR
>
? ReadonlySignal<ValueOrPromise<VALIDATOR>>
: ReadonlySignal<TYPE>;
MenuData
export type MenuData = [pathname: string, menuLoader: MenuModuleLoader];
NavigationType
export type NavigationType = "initial" | "form" | "link" | "popstate";
omitProps
This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
Creates a new object from obj
by omitting a set of keys
.
export declare function omitProps<T, KEYS extends keyof T>(
obj: T,
keys: KEYS[],
): Omit<T, KEYS>;
Parameter
Type
Description
obj
T
keys
KEYS[]
Omit<T, KEYS>
PageModule
export interface PageModule extends RouteModule
Extends: RouteModule
Property
Modifiers
Type
Description
readonly
unknown
readonly
ContentModuleHead
(Optional)
readonly
(Optional)
readonly
(Optional)
PathParams
export declare type PathParams = Record<string, string>;
PreventNavigateCallback
export type PreventNavigateCallback = (
url?: number | URL,
) => ValueOrPromise<boolean>;
QWIK_CITY_SCROLLER
QWIK_CITY_SCROLLER = "_qCityScroller";
QwikCityMockProps
export interface QwikCityMockProps
Property
Modifiers
Type
Description
(Optional)
Record<string, string>
(Optional)
string
(Optional)
QwikCityMockProvider
QwikCityMockProvider: import("@qwik.dev/core").Component<QwikCityMockProps>;
QwikCityPlan
export interface QwikCityPlan
Property
Modifiers
Type
Description
readonly
string
(Optional)
readonly
boolean
(Optional)
readonly
MenuData[]
(Optional)
readonly
readonly
RouteModule[]
(Optional)
readonly
boolean
(Optional)
QwikCityProps
export interface QwikCityProps
Property
Modifiers
Type
Description
boolean
(Optional) Enable the ViewTransition API
Default: true
QwikCityProvider
QwikCityProvider: import("@qwik.dev/core").Component<QwikCityProps>;
ResolvedDocumentHead
export type ResolvedDocumentHead<
FrontMatter extends Record<string, any> = Record<string, unknown>,
> = Required<DocumentHeadValue<FrontMatter>>;
References: DocumentHeadValue
routeAction$
routeAction$: ActionConstructor;
routeActionQrl
routeActionQrl: ActionConstructorQRL;
RouteData
export type RouteData =
| [routeName: string, loaders: ModuleLoader[]]
| [
routeName: string,
loaders: ModuleLoader[],
originalPathname: string,
routeBundleNames: string[],
];
routeLoader$
routeLoader$: LoaderConstructor;
routeLoaderQrl
routeLoaderQrl: LoaderConstructorQRL;
RouteLocation
export interface RouteLocation
Property
Modifiers
Type
Description
readonly
boolean
readonly
Readonly<Record<string, string>>
readonly
URL | undefined
readonly
URL
RouteNavigate
export type RouteNavigate = QRL<
(
path?: string | number | URL,
options?:
| {
type?: Exclude<NavigationType, "initial">;
forceReload?: boolean;
replaceState?: boolean;
scroll?: boolean;
}
| boolean,
) => Promise<void>
>;
References: NavigationType
RouterOutlet
RouterOutlet: import("@qwik.dev/core").Component<unknown>;
server$
server$: <T extends ServerFunction>(
qrl: T,
options?: ServerConfig | undefined,
) => ServerQRL<T>;
Parameter
Type
Description
qrl
T
options
ServerConfig | undefined
(Optional)
ServerQRL<T>
ServerFunction
export type ServerFunction = {
(this: RequestEventBase, ...args: any[]): any;
options?: ServerConfig;
};
serverQrl
You can pass an AbortSignal as the first argument of a server$
function and it will use it to abort the fetch when fired.
export type ServerQRL<T extends ServerFunction> = QRL<
| ((abort: AbortSignal, ...args: Parameters<T>) => ReturnType<T>)
| ((...args: Parameters<T>) => ReturnType<T>)
>;
References: ServerFunction
ServerQRL
You can pass an AbortSignal as the first argument of a server$
function and it will use it to abort the fetch when fired.
export type ServerQRL<T extends ServerFunction> = QRL<
| ((abort: AbortSignal, ...args: Parameters<T>) => ReturnType<T>)
| ((...args: Parameters<T>) => ReturnType<T>)
>;
References: ServerFunction
ServiceWorkerRegister
ServiceWorkerRegister: (props: { nonce?: string }) =>
import("@qwik.dev/core").JSXNode<"script">;
Parameter
Type
Description
props
{ nonce?: string; }
import("@qwik.dev/core").JSXNode<"script">
StaticGenerate
export interface StaticGenerate
Property
Modifiers
Type
Description
(Optional)
StaticGenerateHandler
export type StaticGenerateHandler = ({
env,
}: {
env: EnvGetter;
}) => Promise<StaticGenerate> | StaticGenerate;
References: StaticGenerate
StrictUnion
export type StrictUnion<T> = Prettify<StrictUnionHelper<T, T>>;
TypedDataValidator
export type TypedDataValidator = ValibotDataValidator | ZodDataValidator;
untypedAppUrl
This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
untypedAppUrl: (
route: string,
params?: Record<string, string>,
paramsPrefix?: string,
) => string;
Parameter
Type
Description
route
string
params
Record<string, string>
(Optional)
paramsPrefix
string
(Optional)
string
useContent
useContent: () => import("./types").ContentState;
Returns:
import("./types").ContentState
useDocumentHead
Returns the document head for the current page. The generic type describes the front matter.
useDocumentHead: <
FrontMatter extends Record<string, unknown> = Record<string, any>,
>() => Required<ResolvedDocumentHead<FrontMatter>>;
Returns:
Required<ResolvedDocumentHead<FrontMatter>>
useLocation
useLocation: () => RouteLocation;
Returns:
useNavigate
useNavigate: () => RouteNavigate;
Returns:
usePreventNavigate$
Prevent navigation attempts. This hook registers a callback that will be called before SPA or browser navigation.
Return true
to prevent navigation.
#### SPA Navigation
For Single-Page-App (SPA) navigation (via <Link />
, const nav = useNavigate()
, and browser backwards/forwards inside SPA history), the callback will be provided with the target, either a URL or a number. It will only be a number if nav(number)
was called to navigate forwards or backwards in SPA history.
If you return a Promise, the navigation will be blocked until the promise resolves.
This can be used to show a nice dialog to the user, and wait for the user to confirm, or to record the url, prevent the navigation, and navigate there later via nav(url)
.
#### Browser Navigation
However, when the user navigates away by clicking on a regular <a />
, reloading, or moving backwards/forwards outside SPA history, this callback will not be awaited. This is because the browser does not provide a way to asynchronously prevent these navigations.
In this case, returning returning true
will tell the browser to show a confirmation dialog, which cannot be customized. You are also not able to show your own window.confirm()
dialog during the callback, the browser won't allow it. If you return a Promise, it will be considered as true
.
When the callback is called from the browser, no url will be provided. Use this to know whether you can show a dialog or just return true
to prevent the navigation.
usePreventNavigate$: (qrl: PreventNavigateCallback) => void
Parameter
Type
Description
qrl
void
valibot$
This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
valibot$: ValibotConstructor;
valibotQrl
This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
valibotQrl: ValibotConstructorQRL;
validator$
validator$: ValidatorConstructor;
ValidatorErrorKeyDotNotation
export type ValidatorErrorKeyDotNotation<T, Prefix extends string = ""> =
IsAny<T> extends true
? never
: T extends object
? {
[K in keyof T & string]: IsAny<T[K]> extends true
? never
: T[K] extends (infer U)[]
? IsAny<U> extends true
? never
: U extends object
?
| `${Prefix}${K}[]`
| ValidatorErrorKeyDotNotation<U, `${Prefix}${K}[].`>
: `${Prefix}${K}[]`
: T[K] extends object
? ValidatorErrorKeyDotNotation<T[K], `${Prefix}${K}.`>
: `${Prefix}${K}`;
}[keyof T & string]
: never;
References: ValidatorErrorKeyDotNotation
ValidatorErrorType
export type ValidatorErrorType<T, U = string> = {
formErrors: U[];
fieldErrors: Partial<{
[K in ValidatorErrorKeyDotNotation<T>]: K extends `${infer _Prefix}[]${infer _Suffix}`
? U[]
: U;
}>;
};
References: ValidatorErrorKeyDotNotation
validatorQrl
validatorQrl: ValidatorConstructorQRL;
ValidatorReturn
export type ValidatorReturn<T extends Record<string, any> = {}> =
| ValidatorReturnSuccess
| ValidatorReturnFail<T>;
zod$
zod$: ZodConstructor;
ZodConstructor
export type ZodConstructor = {
<T extends z.ZodRawShape>(schema: T): ZodDataValidator<z.ZodObject<T>>;
<T extends z.ZodRawShape>(
schema: (zod: typeof z.z, ev: RequestEvent) => T,
): ZodDataValidator<z.ZodObject<T>>;
<T extends z.Schema>(schema: T): ZodDataValidator<T>;
<T extends z.Schema>(
schema: (zod: typeof z.z, ev: RequestEvent) => T,
): ZodDataValidator<T>;
};
zodQrl
zodQrl: ZodConstructorQRL;