gsoutz Posts - Answer Overflow

Topics

gsoutz

•Created by gsoutz on 3/18/2025 in #support

How to test for is loaded for a create async source change

In the real world example there are these methods that loads some async data:

    loadArticles(predicate) {
      setArticleSource(["articles", predicate]);
    },
    loadArticle(slug) {
      setArticleSource(["article", slug]);
    },

    loadArticles(predicate) {
      setArticleSource(["articles", predicate]);
    },
    loadArticle(slug) {
      setArticleSource(["article", slug]);
    },

https://github.com/solidjs/solid-realworld/blob/main/src/store/createArticles.js Here's what async resource looks like in my case:

  const replay_tree = createAsync<ModelReplayTree>(async () => {
        let s = source()
        if (!s) {
            return default_replay_tree()
        }
})

  const replay_tree = createAsync<ModelReplayTree>(async () => {
        let s = source()
        if (!s) {
            return default_replay_tree()
        }
})

I have 2 questions: when you do this:

let [pending, start] = useTransition()
  start(async foo() => { return 30 })

let [pending, start] = useTransition()
  start(async foo() => { return 30 })

is pending, waiting for foo to finish, or does it also include any triggered createAsync's as well. Because as I tested before it always returned true to me before loading this async resource I don't know why. Second: In this real world example, how would I get notified when the articles finished loading after I call loadArticles() or loadArticle(). Maybe the real world example is outdated because it uses createResource, but it's the only example that I adopted changing it to createAsync in my case. But I still would like to know when the articles are ready to show. Sometimes even though an old value is loaded, I want to load it again to get a fresh copy because I made some changes in the old copy. So I can't just test the id to be equal to requested id. Which how I used to check for loaded. Please notify me if this example is bogus, because it does use some tricks I think is pretty weird.

10 replies

•Created by gsoutz on 3/18/2025 in #support

Why is this store change doesn't trigger a reactive computation

It looks like this:

 // Reactive state store that can update UI
  const [state, setState] = createStore<StoreState>({
    current: { state: 'boot' },
  });
  const setCurrent = (state: SomeState) => setState('current', state);

  createEffect(on(() => state.current, state => {
    console.log('yes', state)
  }))

 // Reactive state store that can update UI
  const [state, setState] = createStore<StoreState>({
    current: { state: 'boot' },
  });
  const setCurrent = (state: SomeState) => setState('current', state);

  createEffect(on(() => state.current, state => {
    console.log('yes', state)
  }))

Why this setCurrent, doesn't log anything except the first one? https://playground.solidjs.com/anonymous/7671caaa-1e05-40b2-bc52-a79140047484

11 replies

•Created by gsoutz on 3/15/2025 in #support

can't setup a basic state machine interactive quiz type of game

I am trying to make a quiz application. It has several states, like first it has to load the list of questions, then it has to load data for a specific question at play, it has to select the next question to play at random. It also displays previous solved attempts, when they are clicked, it has to display that specific question, and when the question list is empty display an empty message. This kind of app. I quickly learned createEffect is evil. But also I am trying to juggle how the state effects are called in order in this reactive system. Obviously I am creating this support ticket to get some tips and tricks on how to make this manageable in comprehension, because I am in the process of trying to tweak the order of calls or the batches, which I will quickly forget what is supposed to be calling who next time I open the code in a month or so. Currently the app doesn't work and I don't know how to fix it. The main problem is it's not just straightforward imperative state management and control flow. It's a big pile of SpaghettiOs. Ps. Oh I didn't mention the list of questions is reactive async state because it changes over time as well.

11 replies

•Created by gsoutz on 3/14/2025 in #support

I need to run an effect when an async signal or a store signal, or another async signal are equal

import { createEffect, createMemo, createSignal } from 'solid-js';
import { render } from 'solid-js/web';
import { createAsync } from '@solidjs/router'

const rnd_int = () => Math.ceil(Math.random() * 10)

function App() {

  let [a, set_a] = createSignal()
  let [b, set_b] = createSignal()

  let d_a = createAsync(async () => a())
  let d_b = createMemo(() => b())

  const is_diff = createMemo(() => d_a() !== d_b())

  createEffect(() => {
    if (is_diff()){ 
      return
    }
    console.log(a(), b(), a() === b())
  })

  setInterval(() => {
    set_a(rnd_int())
  }, 100)
  setInterval(() => {
    set_b(rnd_int())
  }, 250)

  return (<></>)
}

render(() => <App />, document.getElementById('app')!);

import { createEffect, createMemo, createSignal } from 'solid-js';
import { render } from 'solid-js/web';
import { createAsync } from '@solidjs/router'

const rnd_int = () => Math.ceil(Math.random() * 10)

