Awaiting in onCreate doesn't work as expected

[treeder]

I'm trying to fetch some data to put in the state before rendering, but I can't seem to make it work. I've tried the following:

class {
  async onCreate(input) {
    console.log("onCreate");
    this.state = {
       something: null,
    }
    let somethingF = api('get', `https://somewhere.com/${input.params.id}`)
    let something = await somethingF
    console.log("something:", something) // this prints to console OK
    this.state.something = something
  }
}

// later in the code
<script>
console.log("in JS", ${JSON.stringify(state)}) // this prints the state with `something: null`
</script>

I also tried:

class {
  async onCreate(input) {
    let somethingF = api('get', `https://somewhere.com/${input.params.id}`)
    let something = await somethingF
    console.log("something:", something) // this prints to console OK
    this.state = {
       something: something,
    }
  }
}
// later in the code
<script>
console.log("in JS", ${JSON.stringify(state)}) // this prints `undefined`
</script>

So it seems that the state will not be set properly after an await in onCreate. I feel like it should let onCreate complete fully before continuing so the state can be setup properly. Is that now how it's intended?

[taylor-hunt-kr]

Usually the <await> tag is how this sort of thing is done; does it work for you here?

[treeder]

I tried that, but then I have to put everything like scripts and what not underneath the await tag. I want (at least I think I want) the data available for the entire page, like way down in the script section. Unless I'm just thinking about this stuff all wrong... ?

[treeder]

Ok, so that works if I move the script into the await block.

But I can't use onCreate due to the #942 so I guess that means I can't use/update state?

[DylanPiercey]

@treeder the async logic of your app is currently intended to be executed on the server side only with Marko.

If you have some stateful logic what will work best is to move that lower in the component tree, such that the higher components (with async content) can be bundled and resolve only on the server.

The lower we can move state in the tree, the fewer components that need to be shipped to the browser, so it typically ends up being a perf win also.