0

Here is my code

import { Appwrite, Query } from "appwrite";

export default defineNuxtPlugin((nuxtApp) => {
    return {
        provide: {
            api: () => {
                const api = new Appwrite();
                api
                    .setEndpoint(useRuntimeConfig().app.endpoint) // Your API Endpoint
                    .setProject(useRuntimeConfig().app.project) // Your API project ID
                ;
                return api
            }
        }
    }
})
//path: /plugins/demo.js

I was looking for a way around using the runtime config in the /composables directory and the **error: Nuxt instance unavailable** kept popping up, so I thought why not make that function a plugin, since it's used almost everywhere. But the plugin appears to always return null when used with useAsyncData as shown below

//path: /pages/collections/[slug].vue
const { $api } = useNuxtApp();

const { data, pending, error, refresh } = await useAsyncData(`collectionsById-${route.params.slug}`, async () => {
    const products = await $api().database.listDocuments(PRODUCTS_COLLECTION_ID)
    const info = await $api().database.getDocument("62750820bc5ef93a8152", route.params.slug)
    return {
        info: info, /* Uncaught (in promise) TypeError: Cannot read properties of null (reading 'info') at setup ([slug].vue:20:1) */
        data: products
    }
})

The reason for all this is using the runtimeConfig as it is not available in the /composables. Is there a reason for the error info is throwing?

And here is my code simplified

//path: /pages/collections/[slug].vue
const { $api } = useNuxtApp();

const { data, pending, error, refresh } = await useAsyncData(`collectionsById-${route.params.slug}`, async () => {
    const products = await $api().database.listDocuments(PRODUCTS_COLLECTION_ID)
    // const info = await $api().database.getDocument("62750820bc5ef93a8152", route.params.slug)
    return products
})

In this code the data return null

kissu
  • 40,416
  • 14
  • 65
  • 133
Whyte
  • 33
  • 6

0 Answers0