function App() {

  let [a, set_a] = createSignal()
  let [b, set_b] = createSignal()

  let d_a = createAsync(async () => a())
  let d_b = createMemo(() => b())

  const is_diff = createMemo(() => d_a() !== d_b())

  createEffect(() => {
    if (is_diff()){ 
      return
    }
    console.log(a(), b(), a() === b())
  })

  setInterval(() => {
    set_a(rnd_int())
  }, 100)
  setInterval(() => {
    set_b(rnd_int())
  }, 250)

  return (<></>)
}

render(() => <App />, document.getElementById('app')!);

This equality test is supposed to make sure not pass forward when the memos are not equal but it does why, and how can I make sure it only passes when they are equal. https://playground.solidjs.com/anonymous/70c547e4-4c55-407f-a31a-d369aa3028eb

8 replies

•Created by gsoutz on 3/10/2025 in #support

query function invalidates the cache every 10 clicks

I was wondering why the Suspense is triggered once in a while, then I realized query is not caching the result long enough. As you can see in this example, once every 10 click's the fetch function is hit again. The question is why query invalidates the cache basically rendering it useless. Here's the playground: https://playground.solidjs.com/anonymous/40fc1a3b-842a-4a02-8543-ebf113f9e1da

34 replies

•Created by gsoutz on 3/7/2025 in #support

What to do instead of loading a model with createMemo inside a createResource computation

/* solidjs view model */
function BookModel(id: string, name: string): BookModel {
  const [name, set_name] = createSignal('')
  const [chapters, set_chapters] = createSignal([])
  const nb_chapters = createMemo(() => chapters().length)
  return {nb_chapters}
}
async function db_load_book(book_id: string) {
  const mock_db = {}
  let e_book = mock_db.books.find
  let res = BookModel(e_book.id, e_book.name)
  let e_chapters = db.chapters.find
  let chapters = e_chapters
  res.set_chapters(chapters)
  return res
}
function ViewComponent() {
  let [book] = createResource(() => db_load_book('book_id1'))
  return (<>
    book()?.nb_chapters()
  </>)
}

/* solidjs view model */
function BookModel(id: string, name: string): BookModel {
  const [name, set_name] = createSignal('')
  const [chapters, set_chapters] = createSignal([])
  const nb_chapters = createMemo(() => chapters().length)
  return {nb_chapters}
}
async function db_load_book(book_id: string) {
  const mock_db = {}
  let e_book = mock_db.books.find
  let res = BookModel(e_book.id, e_book.name)
  let e_chapters = db.chapters.find
  let chapters = e_chapters
  res.set_chapters(chapters)
  return res
}
function ViewComponent() {
  let [book] = createResource(() => db_load_book('book_id1'))
  return (<>
    book()?.nb_chapters()
  </>)
}

I have 2 models, 1 database model prefixed with Entity, 1 view model that contains computations like createMemo or createEffect and signals.
The thing is, when I try to construct my view model from the database models I get from the database, that happens inside the async function within createResource calculation.
Obviously I get the warning:

   computations created outside a `createRoot` or `render` will never be disposed

   computations created outside a `createRoot` or `render` will never be disposed

In the code above, I explained how my code is structured in my project. But obviously there is a flaw with how I do things. Here's what I think are my options which both I think are not ideal: Option 1. Create another model that loads chapters of the book into it, and convert that into view model inside view components that render. Option 2. Write explicit createRoot code that disposes these computations somehow. I have a bunch of models that are written like this, so it will take a while for me to change them so I need a best way to do this. The main culprit is when the database loads chapters they are not embedded inside the book model immediately I need to load the book model than chapters that belong to the book. PS. This is a local only project I use dexie library to interface with the IndexedDB in the browser.

7 replies

•Created by gsoutz on 3/5/2025 in #support

How to force refetch on createResource trigger with same fetcher id

createResource(() => props.id, fetch_calculation) when props.id triggers twice with the same value like 'abc' and 'abc', createResource doesn't refetch. I want it to refetch to get a fresh clone of the fetch_calculation result. A workaround would be to add a random value at the end of the id everytime and skip it in the calculations.

11 replies

•Created by gsoutz on 2/28/2025 in #support

Updating a signal vs Updating the data in the database

I have a model created by various signals that is local to the browser. I also use indexedDB solid-dexie to persist some data. Now when I make changes to my model I want parts of changes to be persisted to the database as well. I said I am using solid-dexie, but what are some libraries or best practices to handle persistence of the application? My use case is local only preferrably IndexedDB on the browser as the main database.

9 replies

•Created by gsoutz on 2/26/2025 in #support

How can I animate an svg element, that already has it's custom transform

I have existing svg elements, that already has a specific transform to display on the corner. But I want to animate these by adding glow, pulsating effect or shock shake effect. What are my options to easily animate them.

5 replies

•Created by gsoutz on 2/15/2025 in #support

How can I tell solid router to navigate to a page by forcing a refresh, breaking the SPA

