tsx
const [actingconst acting: {
pending: boolean;
input?: void | undefined;
result?: void | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
, actconst act: ((vars: void) => Promise<void | undefined>) & {
Form: ParentComponent<void | FormProps>;
url: string;
}
] = createServerAction$(alias) createServerAction$<void, void>(fn: (arg1: void, event: ActionEvent) => Promise<void>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteAction<void, void> (+1 overload)
import createServerAction$
(async args => { // do something
});
tsx
const [actingconst acting: {
pending: boolean;
input?: void | undefined;
result?: void | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
, actconst act: ((vars: void) => Promise<void | undefined>) & {
Form: ParentComponent<void | FormProps>;
url: string;
}
] = createServerAction$(alias) createServerAction$<void, void>(fn: (arg1: void, event: ActionEvent) => Promise<void>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteAction<void, void> (+1 overload)
import createServerAction$
(async args => { // do something
});
One of the benefits of running actions only on the server is we can create progressively enhanced forms that work when JavaScript is disabled or unavailable. To accomplish this we need to pass information to our backend using form elements like <input>
. Any data need to be sent that end users don't enter can be added with an <input>
with type="hidden"
.
tsx
import { createServerAction$(alias) const createServerAction$: {
<T = void, U = void>(fn: (arg1: void, event: ActionEvent) => Promise<U>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteAction<T, U>;
<T, U = void>(fn: (args: T, event: ActionEvent) => Promise<...>, options?: {
...;
} | undefined): RouteAction<...>;
}
import createServerAction$
, redirectA redirect response. Sets the status code and the `Location` header.
Defaults to "302 Found".
(alias) function redirect(url: string, init?: number | ResponseInit): Response
import redirect
} from "solid-start/server";
function EnrollmentPagefunction EnrollmentPage(): JSX.Element
() { const [enrollingconst enrolling: {
pending: boolean;
input?: FormData | undefined;
result?: Response | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
, { Formconst Form: ParentComponent<FormData | FormProps>
}] = createServerAction$(alias) createServerAction$<FormData, Response>(fn: (args: FormData, event: ActionEvent) => Promise<Response>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteAction<...> (+1 overload)
import createServerAction$
(async (form(parameter) form: FormData
: FormDataProvides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest.send() method. It uses the same format a form would use if the encoding type were set to "multipart/form-data".
interface FormData
, { request(parameter) request: Request
}) => { const subject = form(parameter) form: FormData
.get(method) FormData.get(name: string): FormDataEntryValue | null
("subject") as string; const userconst user: {
id: number;
}
= await getLoggedInUserfunction getLoggedInUser(request: Request): {
id: number;
}
(request(parameter) request: Request
); await prismaconst prisma: {
enrollment: {
create(arg: {
data: {
userId: number;
subject: string;
};
}): void;
};
}
.enrollment(property) enrollment: {
create(arg: {
data: {
userId: number;
subject: string;
};
}): void;
}
.create(method) create(arg: {
data: {
userId: number;
subject: string;
};
}): void
({ data(property) data: {
userId: number;
subject: string;
}
: { userId(property) userId: number
: userconst user: {
id: number;
}
.id, subject(property) subject: string
}
});
return redirectA redirect response. Sets the status code and the `Location` header.
Defaults to "302 Found".
(alias) redirect(url: string, init?: number | ResponseInit): Response
import redirect
("/enrollment"); });
return (
<Formconst Form: ParentComponent<FormData | FormProps>
> <input(property) JSX.HTMLElementTags.input: JSX.InputHTMLAttributes<HTMLInputElement>
type(property) JSX.InputHTMLAttributes<HTMLInputElement>.type?: string | undefined
="hidden" name(property) JSX.InputHTMLAttributes<HTMLInputElement>.name?: string | undefined
="subject" value(property) JSX.InputHTMLAttributes<HTMLInputElement>.value?: string | number | string[] | undefined
="Defense against the Dark Arts" /> <button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
type(property) JSX.ButtonHTMLAttributes<HTMLButtonElement>.type?: "button" | "submit" | "reset" | undefined
="submit" disabled(property) JSX.ButtonHTMLAttributes<HTMLButtonElement>.disabled?: boolean | undefined
={enrollingconst enrolling: {
pending: boolean;
input?: FormData | undefined;
result?: Response | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.pending(property) pending: boolean
}> Enroll
</button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
> </Formconst Form: ParentComponent<FormData | FormProps>
> );
}
tsx
import { createServerAction$(alias) const createServerAction$: {
<T = void, U = void>(fn: (arg1: void, event: ActionEvent) => Promise<U>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteAction<T, U>;
<T, U = void>(fn: (args: T, event: ActionEvent) => Promise<...>, options?: {
...;
} | undefined): RouteAction<...>;
}
import createServerAction$
, redirectA redirect response. Sets the status code and the `Location` header.
Defaults to "302 Found".
(alias) function redirect(url: string, init?: number | ResponseInit): Response
import redirect
} from "solid-start/server";
function EnrollmentPagefunction EnrollmentPage(): JSX.Element
() { const [enrollingconst enrolling: {
pending: boolean;
input?: FormData | undefined;
result?: Response | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
, { Formconst Form: ParentComponent<FormData | FormProps>
}] = createServerAction$(alias) createServerAction$<FormData, Response>(fn: (args: FormData, event: ActionEvent) => Promise<Response>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteAction<...> (+1 overload)
import createServerAction$
(async (form(parameter) form: FormData
: FormDataProvides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest.send() method. It uses the same format a form would use if the encoding type were set to "multipart/form-data".
interface FormData
, { request(parameter) request: Request
}) => { const subject = form(parameter) form: FormData
.get(method) FormData.get(name: string): FormDataEntryValue | null
("subject") as string; const userconst user: {
id: number;
}
= await getLoggedInUserfunction getLoggedInUser(request: Request): {
id: number;
}
(request(parameter) request: Request
); await prismaconst prisma: {
enrollment: {
create(arg: {
data: {
userId: number;
subject: string;
};
}): void;
};
}
.enrollment(property) enrollment: {
create(arg: {
data: {
userId: number;
subject: string;
};
}): void;
}
.create(method) create(arg: {
data: {
userId: number;
subject: string;
};
}): void
({ data(property) data: {
userId: number;
subject: string;
}
: { userId(property) userId: number
: userconst user: {
id: number;
}
.id, subject(property) subject: string
}
});
return redirectA redirect response. Sets the status code and the `Location` header.
Defaults to "302 Found".
(alias) redirect(url: string, init?: number | ResponseInit): Response
import redirect
("/enrollment"); });
return (
<Formconst Form: ParentComponent<FormData | FormProps>
> <input(property) JSX.HTMLElementTags.input: JSX.InputHTMLAttributes<HTMLInputElement>
type(property) JSX.InputHTMLAttributes<HTMLInputElement>.type?: string | undefined
="hidden" name(property) JSX.InputHTMLAttributes<HTMLInputElement>.name?: string | undefined
="subject" value(property) JSX.InputHTMLAttributes<HTMLInputElement>.value?: string | number | string[] | undefined
="Defense against the Dark Arts" /> <button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
type(property) JSX.ButtonHTMLAttributes<HTMLButtonElement>.type?: "button" | "submit" | "reset" | undefined
="submit" disabled(property) JSX.ButtonHTMLAttributes<HTMLButtonElement>.disabled?: boolean | undefined
={enrollingconst enrolling: {
pending: boolean;
input?: FormData | undefined;
result?: Response | undefined;
error?: any;
clear: () => void;
retry: () => void;
}
.pending(property) pending: boolean
}> Enroll
</button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
> </Formconst Form: ParentComponent<FormData | FormProps>
> );
}