How to force a page to perform API calls

[agiovinazzi]

Hi everyone, First of all, I apologize for any inaccuracies in my question. I'm getting back to the frontend after a few years.

I'm building a management system with Vue 3 and Nuxt 3. On some pages, I would need calls to the backend to be made every time for each visit (both on refresh of the page and clicking on the menu links that open it).

I currently have calls in onMounted(), I use useFetch() to make them, and server-side rendering is disabled.

Currently, when I open the page the "first" time, it makes calls regularly, then I go to a second page, but if I return to the first, it keeps the data in cache. Instead, I would like it to redo all the calls on that particular page.

I hope that my question is clear.

Thanks in advance!

[smastrom]

Hi @agiovinazzi, there are different ways to do that depending on the context.

Since you're not server-side rendering and you don't need to de-duplicate requests across server and client, the most straightforward would be to use $fetch in a top-level await:

data.value = await $fetch('https://jsonplaceholder.typicode.com/comments')

Nuxt will show the loading indicator until that call is completed and then complete the navigation.

Another way to get the same outcome without sacrificing the useFetch API is to call it top-level and return null or undefined on the getCachedData method option.

const { data } = await useFetch('https://jsonplaceholder.typicode.com/comments', {
  getCachedData() {
    return null
  }
})

Bear in mind that this only works with Nuxt >= 3.8.

[agiovinazzi]

Thanks a lot @smastrom, I've updated Nuxt to 3.9 now.

I'm trying to use getCachedData, but I'm doing something wrong.

I use useFetch in two different composables (one for admins, one for other users) to avoid passing headers, options etc... every time.

export function useOperatorApiFetch<T> (path: string | (() => string), options: UseFetchOptions<T> = {}) {
    const auth = useAuthStore();

    let headers: any = {};

    const runtimeConfig = useRuntimeConfig();

    return useFetch(runtimeConfig.public.operatorBaseApiUrl +  path, {
        watch: false,
        ...options,
        headers: {
            'Accept': 'application/json',
            'Authorization': 'Bearer ' + auth.token,
            ...headers,
            ...options?.headers,
        },

    });
}

If I add

 getCachedData() {
    return null
},

before or after watch or options, I have the error No overload matches this call

EDIT
I've tried

options.getCachedData = undefined

It gives me no errors but it doesn't work, the page won't call endpoints when I open it the second time.

[smastrom]

Hi @agiovinazzi, I tried to reproduce here your error using two different useFetch-based composables sharing same URL with getCachedData returning null. It's working as expected.

Registrazione.schermo.2024-01-04.alle.15.21.25.mov

The TS error you're getting suggests that you're calling a function with arguments that don't match any of their implementation signatures. More info here.

Another note that has nothing to do with the above error, is that your composable accept a path parameter which could be a function that returns a string and then, trying to concatenate it with the base. This won't work.

At this point I would say to review any implementation and call of any involved function, and also make also any Nitro dependency has been upgraded along with Nuxt via:

npx nuxi upgrade --force

[agiovinazzi]

Thanks a lot again, sorry for my bad knowledge of Nuxt and Vue. I've tried again upgrading everything, but I can't get it to work.

I've found a workaround, using onActivated instead of onMounted. It's frustrating because I need to change every single page.

Anyway, the endpoints are working with the string concatenation with the base path.

[smastrom]

You're welcome and you don't need to be sorry.

However, won't be better to call useFetch top-level instead of calling it an onMounted hook? What's great about Nuxt is that you don't have to deal with Suspense yourself like you would with Vue when using a top-level await (or defineAsyncComponent).

useFetch is also great because it provides navigation prevention, error handling and LoadingIndicator triggering, but this is not going to work as expected if you use an hook because you're actually not telling Vue that the page/component needs to resolve something before rendering. AFAIK both useFetch and useAsyncData are designed exactly to avoid fetching in an onMounted hook.