I need to send specific CORS headers on a specific page which I can only do with netlify by specifying a link and the set headers. But when they navigate to home page and then click the link, the headers is not set because home page link doesn't set the headers by netlify not configured as such. And I can't include the headers to be set on the home page as well. Because then contact page embedded video doesn't work because headers are too strict. So the easiest workaround is the force a refresh on a specific link to force the netlify configuration to work for that link specifically. Basically I need something like this:

<A href="/builder" force_refresh={true}>Builder</A>

<A href="/builder" force_refresh={true}>Builder</A>

When you click this link it forces a refresh rather than a silent navigation with a url change.

17 replies

•Created by gsoutz on 10/5/2024 in #support

Invalid Frame Header only on production build websockets

I wrote this simple tutorial, only to realize it's a minimum reproducible example that demonstrates the bug: Steps to Reproduce:

git clone https://github.com/eguneys/solidstart-websockets-chat-tutorial

pnpm install
pnpm build

node ./output/server/index.mjs

git clone https://github.com/eguneys/solidstart-websockets-chat-tutorial

pnpm install
pnpm build

node ./output/server/index.mjs

Look at the websocket connection in the network tab, see it breaks with this error: Invalid Frame Header. But if you run, pnpm dev The error is gone. Please fix this "very" obscure error asap, or it's a very shame as I produced it very quickly while writing my tutorial.

3 replies

•Created by gsoutz on 10/5/2024 in #support

production build runs my code twice

I have a solid start app I coded some things. When I run pnpm dev it works fine. But when I do pnpm build, and node .output/index.mjs it logs the things twice on the server log, and my websocket connection breaks with invalid frame header, which is likely related to this running twice thing.

1 replies

•Created by gsoutz on 10/5/2024 in #support

cache doesnt revalidate inside websocket on('message')

I have this:

                await make_game_move({ id: this.game_id, board, status, sans })

                await revalidate(['get_game', 'get_pov'])

                let asdf = await getGame(this.game_id)
                console.log('after revalidate', this.game_id, 'sans', asdf!.sans)


                this.publish_peers({ t: 'move', d: uci })

                await make_game_move({ id: this.game_id, board, status, sans })

                await revalidate(['get_game', 'get_pov'])

                let asdf = await getGame(this.game_id)
                console.log('after revalidate', this.game_id, 'sans', asdf!.sans)


                this.publish_peers({ t: 'move', d: uci })

after await revalidate , getGame still returns the old value. This is running inside websocket's on('message').

4 replies

•Created by gsoutz on 10/4/2024 in #support

"use server" doesn't work if put at the top of the file

I have this code which causes reactive triggers when user is changed by an useAction:

import { cache } from "@solidjs/router";
import { useSession } from "vinxi/http";
import { create_user, drop_user_by_id, new_user, Profile, profile_by_username, User, user_by_id } from "./routes/db";

export type UserSession = {
  user_id: string
}

export const getSession = async () => {
  "use server"
  return await useSession<UserSession>({
    password: process.env.SESSION_SECRET ?? 'secret_hash_key_placeholder_32_keys'
  })
}


export const getUser = cache(async (): Promise<User> => {
  "use server"
  const session = await getSession()
  return user
}, 'get_user')

import { cache } from "@solidjs/router";
import { useSession } from "vinxi/http";
import { create_user, drop_user_by_id, new_user, Profile, profile_by_username, User, user_by_id } from "./routes/db";

export type UserSession = {
  user_id: string
}

export const getSession = async () => {
  "use server"
  return await useSession<UserSession>({
    password: process.env.SESSION_SECRET ?? 'secret_hash_key_placeholder_32_keys'
  })
}


export const getUser = cache(async (): Promise<User> => {
  "use server"
  const session = await getSession()
  return user
}, 'get_user')

but if I remove the "use server" from inside functions and place it at the top of the file, The getUser() doesn't reactive update anymore, it breaks.

5 replies

•Created by gsoutz on 10/3/2024 in #support

How do I do something after a redirect, like reload the page, or in this case reconnect a websocket?

there is no redirect reload, or some kind of hook that gets called after a redirect has happened to the same dynamic route with different params.

10 replies

•Created by gsoutz on 10/3/2024 in #support

Should I destroy and create a new websocket connection on each page?

Or keep the existing connection throughout different pages, and somehow figure out which page should I handle by different means. I solved all my websocket problems, now this question come to my head, because it takes a split second more to open up the connection and be ready.

3 replies

•Created by gsoutz on 10/3/2024 in #support

How to crossws websocket Resolver API access getSession?

I am trying to use WebSockets with crossws, I have this piece of code at the beginning:

