Mähh Posts - Answer Overflow

Mähh

•Created by Mähh on 11/10/2024 in #❓・help

"useAsyncData" does not show error page on "createError"

Hey there, i want to create a composable for my api. Which just is a wrapper for the useAsyncData component: Within that wrapper i want to throw an global error, in case the api response with a status code >= 500

export default (handler, options) {
   // $client is just an instance of $fetch.create()
   const {$client} = useApiClient()

    return useAsyncData<TRes>(async () => {
        try {
            return await handler($client)
        } catch (e) {
            // global error on api 5xx errors
            if ((e instanceof FetchError || e instanceof H3Error) && e.statusCode >= 500) {
                console.log('This line is executed. Condition is true')
                throw createError({
                  fatal: true,
                  status: 500,
                  message: 'Foo'
                })
            }

            throw e
        }
    }, options)
}

export default (handler, options) {
   // $client is just an instance of $fetch.create()
   const {$client} = useApiClient()

    return useAsyncData<TRes>(async () => {
        try {
            return await handler($client)
        } catch (e) {
            // global error on api 5xx errors
            if ((e instanceof FetchError || e instanceof H3Error) && e.statusCode >= 500) {
                console.log('This line is executed. Condition is true')
                throw createError({
                  fatal: true,
                  status: 500,
                  message: 'Foo'
                })
            }

            throw e
        }
    }, options)
}

And calling that in my page component:

<script setup lang="ts">
const {data} = await useApiData(($client) => $client('/page/will/be/5xx')))
</script>

<script setup lang="ts">
const {data} = await useApiData(($client) => $client('/page/will/be/5xx')))
</script>

This console.log line is shown in the cli (ssr and csr) but the error-page is never shown, not when refreshing the page or navigating using the vue-router.

5 replies

NNuxt

•Created by Mähh on 7/10/2024 in #❓・help

Cloudflare Pages - Cached Subrequest / SSR fetch

Hey there, im using Nuxt in a Cloudflare pages runtime. Using useFetch or useAsyncData on the initial request (SSR) will not do a "real" request, as long the target path is located in server/api routes, correct? It just calls the defineEventHandler, instead of calling the url like useFetch would do it on client-side. This could be a problem, when you start to cache api responses through e.g. Cloudflare. That's because the fetch on server-side (uncached) and client-side (cached) can receive different states. Is there any logic/option to force the fetch method to do an "external request" even on server-side?

14 replies

NNuxt

•Created by Mähh on 6/26/2024 in #❓・help

useCookie does share state between layout and component when used in composable

First of all, here is a reproduction: https://stackblitz.com/edit/nuxt-starter-agstq6 It looks like useCookie does not share the state like useState would between vue components. The useCookie is used within a composable and have a simple function to change the state on button click. When i call the state change function from the layout, watch functions in the same layout will trigger. When i call the state change function from another component, the layout is not aware of the changed state of useCookie When i saw correctly, there is a closed issue on github regarding it: https://github.com/nuxt/nuxt/issues/13020 including a PR https://github.com/nuxt/nuxt/pull/20970 from June 23 to fix this. But using Nuxt v3.12.2 this bug appears again.

6 replies

Gaming

Programming