Madaxen86 Comments - Answer Overflow

Madaxen86

Posts Comments

SSolidJS

•Created by FatFreeButter on 4/29/2025 in #support

Compile specific routes into static html

Have you tried the nitro pre-render config where you can include or exclude specific routes.

6 replies

SSolidJS

•Created by FatFreeButter on 4/29/2025 in #support

Compile specific routes into static html

https://nitro.build/config#prerender

6 replies

SSolidJS

•Created by Lumphammer (Neil de Carteret) on 4/29/2025 in #support

I'm sure this is a stupid question...

  const [store, setStore] = createStore(initial);
  const [nested] = createStore({ ...store });

  const [store, setStore] = createStore(initial);
  const [nested] = createStore({ ...store });

5 replies

SSolidJS

•Created by Sufhal on 4/28/2025 in #support

Server-side redirects are done client-side

Query may be called inside a createAsync. With option deferStream true you can block any streaming to the client before the async resource has resolved. https://docs.solidjs.com/solid-router/reference/data-apis/create-async#options https://docs.solidjs.com/solid-start/building-your-application/data-loading What would you expect to see in the network tab after a "true" server side redirect?

5 replies

SSolidJS

•Created by Garzec on 4/28/2025 in #support

How do Layouts work with SolidStart?

Not: You can always wrap the children in the app.tsx in a RootLayout if you are really sure the all routes will need this layout without any exceptions.

9 replies

SSolidJS

•Created by Garzec on 4/28/2025 in #support

How do Layouts work with SolidStart?

9 replies

SSolidJS

•Created by Garzec on 4/28/2025 in #support

How do Layouts work with SolidStart?

(rootLayout).tsx plus folder (rootLayout) which contains all routes. the tsx file is a sibling to the folder (not inside it)

9 replies

SSolidJS

•Created by PureSoul on 4/28/2025 in #support

why store not updated in createAsync?

What you could do instead - but again this looks like a anti pattern:

const [user, setUser] = createStore({ name: "Initial", age: 0 });

  //const data = createAsync(
  onMount(async () => {
    console.log("Start async", user);
    //break 1
    await new Promise((r) => setTimeout(r, 2000));

    setUser({ name: "Changed", age: 99 });
    console.log("After setUser, user:", unwrap(user));
    //break 2
    await new Promise((r) => setTimeout(r, 2000));

    console.log("After 2s, user:", unwrap(user));

    return "done";
  });

  createEffect(() => console.log("user"));
  return (
    <div>
      <h1>User Name: {user.name}</h1> {/* ❓ */}
      <h2>User Age: {user.age}</h2> {/* ❓ */}
      {/* <Suspense fallback="...async">
         <h3>Data: {data()}</h3> 
      </Suspense> */}
    </div>
  );

const [user, setUser] = createStore({ name: "Initial", age: 0 });

  //const data = createAsync(
  onMount(async () => {
    console.log("Start async", user);
    //break 1
    await new Promise((r) => setTimeout(r, 2000));

    setUser({ name: "Changed", age: 99 });
    console.log("After setUser, user:", unwrap(user));
    //break 2
    await new Promise((r) => setTimeout(r, 2000));

    console.log("After 2s, user:", unwrap(user));

    return "done";
  });

  createEffect(() => console.log("user"));
  return (
    <div>
      <h1>User Name: {user.name}</h1> {/* ❓ */}
      <h2>User Age: {user.age}</h2> {/* ❓ */}
      {/* <Suspense fallback="...async">
         <h3>Data: {data()}</h3> 
      </Suspense> */}
    </div>
  );

This will show the initial state and then set data after hydration on the client.

6 replies

SSolidJS

•Created by PureSoul on 4/28/2025 in #support

why store not updated in createAsync?

As brenezl said: "never set state inside primivites (createEffect,createAsync,createSignal,createStore,...)". whenever you find yourself doing this: rethink your architecture. Usually the setter should be called in an event handler or check if you misunderstood how to use the docs. createAsync is executed on the server, setting the stores state at the server, however the store get recreated on the client during hydration with it's initial state. Just check your browser and cli (server) console logs. And there' aslo some race condition going on. when enabling break1 you'll get inital state, otherwise updated state.

