Error handling with chained resources.

Hello, I'm facing a problem with a chained "createResources".
In a normal case, everything works fine.
However, if the first fetcher throws an error, the error is not caught, which breaks the reactivity.

const [getId, setId] = createSignal(1);
  const [song] = createResource(getId, fetchSong);//breaks if fetchSong throws
  const [artists] = createResource(() => music()?.id, fetchSongArtists);

const [getId, setId] = createSignal(1);
  const [song] = createResource(getId, fetchSong);//breaks if fetchSong throws
  const [artists] = createResource(() => music()?.id, fetchSongArtists);

const [getId, setId] = createSignal(1);
  const [song] = createResource(getId, fetchSong);//breaks if fetchSong throws
  const [artists] = createResource(() => music()?.id, fetchSongArtists);

const [getId, setId] = createSignal(1);
  const [song] = createResource(getId, fetchSong);//breaks if fetchSong throws
  const [artists] = createResource(() => music()?.id, fetchSongArtists);

Here's the code. (without the http requests)
https://playground.solidjs.com/anonymous/373405e2-5ce0-440b-b346-e94a8a403b56

In this example, if fetchSong() throws, the page get stuck in loading state instead of being in error state.
Note: i would like to fetchSongArtists to be called only if the song is successfully loaded. I temporarily fixed this with a second signal and a createEffect, which is pretty ugly.

How can i fix this?
Is using multiple createResource in a component a good practice?

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

Error handling with chained resources.

Similar Threads

Similar Threads

Similar Threads