const ws = crossws({
    async resolve(req) {
        let user = await getUser()
        return {
            open(peer) {
                let i = dispatch_peer(user, peer)
                i?.join()
            }
            message(peer) {

const ws = crossws({
    async resolve(req) {
        let user = await getUser()
        return {
            open(peer) {
                let i = dispatch_peer(user, peer)
                i?.join()
            }
            message(peer) {

getUser() uses "use server" and getSession kind of things, so it needs some Context I think. But this getUser() line throws:

file:///workspaces/duckchess25/node_modules/.pnpm/[email protected]/node_modules/unctx/dist/index.mjs:31
        throw new Error("Context is not available");
              ^

Error: Context is not available
    at Object.use (file:///workspaces/duckchess25/node_modules/.pnpm/[email protected]/node_modules/unctx/dist/index.mjs:31:15)
    at getEvent (/workspaces/duckchess25/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/vinxi/runtime/http.js:301:33)
    at getHTTPEv

file:///workspaces/duckchess25/node_modules/.pnpm/[email protected]/node_modules/unctx/dist/index.mjs:31
        throw new Error("Context is not available");
              ^

Error: Context is not available
    at Object.use (file:///workspaces/duckchess25/node_modules/.pnpm/[email protected]/node_modules/unctx/dist/index.mjs:31:15)
    at getEvent (/workspaces/duckchess25/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/vinxi/runtime/http.js:301:33)
    at getHTTPEv

I specifically wanted to put the getUser() there, so I don't have to use it inside message(peer), each time message is exchanged getUser is queried. So what is the proper way to have access to user object taken from the session and the database, so it's readily available on websocket handlers?

3 replies

•Created by gsoutz on 10/2/2024 in #support

I can't load app.scss inside app.tsx and load globally on all pages

app.tsx has this: import "./app.scss"; Which sets the background color of the page. If I load the home page this style is loaded. But If I navigate to profile then navigate back to home page, styling is gone. as this app.scss has never been imported. If I put this import like this on Home.tsx

import "~/app.scss";
import './Home.scss'

import "~/app.scss";
import './Home.scss'

like this, it loads on every case as expected.

2 replies

•Created by gsoutz on 10/2/2024 in #support

__vite-browser-external:node:async_hooks:3 Uncaught Error: Module "node:async_hooks" has been extern

vite-browser-external:node:async_hooks:3 Uncaught Error: Module "node:async_hooks" has been externalized for browser compatibility. Cannot access "node:async_hooks.AsyncLocalStorage" in client code. See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details. at Object.get (vite-browser-external:node:async_hooks:3:11) at http.js:71:53 Here's my code looks like:

export const getUser = async (): Promise<User> => {
  "use server"

  const session = await getSession()

  const user_id = session.data.user_id
  let user: User | undefined
  if (user_id) {
    user = await user_by_id(user_id)
  } 

  if (user) {
    return user
  }

  user = create_user()

  await new_user(user)
  await session.update((d: UserSession) => ({ user_id: user.user_id }))
  return user
}


export default function App() {

  return (
    <Router
      root={props => (
        <MetaProvider>
          <Title>SolidStart - Basic</Title>
          <Nav/>
          <Suspense>{props.children}</Suspense>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

const Nav = () => {
  const user = createAsync(() => getUser(), { deferStream: true })

  return (<>
    <nav>
      <a class='logo' href="/">duckchess<span>.org</span></a>
      <Suspense>
        <Show when={user()}>{user =>
          <A class='dasher' href={`/u/${user().username}`}>{user().username}</A>
        }</Show>
      </Suspense>
    </nav>
  </>)
}

export const getUser = async (): Promise<User> => {
  "use server"

  const session = await getSession()

  const user_id = session.data.user_id
  let user: User | undefined
  if (user_id) {
    user = await user_by_id(user_id)
  } 

  if (user) {
    return user
  }

  user = create_user()

  await new_user(user)
  await session.update((d: UserSession) => ({ user_id: user.user_id }))
  return user
}


export default function App() {

  return (
    <Router
      root={props => (
        <MetaProvider>
          <Title>SolidStart - Basic</Title>
          <Nav/>
          <Suspense>{props.children}</Suspense>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

const Nav = () => {
  const user = createAsync(() => getUser(), { deferStream: true })

  return (<>
    <nav>
      <a class='logo' href="/">duckchess<span>.org</span></a>
      <Suspense>
        <Show when={user()}>{user =>
          <A class='dasher' href={`/u/${user().username}`}>{user().username}</A>
        }</Show>
      </Suspense>
    </nav>
  </>)
}

2 replies

•Created by gsoutz on 10/2/2024 in #support

What is wrong with Math.random create Signal

This code:

const [name, set_name] = createSignal(`Guest ${Math.floor(Math.random() * 10)}`)

const [name, set_name] = createSignal(`Guest ${Math.floor(Math.random() * 10)}`)

produces different values on interface and in createEffect log, what is going on?

8 replies