SolidJS•12mo ago

Await for signal state?

My website checks the login state upon initial load and a Resource on a page is failing to load because it requires login but it runs before the login check can finish. How can I wait for the logged-in (signal) state to change before proceeding with the request? I've looked at the from documentation but it's very confusing.

29 Replies

Tommypop•12mo ago

You can add the login signal as the resource source:

const [isLoggedIn, setIsLoggedIn] = createSignal(false);
const [data] = createResource(isLoggedIn, async (val) => {
  // This will run when the isLoggedIn signal is truthy, and when it changes.
})

const [isLoggedIn, setIsLoggedIn] = createSignal(false);
const [data] = createResource(isLoggedIn, async (val) => {
  // This will run when the isLoggedIn signal is truthy, and when it changes.
})

im_ninooo•12mo ago

ooohhhh, I did not know that. if so that's perfect, thank you! it works!

Tommypop•12mo ago

Awesome

im_ninooo•12mo ago

thank you very much 😄

Tommypop•12mo ago

The createResource API is not particularly well documented You're welcome :)

im_ninooo•12mo ago

it does explain this behavior, but it's been a while since I've read createResource()'s docs and I probably skipped the large chunk of text where it is explained 😅

Tommypop•12mo ago

https://docs.solidjs.com/references/api-reference/basic-reactivity/createResource#:~:text=There%20are%20two%20ways%20to%20use%20createResource%3A%20you%20can%20pass%20the%20fetcher%20function%20as%20the%20sole%20argument%2C%20or%20you%20can%20additionally%20pass%20a%20source%20signal%20as%20the%20first%20argument.%20The%20source%20signal%20will%20retrigger%20the%20fetcher%20whenever%20it%20changes%2C%20and%20its%20value%20will%20be%20passed%20to%20the%20fetcher. This is where it is in the docs but it's kinda hidden away

im_ninooo•12mo ago

I was looking at the older(?) website but it says the exact same thing https://www.solidjs.com/docs/latest#createresource anyway, I'll close this now 😄 thanks again

Tommypop•12mo ago

im_ninooo•12mo ago

hello, I'm reopening this because I can't seem to be able to tell when the resource hasn't yet started fetching as it's initial state is ready. is this expected behavior?

im_ninooo•12mo ago

I'd expect the initial state to be unresolved or pending. (I'm on version 1.6.5 btw so maybe that already got fixed)

Tommypop•12mo ago

I think it might report ready if the source is falsy, as it's value will just be undefined I think You can just use the value of your signal I suppose

im_ninooo•12mo ago

yeah, maybe but it would be nice if I could simply use the resource's state in my logic also, in which case would the state be unresolved? it seems like it would be for such cases

im_ninooo•12mo ago

im_ninooo•12mo ago

unless an undefined value is considered resolved, which to me doesn't make sense (since it is undefined). my issue is that when the state is ready and the resource is undefined, I show a "No data available" fallback, but because that's also the initial resource state, that message is shown before the fetch begins (and then a "loading" message takes over).

im_ninooo•12mo ago

here's a gif demonstrating the loading phase.

im_ninooo•12mo ago

this is obviously not a big deal but I would like to show the correct information (or nothing at all). I know this should be possible by hooking into the checkingLogin signal, but that will make my code unnecessarily more complex.

Tommypop•12mo ago

Yeah you could probably return null instead of undefined from the resource in the case of no data I suppose the resource kinda has "resolved", as it has executed, noticed that the source is falsy, and returned undefined but it's not very intuitive

Tommypop•12mo ago

It seems to work here: https://playground.solidjs.com/anonymous/bc429f6c-f121-4408-8277-d5d72de06ca1

Solid Playground

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

Tommypop•12mo ago

Maybe it's because you're on 1.6.5?

im_ninooo•12mo ago

I'll update and try again. I did change my loggedIn signal to be optional and defaulted to undefined meaning the session check hasn't run/finished and that worked but again, hooking solely on the resource's state would be cleaner 🙂

im_ninooo•12mo ago

my custom ResourceDisplay component is already a huge mess 😅

im_ninooo•12mo ago

I really need to rewrite that.

REEEEE•12mo ago

Might be cleaner to make use of Suspense and ErrorBoundary

Tommypop•12mo ago

Yeah, Suspense is probably a good idea

im_ninooo•12mo ago

..I'll have to read on those again 😅 thanks for the suggestions 🙂

REEEEE•12mo ago

small example, not sure if it works

<ErrorBoundary fallback={<p> Error: {props.resource.error.message} </p>}>
  <Suspense fallback={<p> {props.loadingText ?? 'loading...'} </p>}>
    <Show when={props.hasData} fallback={<p> {!loggedIn() ? props.noDataText ?? 'No data'} </p>}>
      {props.children}
    </Show>
  </Suspense>
</ErrorBoundary>

<ErrorBoundary fallback={<p> Error: {props.resource.error.message} </p>}>
  <Suspense fallback={<p> {props.loadingText ?? 'loading...'} </p>}>
    <Show when={props.hasData} fallback={<p> {!loggedIn() ? props.noDataText ?? 'No data'} </p>}>
      {props.children}
    </Show>
  </Suspense>
</ErrorBoundary>

im_ninooo•12mo ago

alright, updating to 1.7.x did fix it 😄

im_ninooo•12mo ago

that's what I expected to see based on the truth table in the docs. if it does, that's significantly cleaner! thank you so much 🙂 I'll close this again, thanks again to both Tommy and REEEEE! the ErrorBoundary here doesn't seem to work.. I thought it was because the resource wasn't being called within it (inside the component) but it's still doesn't seem to work I can just use a <Show when={props.state === 'errored'}>, that's fine

Gaming

Programming

Await for signal state?