[BUG] Vue hApp throws error when child components try to use client

[pdaoust]

Describe the bug

When I scaffold a Vue-based hApp, any component that tries to get the client from the root component fails.

• CreateFoo.vue pops up an alert when I try to save a record, with the text

  TypeError: Cannot read properties of undefined (reading 'callZome')

• AllFoos.vue gives an error message in the component:

  Error fetching the foos: Cannot read properties of undefined (reading 'callZome').

I suspect this is similar to the race condition that @matthme fixed in #425 .

Expected behavior

Child components should be able to get a Holochain client object that's ready when they need to do client stuff.

System information

• OS: Ubuntu 24.04
• Browser: Electron
• Scaffolding and Nix Version: 0.4000 (suspect it exists in 0.3000 and weekly too)

Steps to reproduce

1. Scaffold a Vue hApp with one DNA with one zome that defines a Foo entry type. The entry type should have a global collection.
2. Import AllFoos.vue into ui/src/App.vue and put it in the markup.
3. Run npm start

Screenshots

[c12i]

Hi @pdaoust, this seems to be an expected error if you have the following setup in your App.vue component

<template>
    <AllPosts></AllPosts>
    <CreatePost></CreatePost>
</template>

The child components will expect the client to be available even when not yet ready.

I can suggest the fix below for this issue, that ensures that the child components consuming the client will only be rendered when the client is done loading.

<template>
  <div v-if="!loading">
    <AllPosts></AllPosts>
    <CreatePost></CreatePost>
  </div>
</template>

We could alternatively have a change to the scaffolded vue code where the loading and error state from connecting to the client in App.vue is shared with all child components where each child component consuming the client would be expected to handle the state respectively, but I found this fix much simpler, tell me what you think.

[pdaoust]

Oh! Yeah, that makes sense.

hmmmmmmmmmm... this brings up an interesting question -- whose job is it to manage whether the client is connected? @matthme and I decided to solve this by putting an async getClient function on the root context that resolves when the client is connected. Then each child component is responsible for setting its own loading variable and only showing the data when it has a client to talk to.

I'm really attracted to the idea of making it a concern of the root component though. Components not loading? It's cuz you didn't guard against it in the root. Fix it there and you fix it for everything. It simplifies the child components too.

@matthme what are your thoughts on this?