Global $fetch hooks

Is it possible to globally define hooks for onRequest and onResponseError (apart from having to create a custom useFetch and use that everywhere)?
2 Replies
kapa.ai
kapa.ai3w ago
Hi @Septatrix. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it is possible to globally define hooks for onRequest and onResponseError in Nuxt without creating a custom useFetch. You can achieve this by creating a custom $fetch instance with global interceptors using a Nuxt plugin. Here's how you can do it: 1. Create a Nuxt plugin file, for example, plugins/api.ts:
export default defineNuxtPlugin((nuxtApp) => {
const api = $fetch.create({
onRequest({ request, options }) {
// Global onRequest logic here
console.log('Request:', request)
},
onResponseError({ request, response, options }) {
// Global onResponseError logic here
console.log('Response Error:', response.status)
}
})

// Expose to useNuxtApp().$api
return {
provide: {
api
}
}
})
export default defineNuxtPlugin((nuxtApp) => {
const api = $fetch.create({
onRequest({ request, options }) {
// Global onRequest logic here
console.log('Request:', request)
},
onResponseError({ request, response, options }) {
// Global onResponseError logic here
console.log('Response Error:', response.status)
}
})

// Expose to useNuxtApp().$api
return {
provide: {
api
}
}
})
2. This plugin creates a custom $fetch instance with global interceptors and exposes it as $api through useNuxtApp(). 3. You can then use this custom $api in your components or pages:
<script setup>
const { $api } = useNuxtApp()
const { data } = await useAsyncData('modules', () => $api('/modules'))
</script>
<script setup>
const { $api } = useNuxtApp()
const { data } = await useAsyncData('modules', () => $api('/modules'))
</script>
This approach allows you to define global hooks for all API calls made through $api without having to create a custom useFetch composable. Source: Custom $fetch in Nuxt (https://nuxt.com/docs/guide/recipes/custom-usefetch#custom-fetch) It's worth noting that while this method provides a way to set up global interceptors, it's not directly modifying the global $fetch or useFetch. Instead, it creates a new instance with the desired behavior. This approach is recommended because the core $fetch utility is intentionally not globally configurable to maintain consistent behavior throughout the application. Source: Custom useFetch in Nuxt (https://nuxt.com/docs/guide/recipes/custom-usefetch) For more detailed information and examples, you can refer to the video tutorial: Custom $fetch and Repository Pattern in Nuxt 3 (https://www.youtube.com/watch?v=jXH8Tr-exhI). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai3w ago
<@525348219828568076> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Want results from more Discord servers?
Add your server