Nuxt•9mo ago

Fetch Data even on page reload using custom Fetch Composable

I am trying to fetch data in a page. I am using a custom Fetch composable. But the fetch seems only to work when I navigate to the page using route links. This page uses a middleware but I think this is not the main concern

<script setup>
definePageMeta.....

const {data: data, pending: pending} = await useAuthFetch('/vendor/me');

<script setup>
definePageMeta.....

const {data: data, pending: pending} = await useAuthFetch('/vendor/me');

composable useAuthFetch:

import type { UseFetchOptions } from 'nuxt/app';

export function useAuthFetch<T>(
    url: string | (() => string),
    options: UseFetchOptions<T> = {}
) {
  return useFetch(url, {
    ...options,
    $fetch: useNuxtApp().$authFetch,
  })
}

import type { UseFetchOptions } from 'nuxt/app';

export function useAuthFetch<T>(
    url: string | (() => string),
    options: UseFetchOptions<T> = {}
) {
  return useFetch(url, {
    ...options,
    $fetch: useNuxtApp().$authFetch,
  })
}

5 Replies

Dragofafmir•9mo ago

I also use a custom composable, the data is still retrieved. Can you say more? I don't see xhr requests during a reload but the data is still obtained

patchamammaOP•9mo ago

Thanks for reading my question, I also don't see a XHR request being made, except the data is not obtained. I am fetching (/vendor/me) something from my node.js server. My useAuthFetch is just composable which sets a JWT token as the auth bearer token.

Dragofafmir•8mo ago

your auth part is in the useNuxtApp().$autFetch ?

import type { UseFetchOptions } from '#app'
import {useAuth, useFetch} from "#imports";

export async function useApiFetch<T>(url: string | (() => string), options: UseFetchOptions<T> = {}, authAccess: boolean = true) {
    const {token} = useAuth()
    const config = useRuntimeConfig()

    await useFetch(config.public.apiDomain + 'sanctum/csrf-cookie', {
        credentials: 'include',
        headers: {
            Accept: 'application/json',
        }
    })

    const laravelCookie = useCookie('XSRF-TOKEN')

    const defaults: UseFetchOptions<T> = {
        baseURL: config.public.apiDomain + 'api/v1/',
        headers: {
            Accept: 'application/json',
            'X-XSRF-TOKEN': laravelCookie.value as string,
            ...(authAccess && {Authorization: token.value ? token.value : ''}),
        },
        credentials: 'include',
        ...options,

    }

    return useFetch(url, defaults)
}

import type { UseFetchOptions } from '#app'
import {useAuth, useFetch} from "#imports";

export async function useApiFetch<T>(url: string | (() => string), options: UseFetchOptions<T> = {}, authAccess: boolean = true) {
    const {token} = useAuth()
    const config = useRuntimeConfig()

    await useFetch(config.public.apiDomain + 'sanctum/csrf-cookie', {
        credentials: 'include',
        headers: {
            Accept: 'application/json',
        }
    })

    const laravelCookie = useCookie('XSRF-TOKEN')

    const defaults: UseFetchOptions<T> = {
        baseURL: config.public.apiDomain + 'api/v1/',
        headers: {
            Accept: 'application/json',
            'X-XSRF-TOKEN': laravelCookie.value as string,
            ...(authAccess && {Authorization: token.value ? token.value : ''}),
        },
        credentials: 'include',
        ...options,

    }

    return useFetch(url, defaults)
}

Here's my custom fetch, made for interact with a Laravel API. Maybe you can take it and adapt with your auth logic.

patchamammaOP•8mo ago

thanks for the example, I've managed to fix my problem. I was retrieving a value that did not exist, so the useAuthFetch silently failed 😭 If somebody knows how I can stop this from silently failing without a try & catch please let me know 😁 I also tried the onRequestError or onResponseError.

Muhammad Mahmoud•8mo ago

You see no requests on reload (or first load for that matter) because the requests are made server side not on the client. Try to log anything in your console.log and you'll see it in the dev server terminal. For the errors you can destruct error from your custom useFetch just like you're destrctring data and pending

Gaming

Programming

Fetch Data even on page reload using custom Fetch Composable