mihaaai Posts - Answer Overflow

mihaaai

Explore posts from servers

•Created by mihaaai on 9/2/2024 in #support

How to trigger server function for SSR when transitioning routes?

Is there any way to achieve a new SSR call to the backend for each route I navigate() with useNavigate() within a [slug] pattern? I have a createAsync() in [slug].tsx that is supposed to get some data from the backend based on the route I get to, but it triggers only with a full refresh of the tab in the browser or fisrt page load, if I try to navigate() from inside the app the createAsync() function is not called anymore, it's a "use server" declared function, with a cache() wrapper, just like the examples on docs. Ideally I wouldn't use <A> components and stick to useNavigate() but I'm open to anything would make this work. Maybe this is the correct behavior of my setup but I couldn't find anything related to my use-case in the docs

7 replies

SSolidJS

•Created by mihaaai on 7/12/2024 in #support

How to use `createResource` value to initialize another signal on the client?

I'm trying to fetch from my API a json that contains a link to Spotify preview (an audio) and then feed it to the audio primitive, the problem is that at render time it's undefined until it resolves the request and return the json, so the audio is undefined and I cannot play it.

const SpotifyPlayer = () => {
  const [song] = createResource(fetchSong);
  const [isPlaying, setIsPlaying] = createSignal<boolean>(false);
  const [audio, controls] = createAudio(song().item.preview_url, isPlaying); // song() is possibly undefined, if I song()? TS stops complaining but the audio wn't play, because at the init of the component the song().item.preview_url is undefined

  return <>...</>
}

const SpotifyPlayer = () => {
  const [song] = createResource(fetchSong);
  const [isPlaying, setIsPlaying] = createSignal<boolean>(false);
  const [audio, controls] = createAudio(song().item.preview_url, isPlaying); // song() is possibly undefined, if I song()? TS stops complaining but the audio wn't play, because at the init of the component the song().item.preview_url is undefined

  return <>...</>
}

How to handle such situations with Solid? Maybe with onMount? Typescript keeps complaining about the song() being possibly undefined and it's right, but how it's the correct way of using the values returned by createResources in the body of the function before it returns? For more context I'm using this within Astro in a client:only"solid-js" which means that the code is not wrapped in <Suspense> and it's executed only on the client (my API updates the last song played in Spotify each 10 mins so I need the component to also return the last song played at each refresh). If I set another client: directive it works without any problem but I'll only get the last song played during the last build of the app, insted of it being dynamic. No SSR is involved, everything is SSG

3 replies

Gaming

Programming