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?

Nuxt•2y ago•

1 reply

Flo | TecToast

TypeScript issues with useAsyncData

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

TypeScript issues with useAsyncData

Similar Threads

TypeScript issues with useAsyncData

Similar Threads

Similar Threads

Similar Threads