Nuxt•4mo ago

TypeScript issues with useAsyncData

Hello, i want to have async data that fetches some api endpoint based on a route parameter. However, if i am on a route that doesn't have this parameter, no data should be fetched and the result should be null. (all of this is part of a Pinia store) At the moment, i use this:

const route = useRoute()
const {data: jdata, status, error, refresh: refreshData} = useAsyncData(() => {
        if(route.params.id)
            return $fetch<JeopardyData>(`/api/jeopardy/data/${route.params.id}`)
        return new Promise<null>((resolve) => setTimeout(() => resolve(null), 200))
    }, {watch: () => route.params.id})

const route = useRoute()
const {data: jdata, status, error, refresh: refreshData} = useAsyncData(() => {
        if(route.params.id)
            return $fetch<JeopardyData>(`/api/jeopardy/data/${route.params.id}`)
        return new Promise<null>((resolve) => setTimeout(() => resolve(null), 200))
    }, {watch: () => route.params.id})

The delay is there to not set the value immediate to null because that flickers on a page that uses this data if i'm navigating away from it. This does work, but my IDE/Typescript Inspections say that my call of useAsyncData doesnt match an overload. Is there something I could do about this or should I just ignore it?

1 Reply

Flo | TecToastOP•4mo ago

If you have other improvements, please tell me, i'm pretty new to Nuxt :)

Gaming

Programming

TypeScript issues with useAsyncData