Created
September 19, 2025 16:39
-
-
Save klequis/fa793c9229545f9d5631e68975fc742e to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| In this example I see `submission.error` logged to the console but it doesn't render on the page? | |
| ```ts | |
| type User = { | |
| id?: number; | |
| name: string; | |
| admin: boolean; | |
| }; | |
| const users: User[] = [ | |
| { id: 0, name: "user1", admin: false }, | |
| { id: 1, name: "user2", admin: true }, | |
| ]; | |
| const getUsers = query((id?: number): Promise<User | User[] | null> => { | |
| return new Promise((resolve, reject) => { | |
| const user = id ? users[id] || null : users; | |
| return setTimeout(() => { | |
| if (user) { | |
| resolve(user); | |
| } else { | |
| reject(new Error("User not found")); | |
| } | |
| }, 3000); | |
| }); | |
| }, "getUser"); | |
| const isAdmin = action(async (formData: FormData) => { | |
| try { | |
| const id = formData.get("userid"); | |
| if (id === "undefined") { | |
| throw new Error("Missing param 'id'"); | |
| } | |
| const user = (await getUsers(Number(id))) as User; | |
| if (!user?.admin) throw new Error("User is not admin"); | |
| return user; | |
| } catch (e) { | |
| const msg = e instanceof Error ? e.message : "unknown error"; | |
| throw new Error(msg); | |
| } | |
| }); | |
| export default function Home() { | |
| const users = createAsync(async () => { | |
| const a: User[] = (await getUsers()) as User[]; | |
| return a; | |
| }); | |
| const sub = useSubmission(isAdmin); | |
| createEffect(() => { | |
| if (users()) { | |
| console.log("log sub", { | |
| error: sub.error, | |
| result: sub.result, | |
| input: sub.input, | |
| pending: sub.pending, | |
| url: sub.url, | |
| }); | |
| } | |
| }); | |
| return ( | |
| <section class="bg-gray-100 text-gray-700 p-8"> | |
| <ErrorBoundary fallback={<h1>ERROR</h1>}> | |
| <h1 class="text-2xl font-bold">Home</h1> | |
| <Suspense fallback={<h1>Loading...</h1>}> | |
| <Show when={users()}> | |
| <For each={users()}>{(u: User) => <DisplayUser user={u} />}</For> | |
| <DisplayUser user={{ name: "dummy", admin: false }} /> | |
| <DisplayUser user={{ name: "unknownId", admin: false, id: 9 }} /> | |
| </Show> | |
| <Show when={sub.pending}> | |
| <p>Pending</p> | |
| </Show> | |
| <Show when={!sub.pending}> | |
| <Switch> | |
| <Match when={sub.result}> | |
| <p>result: {sub?.result}</p> | |
| </Match> | |
| <Match when={sub.error}> | |
| <p>Error: {sub.error}</p> | |
| </Match> | |
| </Switch> | |
| </Show> | |
| </Suspense> | |
| </ErrorBoundary> | |
| </section> | |
| ); | |
| } | |
| function DisplayUser(props: { user: User }) { | |
| return ( | |
| <form action={isAdmin} method={"post"}> | |
| <li> | |
| <input name="userid" id="userid" value={props.user.id} /> | |
| <span> | |
| {" "} | |
| {props.user.name}, {props.user.admin ? "is admin" : "not admin"} | |
| </span> | |
| <button type="submit">isAdmin?</button> | |
| </li> | |
| </form> | |
| ); | |
| } | |
| ``` |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment