You are using useFetch WRONG! (I hope you don't)
Watch on YouTube
💪🏻 useFetch is a mighty composable to fetch data in your Nuxt.js application. It can do so many things, from updating state to refreshing calls easily and even data caching is possible. But often I see that people misuse useFetch because it is so tempting to use all the features, even when you shouldn't. In this video I show the most common mistake with useFetch and what to use instead! Key points: 🤔 A demo application with a common mistake - can you spot it before? ✅ How to fix the bug 2️⃣ Approaches to avoid that useFetch mistake Links: 📺 Is your function really a composable? https://www.youtube.com/watch?v=N0QrFKBZuqA 🔗 ofetch ($fetch in Nuxt): https://github.com/unjs/ofetch 🔗 useFetch docs: https://v3.nuxtjs.org/examples/composables/use-fetch/#usefetch Don't forget to hit that "Subscribe" button, ring the notification bell and give a thumbs up! 🌐 Connect further: Website: https://www.lichter.io Twitter/X: https://twitter.com/TheAlexLichter Twitch: https://www.twitch.tv/TheAlexLichter Chapters: 00:00 Intro 00:50 Demo application overview 01:51 Submitting the form 02:14 The issue pops up 02:40 Explaining the issue 04:42 First solution 06:21 How the issue is caused 07:43 Second solution 09:44 My rule of thumb 10:29 Outro
Video summary
Cette vidéo traite de l'utilisation correcte de la fonction Fetch dans un contexte Vue.js. L'auteur commence par montrer un exemple d'application avec un formulaire de connexion qui utilise la fonction Fetch de manière incorrecte. Cela entraîne de nombreux appels inutiles à l'API de connexion, à chaque fois que l'utilisateur tape quelque chose dans le formulaire.
L'auteur explique que le problème vient du fait qu'il utilise la fonction composable useFetch à l'intérieur d'un gestionnaire d'événements, alors qu'elle devrait être utilisée uniquement dans le bloc setup() ou script setup. En effet, useFetch crée une instance réactive qui surveille les données passées en paramètre, ce qui entraîne des appels multiples lors de la modification de ces données.
La solution proposée est d'utiliser plutôt la fonction $fetch de manière directe, sans passer par un composable. Cela permet d'éviter les problèmes de réactivité et de ne faire qu'un seul appel à l'API lors de la soumission du formulaire.
L'auteur mentionne également une autre approche possible, qui consiste à utiliser useFetch de manière contrôlée. Dans ce cas, on extrait la logique d'appel à l'API du gestionnaire d'événements, on la place dans une fonction execute() indépendante, et on désactive la réactivité des paramètres passés à useFetch. Cela permet de conserver les avantages de useFetch tout en évitant les problèmes de réactivité.
En résumé, la vidéo met en garde contre l'utilisation incorrecte de useFetch et propose deux solutions alternatives pour gérer les appels à l'API de manière plus adaptée dans un contexte Vue.js.