Question: best practice to prefetch no-ui vue component.

[lcjnil]

Hi, I am caught in some trouble when migrating from v3.0.0-beta.19 to 3.0.0-beta.25.

I had some no-ui vue component (eg, some model component to fetch data using graphql and used by ui component). In old version, I just wrap them with willPrefetch, and they will be prefetched with no errors or warnings.

In latest version, I found that I should collect them manually (since they are not rendered) and pass to ApolloSSR.prefetchAll. However this will output first error in https://github.com/Akryum/vue-apollo/blob/v3.0.0-beta.25/ssr/index.js#L59 because they has no ui.

Besides, my other ui component depends on these no-ui component, and will initialize the in beforeCreate hook, but in latest vue-apollo, walkTree walked these component will find that these no-ui component is not initialized(beforeCreate hook is not executed), these will cause another error.

Luckily, SSR is just fine even with these two errors, but it's bad to display these errors. My question is, what is the best practice to handle these no-ui component, and why latest version should had walkTree(since v19 don't need that).

[Akryum]

What do you mean by no-ui components?

[lcjnil]

@Akryum Thanks for your reply, below is an example

// no-ui component
// userModel.js
// this will initialized as a vue component, but with no ui
// this serves as a model to manage global user data
{
    name: 'userModel',
    data() { currentUser: {...}},
    apollo: {
        currentUser: {
            query: gql`....`,
        }
    },
    methods: {
        login() {}
        logout() {} // some model methods
    }
};

// app.vue
// ui component, will use userModel
<template>
    <p>current user is {{userModel.currentUser.name}}</p>
</template>

<script>
export default {
    // below hook is executed in mixin, not actually here
    beforeCreate() {
        // userModel is initialized here
        defineReactive(this, 'userModel', new Vue(userModel))
    }
}
</script>

[Samuell1]

@lcjnil you should handle login, logout, user data in Vuex

[lcjnil]

@Samuell1 We prefer to use small models, not global store.