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")
    }
})