N
Nuxtβ€’2mo ago
patchamamma

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
Dragofafmirβ€’5w 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
patchamamma
patchamammaβ€’5w 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
Dragofafmirβ€’5w 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.
patchamamma
patchamammaβ€’5w 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
Muhammad Mahmoudβ€’4w 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