S
SolidJS•3y ago
Sam Kennedy Hine

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
lxsmnsyc•3y 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
lxsmnsyc•3y 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 Hine
Sam Kennedy HineOP•3y 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
lxsmnsyc•3y 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>

Did you find this page helpful?