dnd5e reactivity with race.advancement.byID

I'm having trouble when fetching a race byUuid with one particular reactive var:

const selectHandler = async (option) => {
  race = await fromUuid(option);
  console.log(source); //<-- works
  console.log(adv);    //<-- undefined
  console.log(race.advancement.byId); //<-- works
}
$: source = race?.system?.source; 
$: adv = race?.advancement?.byId;

const selectHandler = async (option) => {
  race = await fromUuid(option);
  console.log(source); //<-- works
  console.log(adv);    //<-- undefined
  console.log(race.advancement.byId); //<-- works
}
$: source = race?.system?.source; 
$: adv = race?.advancement?.byId;

Any ideas? Why adv is undefined? (The only special thing about byId is that it's a getter)

3 Replies

TyphonJS (Michael)•5mo ago

Likely because the reactive statement for $: adv doesn't get run immediately after race is set. You can put console log statements in the reactive statements to debug.

geoidesic•5mo ago

I put a timeout on it and then it gets set, so you're right, race condition. Cool tx.

TyphonJS (Michael)•5mo ago

Or put a tick(); after race = in selectHandler. import { tick } from 'svelte'; await tick();

Gaming

Programming

dnd5e reactivity with race.advancement.byID