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

I'm trying to fetch from my API a

json

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()

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"

client:only"solid-js"

which means that the code is not wrapped in

<Suspense>

<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:

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

GitHub

solid-primitives/packages/audio at main · solidjs-community/solid-p...

A library of high-quality primitives that extend SolidJS reactivity. - solidjs-community/solid-primitives

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

I'm trying to fetch from my API a

json

json

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()

song()

client:only"solid-js"

client:only"solid-js"

which means that the code is not wrapped in

<Suspense>

<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:

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

GitHub

solid-primitives/packages/audio at main · solidjs-community/solid-p...

A library of high-quality primitives that extend SolidJS reactivity. - solidjs-community/solid-primitives

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

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

Similar Threads

Similar Threads

Similar Threads