const [user, setUser] = createStore({ name: "Initial", age: 0 });

  const data = createAsync(
    async () => {
      console.log("Start async", user);
      //break 1
      await new Promise((r) => setTimeout(r, 2000));

      setUser({ name: "Changed", age: 99 });
      console.log("After setUser, user:", unwrap(user));
      //break 2
      await new Promise((r) => setTimeout(r, 2000));

      console.log("After 2s, user:", unwrap(user));

      return "done";
    },
    { deferStream: true }
  );
  createEffect(() => console.log("user", unwrap(user)));
  return (
    <div>
      <h1>User Name: {user.name}</h1> {/* ❓ */}
      <h2>User Age: {user.age}</h2> {/* ❓ */}
      <Suspense fallback="...async">
        <h3>Data: {data()}</h3>
      </Suspense>
    </div>
  );

const [user, setUser] = createStore({ name: "Initial", age: 0 });

  const data = createAsync(
    async () => {
      console.log("Start async", user);
      //break 1
      await new Promise((r) => setTimeout(r, 2000));

      setUser({ name: "Changed", age: 99 });
      console.log("After setUser, user:", unwrap(user));
      //break 2
      await new Promise((r) => setTimeout(r, 2000));

      console.log("After 2s, user:", unwrap(user));

      return "done";
    },
    { deferStream: true }
  );
  createEffect(() => console.log("user", unwrap(user)));
  return (
    <div>
      <h1>User Name: {user.name}</h1> {/* ❓ */}
      <h2>User Age: {user.age}</h2> {/* ❓ */}
      <Suspense fallback="...async">
        <h3>Data: {data()}</h3>
      </Suspense>
    </div>
  );

6 replies

SSolidJS

•Created by Garzec on 4/28/2025 in #support

How do Layouts work with SolidStart?

File-routing is documented in the SolidStart part of the docs: https://docs.solidjs.com/solid-start/building-your-application/routing#nested-layouts

9 replies

SSolidJS

•Created by Your name's not... on 4/27/2025 in #support

Async route guards in Solid Router, and serverside props (not using SolidStart)

There's a useBeforeLeave hook that allows to "hook" into the routing process: https://docs.solidjs.com/solid-router/reference/primitives/use-before-leave#usebeforeleave

8 replies

SSolidJS

•Created by MaveriX89 on 4/24/2025 in #support

renderToString in Elysia BFF Layer

Haha, same idea I guess. @mdynnl

47 replies

SSolidJS

•Created by MaveriX89 on 4/24/2025 in #support

renderToString in Elysia BFF Layer

Maybe this could help https://github.com/DaniGuardiola/bun-plugin-solid

47 replies

SSolidJS

•Created by cRambo on 4/26/2025 in #support

SolidTable infinite loop with `createAsync` query, createMemo but not createSignal + createEffect?

Oh and what I'd always recommend with Tanstack table is to seperate data fetching to a higher component because with the createSolidTableyou are accessing the data accessor outside of the JSX so the Suspense inside this component does not pick this up and you'll fallback to higher up Suspenseboundary.

export default function Page() {
  const data = createAsync(() => getData());
  return ( 
   <>
    <h1>Table</h1>
    <Suspense>
      <DataTable data={data()} />}
    </Suspense>
   </>
  );
}

// also not that with dynamic data we need to pass the data to the createSolidTable primitves with a getter as in their examples
function DataTable(props:{data:TData}){
  const table = createSolidTable({
     get data() {
      return props.data
    }
  })
  //...
}

export default function Page() {
  const data = createAsync(() => getData());
  return ( 
   <>
    <h1>Table</h1>
    <Suspense>
      <DataTable data={data()} />}
    </Suspense>
   </>
  );
}

