Need help understanding lifecycle hooks

[roysmith]

I've got a stub of an app which makes an API call to wikipedia and displays the result. This version works. I get:

<div class="queue">{{User:DYKUpdateBot/REMOVE THIS LINE}}</div>

which is what I expect (the actual text will vary depending on what's on the page at the time you make the API call). If I move the JSON-unpacking code into the template, as in this version, things break. Sometimes I get the same text, but sometimes it fails with

Queue.vue:24 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'query')

in the browser console. I'm guessing I'm attaching my callback to the wrong life cycle hook, and end up trying to resolve the Promise multiple times?

[LinusBorg]

The second one should always be failing. Here's why:

• Initially, data is null.
• The fetch doesn't happen until the mounted hook is called, which happens after the first template render has been done.
• Which means, during the first template render, data is still null
• But in the template, you try to access a 'query' property on data - which will throw an error because null you can't read properties from null.

So what to do? Either stick with your first variation, or:

a) use v-if

    <div v-if="data" class="queue">
        {{ data['query']['pages'][0]['revisions'][0]['slots']['main']['content']  }}
    </div>

b) check for data being non-nullish:

    <div v-if="data" class="queue">
        {{ data ?? data['query']['pages'][0]['revisions'][0]['slots']['main']['content']  }}
    </div>

a) use optional chaining:

    <div v-if="data" class="queue">
        {{ data?.['query']['pages'][0]['revisions'][0]['slots']['main']['content']  }}
    </div>

[roysmith]

Ah, that makes sense, thanks. I anticipate I'll need to dig various bits of data out of that complicated json blob, so I'd rather just grab the whole blob once in the callback and let my individual components pick out what bits they need. So "stick with your first variation" doesn't seem feasible.

Looking at https://vuejs.org/assets/lifecycle.MuZLBFAS.png, I assume when you say "during the first template render", you're talking about the green box labeled "initial render / create & insert DOM nodes"? In which case, would it work if I used onBeforeMount()instead of onMounted()?

[LinusBorg]

No, that won't work either, because rendering is synchronous (plus one tick after which it is mounted into the DOM), while the fetch happens asynchronously in the background, which means it will finish after the first render has been done.