createRouteMultiAction
createRouteMultiAction
creates a controller for dispatching and managing multiple simultaneous submissions of an async user action.
tsx
const [sendingconst sending: Submission<string, void>[] & {
pending: Submission<string, void>[];
}
, sendconst send: ((vars: string) => Promise<void>) & {
Form: never;
url: string;
}
] = createRouteMultiAction(alias) createRouteMultiAction<string, void>(fn: (args: string, event: ActionEvent) => Promise<void>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteMultiAction<string, void> (+1 overload)
import createRouteMultiAction
(sendMessagefunction sendMessage(message: string): Promise<void>
);
tsx
const [sendingconst sending: Submission<string, void>[] & {
pending: Submission<string, void>[];
}
, sendconst send: ((vars: string) => Promise<void>) & {
Form: never;
url: string;
}
] = createRouteMultiAction(alias) createRouteMultiAction<string, void>(fn: (args: string, event: ActionEvent) => Promise<void>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteMultiAction<string, void> (+1 overload)
import createRouteMultiAction
(sendMessagefunction sendMessage(message: string): Promise<void>
);
Usage
Track multiple submissions of an action simultaneously
Imagine a chat application, where the user is furiously typing and entering messages. How would we track this? We can't use createRouteAction
because it always ignores a previous submission when it gets a new one. createRouteMultiAction
allows us to track multiple submissions for the same action.
tsx
import { createRouteMultiAction(alias) function createRouteMultiAction<T = void, U = void>(fn: (arg1: void, event: ActionEvent) => Promise<U>, options?: {
invalidate?: Invalidate;
}): RouteMultiAction<T, U> (+1 overload)
import createRouteMultiAction
} from 'solid-start';
function Componentfunction Component(): JSX.Element
() { const [sendingconst sending: Submission<string, void>[] & {
pending: Submission<string, void>[];
}
, sendconst send: ((vars: string) => Promise<void>) & {
Form: never;
url: string;
}
] = createRouteMultiAction(alias) createRouteMultiAction<string, void>(fn: (args: string, event: ActionEvent) => Promise<void>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteMultiAction<string, void> (+1 overload)
import createRouteMultiAction
(sendMessagefunction sendMessage(message: string): Promise<void>
);
return (
<div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> <button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
onClick(property) JSX.CustomEventHandlersCamelCase<HTMLButtonElement>.onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> | undefined
={() => sendconst send: (vars: string) => Promise<void>
('Hello World')}>Send</button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
> </div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> );
}
tsx
import { createRouteMultiAction(alias) function createRouteMultiAction<T = void, U = void>(fn: (arg1: void, event: ActionEvent) => Promise<U>, options?: {
invalidate?: Invalidate;
}): RouteMultiAction<T, U> (+1 overload)
import createRouteMultiAction
} from 'solid-start';
function Componentfunction Component(): JSX.Element
() { const [sendingconst sending: Submission<string, void>[] & {
pending: Submission<string, void>[];
}
, sendconst send: ((vars: string) => Promise<void>) & {
Form: never;
url: string;
}
] = createRouteMultiAction(alias) createRouteMultiAction<string, void>(fn: (args: string, event: ActionEvent) => Promise<void>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteMultiAction<string, void> (+1 overload)
import createRouteMultiAction
(sendMessagefunction sendMessage(message: string): Promise<void>
);
return (
<div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> <button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
onClick(property) JSX.CustomEventHandlersCamelCase<HTMLButtonElement>.onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> | undefined
={() => sendconst send: (vars: string) => Promise<void>
('Hello World')}>Send</button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
> </div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> );
}
Here sending
is an array of all the submissions. Each submission has its input
and a pending
property that we can use to show a pending indicator or optimistic UI. Each submission also has its own error
property that we can use to show an error message. They have their own retry()
and clear()
methods as well.
Refetching data after an action
You don't have to do anything more to have your createRouteData
functions refetch data after an action. The createRouteData
functions will automatically refetch data after an action is performed.
Invalidating specific data after an action
If you don't want to refetch all the data, you can use the invalidate
param to specify which key
's to invalidate. This way you only refetch what you know has changed.
Optimistic UI
Now, since we have Javascript in our hands, we can give the user a more enhanced experience. Sometimes this means pretending an action was successful to provide a more response user experience. This is called an optimistic UI. We can do this in a neat way where you don't need to manage extra state. You have access to the input
on the submission, so you know what data was sent to the action.
Using the pending
property, you can use the input
as part of the visible UI. For example, in a list of enrolled classes, you can add the class to the list before the action is complete. Then, if the action fails, you can remove the class from the list.
Show a pending indicator for an action in progress
We want to show a pending status while the action is being performed. The submission has a pending
property that we can use to show a pending indicator.
tsx
import { createRouteMultiAction(alias) function createRouteMultiAction<T = void, U = void>(fn: (arg1: void, event: ActionEvent) => Promise<U>, options?: {
invalidate?: Invalidate;
}): RouteMultiAction<T, U> (+1 overload)
import createRouteMultiAction
, createRouteData(alias) function createRouteData<T, S = true>(fetcher: RouteDataFetcher<S, T>, options?: RouteDataOptions<undefined, S>): Resource<T | undefined> (+1 overload)
import createRouteData
} from 'solid-start'; import { Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): Accessor<U[]>
import For
} from 'solid-js';
export default function EnrollmentPagefunction EnrollmentPage(): JSX.Element
() { const messagesconst messages: Resource<{
text: string;
}[] | undefined>
= createRouteData(alias) createRouteData<{
text: string;
}[], string>(fetcher: RouteDataFetcher<string, {
text: string;
}[]>, options?: RouteDataOptions<undefined, string> | undefined): Resource<...> (+1 overload)
import createRouteData
(getMessagesfunction getMessages(): Promise<{
text: string;
}[]>
, { key(property) key?: RouteDataSource<string>
: 'chat' }); const [sendingconst sending: Submission<string, void>[] & {
pending: Submission<string, void>[];
}
, sendconst send: ((vars: string) => Promise<void>) & {
Form: never;
url: string;
}
] = createRouteMultiAction(alias) createRouteMultiAction<string, void>(fn: (args: string, event: ActionEvent) => Promise<void>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteMultiAction<string, void> (+1 overload)
import createRouteMultiAction
( sendMessagefunction sendMessage(message: string): Promise<void>
, { invalidate(property) invalidate?: Invalidate | undefined
: ['chat'] } );
return (
<div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> <ul(property) JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>
> <Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): Accessor<U[]>
import For
each(property) each: false | {
text: string;
}[] | null | undefined
={messagesconst messages: () => {
text: string;
}[] | undefined
()}> {msg(parameter) msg: {
text: string;
}
=> <li(property) JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>
>{msg(parameter) msg: {
text: string;
}
.text}</li(property) JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>
>} </Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): Accessor<U[]>
import For
> <Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): Accessor<U[]>
import For
each(property) each: false | (Submission<string, void>[] & {
pending: Submission<string, void>[];
}) | null | undefined
={sendingconst sending: Submission<string, void>[] & {
pending: Submission<string, void>[];
}
}> {msg(parameter) msg: Submission<string, void>
=> <li(property) JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>
class(property) JSX.HTMLAttributes<HTMLLIElement>.class?: string | undefined
="pending">{msg(parameter) msg: Submission<string, void>
.input(property) Submission<string, void>.input: string
}</li(property) JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>
>} </Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): Accessor<U[]>
import For
> </ul(property) JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>
> <button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
onClick(property) JSX.CustomEventHandlersCamelCase<HTMLButtonElement>.onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> | undefined
={() => sendconst send: (vars: string) => Promise<void>
('Hello World')}>Send</button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
> </div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> );
}
tsx
import { createRouteMultiAction(alias) function createRouteMultiAction<T = void, U = void>(fn: (arg1: void, event: ActionEvent) => Promise<U>, options?: {
invalidate?: Invalidate;
}): RouteMultiAction<T, U> (+1 overload)
import createRouteMultiAction
, createRouteData(alias) function createRouteData<T, S = true>(fetcher: RouteDataFetcher<S, T>, options?: RouteDataOptions<undefined, S>): Resource<T | undefined> (+1 overload)
import createRouteData
} from 'solid-start'; import { Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): Accessor<U[]>
import For
} from 'solid-js';
export default function EnrollmentPagefunction EnrollmentPage(): JSX.Element
() { const messagesconst messages: Resource<{
text: string;
}[] | undefined>
= createRouteData(alias) createRouteData<{
text: string;
}[], string>(fetcher: RouteDataFetcher<string, {
text: string;
}[]>, options?: RouteDataOptions<undefined, string> | undefined): Resource<...> (+1 overload)
import createRouteData
(getMessagesfunction getMessages(): Promise<{
text: string;
}[]>
, { key(property) key?: RouteDataSource<string>
: 'chat' }); const [sendingconst sending: Submission<string, void>[] & {
pending: Submission<string, void>[];
}
, sendconst send: ((vars: string) => Promise<void>) & {
Form: never;
url: string;
}
] = createRouteMultiAction(alias) createRouteMultiAction<string, void>(fn: (args: string, event: ActionEvent) => Promise<void>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteMultiAction<string, void> (+1 overload)
import createRouteMultiAction
( sendMessagefunction sendMessage(message: string): Promise<void>
, { invalidate(property) invalidate?: Invalidate | undefined
: ['chat'] } );
return (
<div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> <ul(property) JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>
> <Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): Accessor<U[]>
import For
each(property) each: false | {
text: string;
}[] | null | undefined
={messagesconst messages: () => {
text: string;
}[] | undefined
()}> {msg(parameter) msg: {
text: string;
}
=> <li(property) JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>
>{msg(parameter) msg: {
text: string;
}
.text}</li(property) JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>
>} </Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): Accessor<U[]>
import For
> <Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): Accessor<U[]>
import For
each(property) each: false | (Submission<string, void>[] & {
pending: Submission<string, void>[];
}) | null | undefined
={sendingconst sending: Submission<string, void>[] & {
pending: Submission<string, void>[];
}
}> {msg(parameter) msg: Submission<string, void>
=> <li(property) JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>
class(property) JSX.HTMLAttributes<HTMLLIElement>.class?: string | undefined
="pending">{msg(parameter) msg: Submission<string, void>
.input(property) Submission<string, void>.input: string
}</li(property) JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>
>} </Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): Accessor<U[]>
import For
> </ul(property) JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>
> <button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
onClick(property) JSX.CustomEventHandlersCamelCase<HTMLButtonElement>.onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> | undefined
={() => sendconst send: (vars: string) => Promise<void>
('Hello World')}>Send</button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
> </div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> );
}
Handle errors
If an error occurs, each submission will have an error
property. We can use this to show an error message.
routes/enrollment.tsx
tsx
import { createRouteMultiAction(alias) function createRouteMultiAction<T = void, U = void>(fn: (arg1: void, event: ActionEvent) => Promise<U>, options?: {
invalidate?: Invalidate;
}): RouteMultiAction<T, U> (+1 overload)
import createRouteMultiAction
, createRouteData(alias) function createRouteData<T, S = true>(fetcher: RouteDataFetcher<S, T>, options?: RouteDataOptions<undefined, S>): Resource<T | undefined> (+1 overload)
import createRouteData
} from 'solid-start'; import { Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): Accessor<U[]>
import For
, ShowConditionally render its children or an optional fallback component
(alias) function Show<T>(props: {
when: T | undefined | null | false;
keyed: true;
fallback?: JSX.Element;
children: JSX.Element | ((item: NonNullable<T>) => JSX.Element);
}): () => JSX.Element (+1 overload)
import Show
} from 'solid-js';
export default function EnrollmentPagefunction EnrollmentPage(): JSX.Element
() { const messagesconst messages: Resource<{
text: string;
}[] | undefined>
= createRouteData(alias) createRouteData<{
text: string;
}[], string>(fetcher: RouteDataFetcher<string, {
text: string;
}[]>, options?: RouteDataOptions<undefined, string> | undefined): Resource<...> (+1 overload)
import createRouteData
(getMessagesfunction getMessages(): Promise<{
text: string;
}[]>
, { key(property) key?: RouteDataSource<string>
: 'chat' }); const [sendingconst sending: Submission<string, void>[] & {
pending: Submission<string, void>[];
}
, sendconst send: ((vars: string) => Promise<void>) & {
Form: never;
url: string;
}
] = createRouteMultiAction(alias) createRouteMultiAction<string, void>(fn: (args: string, event: ActionEvent) => Promise<void>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteMultiAction<string, void> (+1 overload)
import createRouteMultiAction
( sendMessagefunction sendMessage(message: string): Promise<void>
, { invalidate(property) invalidate?: Invalidate | undefined
: ['chat'] } );
return (
<div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> <ul(property) JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>
> <Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): Accessor<U[]>
import For
each(property) each: false | {
text: string;
}[] | null | undefined
={messagesconst messages: () => {
text: string;
}[] | undefined
()}> {msg(parameter) msg: {
text: string;
}
=> <li(property) JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>
>{msg(parameter) msg: {
text: string;
}
.text}</li(property) JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>
>} </Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): Accessor<U[]>
import For
> <Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): Accessor<U[]>
import For
each(property) each: false | (Submission<string, void>[] & {
pending: Submission<string, void>[];
}) | null | undefined
={sendingconst sending: Submission<string, void>[] & {
pending: Submission<string, void>[];
}
}> {msg(parameter) msg: Submission<string, void>
=> ( <li(property) JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>
> <span(property) JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>
class(property) JSX.HTMLAttributes<HTMLSpanElement>.class?: string | undefined
="pending">{msg(parameter) msg: Submission<string, void>
.input(property) Submission<string, void>.input: string
}</span(property) JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>
> <ShowConditionally render its children or an optional fallback component
(alias) function Show<T>(props: {
when: T | undefined | null | false;
keyed: true;
fallback?: JSX.Element;
children: JSX.Element | ((item: NonNullable<T>) => JSX.Element);
}): () => JSX.Element (+1 overload)
import Show
when={msg(parameter) msg: Submission<string, void>
.error(property) Submission<string, void>.error?: any
}> <span(property) JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>
class(property) JSX.HTMLAttributes<HTMLSpanElement>.class?: string | undefined
="error">{msg(parameter) msg: Submission<string, void>
.error(property) Submission<string, void>.error?: any
.message}</span(property) JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>
> <button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
onClick(property) JSX.CustomEventHandlersCamelCase<HTMLButtonElement>.onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> | undefined
={() => msg(parameter) msg: Submission<string, void>
.retry(property) Submission<string, void>.retry: () => void
()}>Retry</button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
> </ShowConditionally render its children or an optional fallback component
(alias) function Show<T>(props: {
when: T | undefined | null | false;
keyed: true;
fallback?: JSX.Element;
children: JSX.Element | ((item: NonNullable<T>) => JSX.Element);
}): () => JSX.Element (+1 overload)
import Show
> </li(property) JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>
> )}
</Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): Accessor<U[]>
import For
> </ul(property) JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>
> <button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
onClick(property) JSX.CustomEventHandlersCamelCase<HTMLButtonElement>.onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> | undefined
={() => sendconst send: (vars: string) => Promise<void>
('Hello World')}>Send</button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
> </div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> );
}
routes/enrollment.tsx
tsx
import { createRouteMultiAction(alias) function createRouteMultiAction<T = void, U = void>(fn: (arg1: void, event: ActionEvent) => Promise<U>, options?: {
invalidate?: Invalidate;
}): RouteMultiAction<T, U> (+1 overload)
import createRouteMultiAction
, createRouteData(alias) function createRouteData<T, S = true>(fetcher: RouteDataFetcher<S, T>, options?: RouteDataOptions<undefined, S>): Resource<T | undefined> (+1 overload)
import createRouteData
} from 'solid-start'; import { Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): Accessor<U[]>
import For
, ShowConditionally render its children or an optional fallback component
(alias) function Show<T>(props: {
when: T | undefined | null | false;
keyed: true;
fallback?: JSX.Element;
children: JSX.Element | ((item: NonNullable<T>) => JSX.Element);
}): () => JSX.Element (+1 overload)
import Show
} from 'solid-js';
export default function EnrollmentPagefunction EnrollmentPage(): JSX.Element
() { const messagesconst messages: Resource<{
text: string;
}[] | undefined>
= createRouteData(alias) createRouteData<{
text: string;
}[], string>(fetcher: RouteDataFetcher<string, {
text: string;
}[]>, options?: RouteDataOptions<undefined, string> | undefined): Resource<...> (+1 overload)
import createRouteData
(getMessagesfunction getMessages(): Promise<{
text: string;
}[]>
, { key(property) key?: RouteDataSource<string>
: 'chat' }); const [sendingconst sending: Submission<string, void>[] & {
pending: Submission<string, void>[];
}
, sendconst send: ((vars: string) => Promise<void>) & {
Form: never;
url: string;
}
] = createRouteMultiAction(alias) createRouteMultiAction<string, void>(fn: (args: string, event: ActionEvent) => Promise<void>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteMultiAction<string, void> (+1 overload)
import createRouteMultiAction
( sendMessagefunction sendMessage(message: string): Promise<void>
, { invalidate(property) invalidate?: Invalidate | undefined
: ['chat'] } );
return (
<div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> <ul(property) JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>
> <Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): Accessor<U[]>
import For
each(property) each: false | {
text: string;
}[] | null | undefined
={messagesconst messages: () => {
text: string;
}[] | undefined
()}> {msg(parameter) msg: {
text: string;
}
=> <li(property) JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>
>{msg(parameter) msg: {
text: string;
}
.text}</li(property) JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>
>} </Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): Accessor<U[]>
import For
> <Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): Accessor<U[]>
import For
each(property) each: false | (Submission<string, void>[] & {
pending: Submission<string, void>[];
}) | null | undefined
={sendingconst sending: Submission<string, void>[] & {
pending: Submission<string, void>[];
}
}> {msg(parameter) msg: Submission<string, void>
=> ( <li(property) JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>
> <span(property) JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>
class(property) JSX.HTMLAttributes<HTMLSpanElement>.class?: string | undefined
="pending">{msg(parameter) msg: Submission<string, void>
.input(property) Submission<string, void>.input: string
}</span(property) JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>
> <ShowConditionally render its children or an optional fallback component
(alias) function Show<T>(props: {
when: T | undefined | null | false;
keyed: true;
fallback?: JSX.Element;
children: JSX.Element | ((item: NonNullable<T>) => JSX.Element);
}): () => JSX.Element (+1 overload)
import Show
when={msg(parameter) msg: Submission<string, void>
.error(property) Submission<string, void>.error?: any
}> <span(property) JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>
class(property) JSX.HTMLAttributes<HTMLSpanElement>.class?: string | undefined
="error">{msg(parameter) msg: Submission<string, void>
.error(property) Submission<string, void>.error?: any
.message}</span(property) JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>
> <button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
onClick(property) JSX.CustomEventHandlersCamelCase<HTMLButtonElement>.onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> | undefined
={() => msg(parameter) msg: Submission<string, void>
.retry(property) Submission<string, void>.retry: () => void
()}>Retry</button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
> </ShowConditionally render its children or an optional fallback component
(alias) function Show<T>(props: {
when: T | undefined | null | false;
keyed: true;
fallback?: JSX.Element;
children: JSX.Element | ((item: NonNullable<T>) => JSX.Element);
}): () => JSX.Element (+1 overload)
import Show
> </li(property) JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>
> )}
</Forcreates a list elements from a list
it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
{(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
(alias) function For<T extends readonly any[], U extends JSX.Element>(props: {
each: T | undefined | null | false;
fallback?: JSX.Element;
children: (item: T[number], index: Accessor<number>) => U;
}): Accessor<U[]>
import For
> </ul(property) JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>
> <button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
onClick(property) JSX.CustomEventHandlersCamelCase<HTMLButtonElement>.onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> | undefined
={() => sendconst send: (vars: string) => Promise<void>
('Hello World')}>Send</button(property) JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>
> </div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> );
}
Reference
createRouteMultiAction(action, options)
Call createRouteMultiAction
inside a component to create an action controller.
ts
import { createRouteMultiAction(alias) function createRouteMultiAction<T = void, U = void>(fn: (arg1: void, event: ActionEvent) => Promise<U>, options?: {
invalidate?: Invalidate;
}): RouteMultiAction<T, U> (+1 overload)
import createRouteMultiAction
} from 'solid-start';
function Componentfunction Component(): void
() { const [sendingconst sending: Submission<string, void>[] & {
pending: Submission<string, void>[];
}
, sendconst send: ((vars: string) => Promise<void>) & {
Form: never;
url: string;
}
] = createRouteMultiAction(alias) createRouteMultiAction<string, void>(fn: (args: string, event: ActionEvent) => Promise<void>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteMultiAction<string, void> (+1 overload)
import createRouteMultiAction
(sendMessagefunction sendMessage(message: string): Promise<void>
); }
ts
import { createRouteMultiAction(alias) function createRouteMultiAction<T = void, U = void>(fn: (arg1: void, event: ActionEvent) => Promise<U>, options?: {
invalidate?: Invalidate;
}): RouteMultiAction<T, U> (+1 overload)
import createRouteMultiAction
} from 'solid-start';
function Componentfunction Component(): void
() { const [sendingconst sending: Submission<string, void>[] & {
pending: Submission<string, void>[];
}
, sendconst send: ((vars: string) => Promise<void>) & {
Form: never;
url: string;
}
] = createRouteMultiAction(alias) createRouteMultiAction<string, void>(fn: (args: string, event: ActionEvent) => Promise<void>, options?: {
invalidate?: Invalidate | undefined;
} | undefined): RouteMultiAction<string, void> (+1 overload)
import createRouteMultiAction
(sendMessagefunction sendMessage(message: string): Promise<void>
); }
createRouteMultiAction
is a hook that returns a tuple of two values: The first item is a reactive list maintaining the state of all the in-flight submissions of the action. The second item in the tuple is a function used to dispatch the action.
The second item also has another property called Form
which is a progressively enhanced version of the form
element. It is a component that can be used to submit the action, and a url
can be passed to be the action
of the form
element when JS is not available.
Returns
sending
is a reactive list of Submission
s with the following properties:
error
- An error object if the action failed.input
- The input that was passed to the action.result
- The data returned from the action.- And the following methods:
retry()
- Resets the submission with the same inputclear()
- Clears the state of the submission.
enroll
is a function that takes the input to the action and dispatches the action. It returns a promise that resolves to the result of the action. This is the behavior of the enroll
function:
