Nuxt•7mo ago

Moving between pages Problem in Nuxt 3.10.03, ssr:false

When moving between pages, the page moves after the API call is completed. Isn't it usually an API call after turning the page? Or is it a problem that I use useAsyncData + $fetch? The "pending" value also does not work in case of a POST request after refresh. I'm sharing my custom composable file.

// composables/useApi.ts
export const useBaseFetch = <T>(url: string, options?: any, query?: any) => {
    const apiBaseUrl = getBaseUrl();
    const route = useRoute()

    const { initialize, ...rest } = (options ?? {});

    const asyncDataOptions: AsyncDataOptions<T> = {}
    const optss = computed(() => {
        const _ = {
            baseURL: apiBaseUrl,
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'source': route.fullPath,
            },
            ...rest
        }
        return _
    })
    
    const urlWithQuery = computed(() => query ? `${url}?${serialize(query.value)} ` : url);

    const key = hash(urlWithQuery.value)    
    const _fetch = useAsyncData(key, () => $fetch(urlWithQuery.value, optss.value) as Promise<T>, asyncDataOptions)
    const { setIsLoading } = useStore()
    watch(_fetch.pending, (v) => {
        setIsLoading(v)
    })

    watch(_fetch.error, (e: any) => {
    })
    return _fetch;
}

// composables/useApi.ts
export const useBaseFetch = <T>(url: string, options?: any, query?: any) => {
    const apiBaseUrl = getBaseUrl();
    const route = useRoute()

    const { initialize, ...rest } = (options ?? {});

    const asyncDataOptions: AsyncDataOptions<T> = {}
    const optss = computed(() => {
        const _ = {
            baseURL: apiBaseUrl,
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'source': route.fullPath,
            },
            ...rest
        }
        return _
    })
    
    const urlWithQuery = computed(() => query ? `${url}?${serialize(query.value)} ` : url);

    const key = hash(urlWithQuery.value)    
    const _fetch = useAsyncData(key, () => $fetch(urlWithQuery.value, optss.value) as Promise<T>, asyncDataOptions)
    const { setIsLoading } = useStore()
    watch(_fetch.pending, (v) => {
        setIsLoading(v)
    })

    watch(_fetch.error, (e: any) => {
    })
    return _fetch;
}

Thanks

2 Replies

magius•7mo ago

you can useLazyAsyncdata: https://nuxt.com/docs/api/composables/use-lazy-async-data

Nuxt

useLazyAsyncData · Nuxt Composables

This wrapper around useAsyncData triggers navigation immediately.

itmasterOP•7mo ago

Thanks

Gaming

Programming

Moving between pages Problem in Nuxt 3.10.03, ssr:false