async provide in plugin

[idc77]

I'm trying to provide a const but I'm getting errors

import Surreal from "surrealdb.js";
import { SurrealClientSymbol } from "./SurrealClientSymbol";

export default {
    install: (app, options) => {
        const db = new Surreal();
        db.connect("ws://127.0.0.1:8000/rpc", {
            namespace: "blog",
            database: "blog",
            auth: {
                username: "root",
                password: "root"
            }
        }).then(()=> {
            app.provide(SurrealClientSymbol, db)
        })
    }
}

<template>
    <div>
        <h1>Hello World</h1>

    </div>
</template>

<script setup>
import { inject } from 'vue';
import {SurrealClientSymbol} from '@/plugins/SurrealClientSymbol'

const db = inject(SurrealClientSymbol)
const blogs = db.select("blog")
</script>

[arildm]

You call provide in a then handler, which is async. The install function finishes without waiting for that, and your component injects the symbol before it has been provided, and so inject returns undefined.

One way to handle this could be to provide an empty ref immediately, populate it in the then handler, and watch for it in the component:

    install: (app, options) => {
        const dbRef = ref()
        app.provide(SurrealClientSymbol, dbRef)
        const db = new Surreal();
        db.connect(/* ... */).then(()=> {
            dbRef.value = db
        })
    }

const db = inject(SurrealClientSymbol) // a ref, initially empty
const blogs = ref()
watch(db, () => {
    if (db.value) {
        blogs.value = db.select("blog")
    }
})

[MetRonnie]

If you need to wait for the resource before mounting the app, then you could do something like what vue-router does by having an isReady() method:

let ready
const promise = new Promise(resolve => {
    ready = resolve
})

export default {
    install: async (app, options) => {
        const db = new Surreal()
        app.provide(SurrealClientSymbol, db)
        await db.connect("ws://127.0.0.1:8000/rpc", { ... })
        ready()
    },

    isReady: () => promise,
}

And in main.js:

import myPlugin from '...'

app.use(myPlugin)
await myPlugin.isReady()
app.mount('#app')