createServerAction$

`createServerAction$` creates a controller for managing the submissions of an async user action, where the action always runs on the server.

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(parameter) args: void => {
  // 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(parameter) args: void => {
  // do something
});

Usage
Creating a Progressively Enhanced Form
Reference

Usage

Creating a Progressively Enhanced Form

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 &quot;302 Found&quot;.

(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 &quot;multipart/form-data&quot;.

interface FormData, { request(parameter) request: Request }) => {
    const subjectconst subject: string = 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(property) id: number,
        subject(property) subject: string
      }
    });
    return redirectA redirect response. Sets the status code and the `Location` header.
Defaults to &quot;302 Found&quot;.

(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?: &quot;button&quot; | &quot;submit&quot; | &quot;reset&quot; | 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 &quot;302 Found&quot;.

(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 &quot;multipart/form-data&quot;.

interface FormData, { request(parameter) request: Request }) => {
    const subjectconst subject: string = 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(property) id: number,
        subject(property) subject: string
      }
    });
    return redirectA redirect response. Sets the status code and the `Location` header.
Defaults to &quot;302 Found&quot;.

(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?: &quot;button&quot; | &quot;submit&quot; | &quot;reset&quot; | 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>>
  );
}

We return a redirect to tell the browser where to go upon successful submission. This is important as if this request came in without JavaScript available it would need to do a full page navigation. When JavaScript is enabled we simply invalidate all route data or the key specified by the action that spawned the <Form />.

Reference

Refer to createRouteAction for API reference.

Note: createServerAction$ does not work when application is configured to ssr: false

createServerAction$

createServerAction$ creates a controller for managing the submissions of an async user action, where the action always runs on the server.

Usage

Creating a Progressively Enhanced Form

Reference

`createServerAction$` creates a controller for managing the submissions of an async user action, where the action always runs on the server.