// also not that with dynamic data we need to pass the data to the createSolidTable primitves with a getter as in their examples
function DataTable(props:{data:TData}){
  const table = createSolidTable({
     get data() {
      return props.data
    }
  })
  //...
}

7 replies

SSolidJS

•Created by cRambo on 4/26/2025 in #support

SolidTable infinite loop with `createAsync` query, createMemo but not createSignal + createEffect?

Not sure what causes the infinite loop on the Datatable component.

7 replies

SSolidJS

•Created by cRambo on 4/26/2025 in #support

SolidTable infinite loop with `createAsync` query, createMemo but not createSignal + createEffect?

If you call the async accessor inside the createEffect the Suspense boundary in a higher up component will be triggered. I would generally avoid that. If you need to make computations on the client you can do:

  const [searchString, setSearchString] = createSignal("abc");
  const data = createAsync(() => getTests().then(
    (d) => d.filter((item) => item.includes(searchString()))
   ),
    { initialValue: [] },
  );

  const [searchString, setSearchString] = createSignal("abc");
  const data = createAsync(() => getTests().then(
    (d) => d.filter((item) => item.includes(searchString()))
   ),
    { initialValue: [] },
  );

7 replies

SSolidJS

•Created by cRambo on 4/26/2025 in #support

SolidTable infinite loop with `createAsync` query, createMemo but not createSignal + createEffect?

You may have a look at this code. Simplifies a lot.

7 replies

SSolidJS

•Created by cRambo on 4/26/2025 in #support

SolidTable infinite loop with `createAsync` query, createMemo but not createSignal + createEffect?

import { createAsync, query } from "@solidjs/router";
import { Suspense } from "solid-js";

const getTests = query(async () => {
  "use server"
  await new Promise((res) => setTimeout(res, 3000));
  return ["test"];
}, "getTest");

const addTest = action(async () => reload({ revalidate: getTests.key }),"addTest"); // you can use a response helper in actions (reload, redirect, json) to pin point which query you want to revalidate through the action.


export default function TestView() {
  const data = createAsync(() => getTests(), // no need for async and await here, no need to set type for createAsync as it will infer the type from the server function aka query
    { initialValue: [] } // you can set an initial value to get rid of the undefined, data will be () => string[]`
  );

  return (
    <div>
      <h1>test page</h1>
      <Suspense>
        {/* I like to wrap parts of the app with async data in suspense so the static stuff can be streamed to the client */}
        <h3>accessed</h3>
        <pre>{JSON.stringify(data())}</pre> 
      </Suspense>
    </div>
  );
}

import { createAsync, query } from "@solidjs/router";
import { Suspense } from "solid-js";

const getTests = query(async () => {
  "use server"
  await new Promise((res) => setTimeout(res, 3000));
  return ["test"];
}, "getTest");

const addTest = action(async () => reload({ revalidate: getTests.key }),"addTest"); // you can use a response helper in actions (reload, redirect, json) to pin point which query you want to revalidate through the action.


export default function TestView() {
  const data = createAsync(() => getTests(), // no need for async and await here, no need to set type for createAsync as it will infer the type from the server function aka query
    { initialValue: [] } // you can set an initial value to get rid of the undefined, data will be () => string[]`
  );

  return (
    <div>
      <h1>test page</h1>
      <Suspense>
        {/* I like to wrap parts of the app with async data in suspense so the static stuff can be streamed to the client */}
        <h3>accessed</h3>
        <pre>{JSON.stringify(data())}</pre> 
      </Suspense>
    </div>
  );
}

7 replies

SSolidJS

•Created by MaveriX89 on 4/24/2025 in #support

renderToString in Elysia BFF Layer

Not totally sure, but I think renderToString must be called on the server.

47 replies

SSolidJS

•Created by MaveriX89 on 4/24/2025 in #support

renderToString in Elysia BFF Layer

Maybe just add this to tsconfig

"jsx": "preserve",
"jsxImportSource": "solid-js",

"jsx": "preserve",
"jsxImportSource": "solid-js",

47 replies

Gaming

Programming