CODEWITHSUNDEEP
nuxt3.js
Family
Family

Reputation: 1113

Return a simple object/array from useFetch using Nuxt 3 instead of returning a proxy result

In Nuxt 2 I used to use axios to call my server endpoint which returned an array or an object. I have converted the code to Nuxt 3 but the response is always a proxy object that I seem to have to repeatedly use toRaw on to get the actual array/object. What is the correct way to handle this?

My server side code is:

export default defineEventHandler(async (event) => {
    const query = getQuery(event)
    try {
        return await item.find(
            {
                position:
                    {
                        $near:
                            {
                                $geometry: {type: "Point", coordinates: JSON.parse(query.location as string)},
                                $maxDistance: query.radius
                            }
                    }
            }
        )
            .limit(100)
    } catch (err) {
        console.dir(err)
        event.res.statusCode = 500
        return {
            code: "ERROR",
            message: "Something went wrong."
        }
    }
})

And in <script setup> I have:

const {data: myData} = await useFetch("/api/items", {query: {location: destination.value, radius: searchRadius.value}})

When I console.log(myData.value) I get: enter image description here

If I use toRaw(myData.value) I get a normal array. But I can't set a variable to the array, if I use

items = [...toRaw(myData.value)]

It still returns a proxy value and I again have to use toRaw on items to get the simple array.

Upvotes: 1

Views: 4202

Answers (1)

Family
Family

Reputation: 1113

This isn't a Nuxt 3 thing, it's a Vue 3 thing. See:

https://vuejs.org/guide/essentials/reactivity-fundamentals.html#declaring-reactive-state

You should be able to use the object/array as normal, ignore the proxy. If there are some edge cases where you need to use toRaw, use that then.

Upvotes: 2

Related Questions