SolidJS•2y ago

how to await createResource?

This feel like such a silly question, but how do I await createResource. I am having all sorts of type errors because I can seem to get the flow control working and am hitting undefineds all over the place.

4 Replies

lxsmnsyc•2y ago

You don't await a createResource because that's the purpose of createResource: to convert a Promise into a signal. It's natural for you to receive an undefined value because it is the placeholder value until the promise resolves, which then the resource updates with a new value. Things like createEffect would automatically rerun with this happens (if it happens that resource is being accessed in that context)

lxsmnsyc•2y ago

https://www.solidjs.com/tutorial/async_resources

SolidJS

Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.

Sam Kennedy HineOP•2y ago

I understand that, I guess my question more directly is how do I effectivly handle undefined state in my typescript code so I can do computations with a createResource

const X = d3.map(data(), (d: gameData) => d.end_time * 1000 ).filter(x => x !== undefined);

const X = d3.map(data(), (d: gameData) => d.end_time * 1000 ).filter(x => x !== undefined);

specifically in the above data() is throwing a type error, as expected, I'm looking for a way to ensure that data() not undefined before I start using its values.

lxsmnsyc•2y ago

If it's direct to the UI, you can always do

<Suspense>
  <For each={data()}>
    {(value) => (
      <Show when={value} keyed>
        {(item) => item.end_time * 1000}
      </Show>
    )}
  </For>
</Suspense>

<Suspense>
  <For each={data()}>
    {(value) => (
      <Show when={value} keyed>
        {(item) => item.end_time * 1000}
      </Show>
    )}
  </For>
</Suspense>

If not:

<Suspense>
  <Show when={data()} keyed>
    {(value) => {
      const X = d3.map(value, (d) => d.end_time * 1000).filter(x => x != null);
    })
  </Show>
</Suspense>

<Suspense>
  <Show when={data()} keyed>
    {(value) => {
      const X = d3.map(value, (d) => d.end_time * 1000).filter(x => x != null);
    })
  </Show>
</Suspense>

Gaming

Programming

how to await createResource?