Data Fetching With Nuxt 3
Вставка
- Опубліковано 26 жов 2023
- 📕 Nuxt 3 Course: www.learnnuxt.dev/
🤖 WebDevDaily: www.webdevdaily.io
📕 Vue 3 Crash Course: johnkomarnicki.gumroad.com/l/...
🚀 Join the channel : / @johnkomarnicki
🤖 Website: johnkomarnicki.com/
🐦 Twitter: / john_komarnicki
Learn about the basics of data fetching in nuxt 3. In this video we cover the two composables ( useFetch() & useAsyncData() ) used to fetch data within Nuxt 3.
Data Fetching Docs: nuxt.com/docs/getting-started...
#vue #vue3 #nuxt3 #nuxt - Наука та технологія
* One mistake i made is explaining lazy:false removes the default loading behavior🤦.It should actually be set to lazy:true if you want to handle your own custom loading state as we are doing throughout this video
Thanks @Thr0nSK for pointing this out!
Yeah I am just writing this in comment, then found your comment 😊
That's why I love Nuxt 3. Want to see more content on Nuxt 3. Like designing a proper application with backend.
If possible do proper CRUD in Nuxt 3.
Thank you
Yeah, i'm working on a crash course that will also be apart of the Nuxt 3 course coming out early next year which will feature a full-stack application
Was very confused with all fetching thing but your video made paved the way. 🎉
I’m glad to hear!
Best series ever. I actually had hard time finding this kind of video. Keep it up ❤
Thanks for this explanation! Best I've seen so far from the confusing area of Nuxt :)
I’m glad you found it helpful!
This is a really great overview thanks for putting this together
From the docs:
For finer control, the variable can be:
- idle when the fetch hasn't started
- pending when a fetch has started but not yet completed
- error when the fetch fails
- success when the fetch is completed successfully
🔥👏
Nice content mate! I'm sub. Keep up the good work.
Yep, you can also do this as well! 🤙
As I mentioned, only covered some of the more common use cases, but this is definitely something some could take advantage of!
Awesome style of teaching the intricacies. No doubt the docs say it all but talking through with demonstration to the rationales really helped. Thanks!
I appreciate that, glad to hear this was helpful!
Great video. Would you be able to add details on how certain fields should refetch data based on those fields?
I love Nuxt! More Nuxt content please 😊
Great explaination love your video!
please aslo do state management on nuxt component.
Thanks for your content, its helping me so much ❤
Happy to help!
What a great video. Many thanks.
Thanks for the video & the effort,
Great video!
I am still wondering what the best setup is using Pinia
sir thnx a lot, very nicely explained, i m new to nuxt
Last night I got disappointed with next js update its time to learn nuxt again.
The Vue ecosystem is just far better for developer experience in my opinion
Why??
You aren't going to regret embracing Nuxt/Vue ecosystem. Is so consistent, elegant, fast, solid, very UX, always taking community requested features into consideration and implementing them fast, check out what powers Nuxt, the unjs ecosystem. And the devtools? Chef kiss. 🔥💚
Tried Nextjs, Remix, Sveltekit and even tried Astro for full stack development. Vuejs with Nuxt is the best overall in terms of ecosystem and DX
@@AIZEN155why not
I'm not good at English, but I still understand what you're saying. Good lecture!
What about doing the fetching and handling in a composable? Is that recommended? I like to keep my page code clean. Also should we using he serve api to do the external fetch?
Great explanation
I have a question if we use pick on our call function is that essentially what Graphql tries to implement?
Could you show an example of useFetch wrapper where token from localstorage is set already, 401 error handled with refreshToken
The lazy: false is actually wrong. You should be using lazy: true.
You said that the useLazyFetch is equivalent to useFetch with lazy set to false - but it’s the exact oposite. False is actually the default value for useFetch…
The reason why you page didn’t wait for the promise to resolve is that you removed the await keyword.
Good catch. Yes I definitely mixed up the what the default value was lol. Thanks for pointing this out.
Although John did mix up the lazy property values, it does not seem to make a difference actually.
I played around with this and regardless of lazy: false or lazy: true, if you remove await and use pending to show a loading state then once that is done it show the data it works the same. 🤷
@@smartvideos2709 Yeah, it's a bit confusing.
Is there any use you can recommend for the cms panel
Hey. How can I get filtered products from fakestore api? For example, I want to get products only from two categories. Should I use useFetch with query parms?
When to use optimistic updates vs mutating the data directly in the server ?
Nice 👍🏻
What is the difference between using the buil-in function "usefetch" and using useQuery from tanstack vue-query?
still haven't found the optimal solution for a "Load more" button (without using a third variable, because you need to concat previous results with new results)
useFetch doesn't work on server in my project! It works only when I make routing but if I reload page smth went wrong. I can't solve this problem in nuxt 3. :(
I get an error saying "Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')" when I try clicking nuxt link multiple times, I have top level await to the page I want to go to and set lazy to false in useFetch.
Very nice video
You showed that it blocks the navigation when fetching data (which is exactly what I want), however, I'm using composables. So for example, lets say I have a list of to dos, which are being fetched within a composable. It fetches the data through the supabase nuxt module. In my page/component I want to do this: const { toDos } = useTodos() which works fine. But how do I achieve that the page load should get blocked since fetching data is being handled within the composable?
If you’re using a composbale you should still be able to wrap it in useAsyncData I’m pretty certain
So within my pages/index.vue I would do something like const { data } = await useAsyncData('toDos', () => {
const { toDos } = useTodos()
return toDos
}) ? @@JohnKomarnicki
Thanks for the video.
I have some questions, and I hope to create a video to explain them.
__
1. When using lazy fetching If I want to display a skeleton instead?
Can I create productsList and handle this with suspense or what is the best practice for this.
2. What if I want to add Authorization header for every request to check if the user login. What is the best way, and is there a way to create instance with interceptors for them ($fetch, useFetch,...)
3. What is the best way to store the access token, and how to handle refresh token?
Please create video for authentication in nuxt and explain this.
I'm trying to use NuxtLoadingIndicator the same way but it seems not working?
I’ve noticed an issue with this in the latest version myself.
how to post delete put method?
This section of the docs should explain that! nuxt.com/docs/api/utils/dollarfetch
Thanks for the great video! 👍
I appreciate it!
(Was a bit frustrated that I mixed up the lazy loading default value property 🤦 Hopefully it was still helpful!)