useAsyncData vs. useFetch 🤯

แชร์
ฝัง
  • เผยแพร่เมื่อ 4 ธ.ค. 2024

ความคิดเห็น • 68

  • @valacshiro378
    @valacshiro378 9 หลายเดือนก่อน +3

    Thank you again, I really like your videos and examples, even though I watched all it will be helpful to include the link or the video when you mention it :)
    Thanks again for keeping it going 🙏

    • @TheAlexLichter
      @TheAlexLichter  8 หลายเดือนก่อน

      Thanks for the suggestion! I include all links in the descriptions and videos as cards in the corner of the video (+ in the description ☺️)

  • @virusblitz
    @virusblitz 9 หลายเดือนก่อน +1

    Amazing video as alsways! Perfect topic as always :D

    • @TheAlexLichter
      @TheAlexLichter  9 หลายเดือนก่อน +1

      Glad you think so! 👌
      Let me know if you have any ideas or topics in mind!

  • @shuanwang4227
    @shuanwang4227 8 หลายเดือนก่อน +1

    This is very helpful! Thank you always.

    • @TheAlexLichter
      @TheAlexLichter  8 หลายเดือนก่อน

      You're so welcome! 🙌

  • @barbapapazes
    @barbapapazes 9 หลายเดือนก่อน +1

    Perfect explanation once again! 👌

  • @codewithguillaume
    @codewithguillaume 9 หลายเดือนก่อน +2

    Yess!!!!!

    • @TheAlexLichter
      @TheAlexLichter  9 หลายเดือนก่อน

      Haha, waited for this one for a while? 😁

  • @nhs119nhs119
    @nhs119nhs119 9 หลายเดือนก่อน

    Like your videos more and more, great job as always!

    • @TheAlexLichter
      @TheAlexLichter  9 หลายเดือนก่อน

      Thank you very much! Is there anything on your mind that could be better? 😊

  • @KefiVitcH
    @KefiVitcH 9 หลายเดือนก่อน +1

    Your content is great and the way you explain things is awesome ! here is a small advice: thhe noise cancelling is cutting some words some time. You may need to reduce it ;)

    • @TheAlexLichter
      @TheAlexLichter  9 หลายเดือนก่อน +1

      Thanks for the tip! Will revisit my gate settings 👌

  • @MrSimpleCF
    @MrSimpleCF 9 หลายเดือนก่อน

    I love you man, always helpful and super insightful

    • @TheAlexLichter
      @TheAlexLichter  8 หลายเดือนก่อน

      You are welcome! Glad I can help 🙏🏻

  • @alimaher1
    @alimaher1 9 หลายเดือนก่อน +1

    As always, great content! Also, I have a question; Is it okay to use Nuxt with complete Client side rendering (Full SPA)? In my work, they can't afford ssr, should I go with nuxt to get all the benefits or it would be overhead?

    • @TheAlexLichter
      @TheAlexLichter  9 หลายเดือนก่อน

      Yes, absolutely! You can build a plain old SPA with Nuxt if you don't need SSR!

  • @chstappert
    @chstappert 9 หลายเดือนก่อน +1

    Thanks a lot for this important insight!

    • @TheAlexLichter
      @TheAlexLichter  9 หลายเดือนก่อน

      Glad it was helpful! 🙌

  • @Дмитрий-л4с9х
    @Дмитрий-л4с9х 3 หลายเดือนก่อน +1

    Thank you for your video!
    Could you please give me an advice. I wanna make the app which can be managed in both directions: if i change my reactives, data will changes and if i come from another page with pre-set query, the data should be correct. Struggling with that 😵
    P.s. Using useAsyncData

    • @TheAlexLichter
      @TheAlexLichter  3 หลายเดือนก่อน

      You are welcome!
      Both ways should work by "watching" the route query I'd say 🤔

  • @jahongirsalimov9587
    @jahongirsalimov9587 9 หลายเดือนก่อน +1

    awesome as usual! Thank you !

    • @TheAlexLichter
      @TheAlexLichter  9 หลายเดือนก่อน

      Thank you! Glad it helps 🙌

  • @QueeeeenZ
    @QueeeeenZ 9 หลายเดือนก่อน +1

    It would also be nice to see how to build useAsyncData from scratch and how it works under the hood.

    • @TheAlexLichter
      @TheAlexLichter  9 หลายเดือนก่อน

      Great idea! Added to the list 👌

  • @gabrielserejo8379
    @gabrielserejo8379 9 หลายเดือนก่อน +1

    nice video alex!

    • @TheAlexLichter
      @TheAlexLichter  9 หลายเดือนก่อน

      Glad you enjoyed it 😋

  • @buxtehude578
    @buxtehude578 9 หลายเดือนก่อน

    Thank you. Could you kindly elaborate on why the useFetch function isn't universally applicable? It feels like a design flaw ... akin to React's approach, requiring users to be aware of specific exceptions, e.g. when dealing with all of their hooks.

    • @TheAlexLichter
      @TheAlexLichter  9 หลายเดือนก่อน

      What exactly do you mean with "isn't universally applicable"? That you can only use it in a Vue context? 👀
      (Related: th-cam.com/video/njsGVmcWviY/w-d-xo.html )

    • @buxtehude578
      @buxtehude578 9 หลายเดือนก่อน

      @@TheAlexLichter Thank you for getting back. As highlighted in both the documentation and the video, it's emphasized that useFetch is intended for data fetching in a component setup function, while $fetch is better suited for making network requests triggered by user interaction.

  • @AksoomHussain7866
    @AksoomHussain7866 9 หลายเดือนก่อน

    your videos are great help to understand behind seen, nowadays i see most nuxt video cover composables and predefined function majorly , i would like you to explore layouts as it seem less explored part of nuxt like implementing persistence layout, nested layout and hook functions in nuxt, may be your tricks help in IRL work

    • @TheAlexLichter
      @TheAlexLichter  8 หลายเดือนก่อน

      Glad they help 🙏🏻
      I put nested layouts on the list 👍🏻
      Hooks are also interesting but they need specific use cases ☺️

  • @LB-q7m
    @LB-q7m 2 หลายเดือนก่อน

    Hi great tutorial. I am using useAsyncData with a handler function that performs multiple $fetch's within to populate page data (as I am hitting a few different apis). But when in my /server/api route I am seeing it is getting called twice. Any ideas on a solution?

    • @TheAlexLichter
      @TheAlexLichter  2 หลายเดือนก่อน +1

      Do you possibly have 2 components calling the same API?

    • @LB-q7m
      @LB-q7m 2 หลายเดือนก่อน

      @@TheAlexLichter I think I got the issue sorted on dev mode. But I notice on prod it's hitting the API twice, almost like it's rendering the page twice or hitting it client and server side at the same time.

  • @gomesbruno201
    @gomesbruno201 3 หลายเดือนก่อน

    so, is useAsyncData like react's useMemo with a different life cycle?

  • @ElTebe
    @ElTebe 9 หลายเดือนก่อน

    How can the above methods be leveraged, for example, in the case of an AWS Amplify GraphQL call?

    • @TheAlexLichter
      @TheAlexLichter  9 หลายเดือนก่อน

      Same idea, but using POST. I'd probably use a dedicated GQL lib/module though

  • @fmoessle
    @fmoessle 9 หลายเดือนก่อน +1

    as always: thank you :)

  • @DavidDeSloovere
    @DavidDeSloovere 9 หลายเดือนก่อน +1

    For other that may wonder, I asked copilot “Why the name $fetch?” Instead of ofetch:
    - The name $fetch is chosen for consistency and ease of use.
    - It aligns with Vue’s convention of prefixing instance properties with a dollar sign (e.g., $data, $props, $emit).

  • @barbapapazes
    @barbapapazes 9 หลายเดือนก่อน +1

    That thumbnail is so fun 😂

    • @TheAlexLichter
      @TheAlexLichter  9 หลายเดือนก่อน +1

      A hilarious one every now and then 😛

  • @_parassolanki
    @_parassolanki 9 หลายเดือนก่อน

    It would be nice to have composable for mutation like `useMutation` available in tanstack query currently for mutation we can't use useFetch and it does not success, error callbacks.

    • @TheAlexLichter
      @TheAlexLichter  8 หลายเดือนก่อน

      You could use useFetch with interceptors though, couldn't you? 🤔

  • @Tarabass
    @Tarabass 9 หลายเดือนก่อน +1

    Nice video, as always! How do you do that, talking at conferences and posting video's on yt at the same time lol 😅

    • @TheAlexLichter
      @TheAlexLichter  9 หลายเดือนก่อน +1

      Haha, just because I am not there I can't let the people wait for the content 😁
      Though I didn't do many announcements around (will do that on Monday)
      Was nice meeting you in person!

  • @elviskemboi7668
    @elviskemboi7668 9 หลายเดือนก่อน

    am trying to use fetch with a laravelapi and when i run my nuxt app i get that useFetch component has already been mounted see the $fetch what can i do about this

    • @TheAlexLichter
      @TheAlexLichter  9 หลายเดือนก่อน

      My video about useFetch should help you there! th-cam.com/video/njsGVmcWviY/w-d-xo.html 🙌

  • @DevMarques
    @DevMarques 9 หลายเดือนก่อน

    Great video as always.
    How would you leverage useFetch with a repository pattern? My whole repository file is sustained on something like this and the same query might at some point be triggered by user interaction (which triggers a warning when using useFetch) or just plain data fetching (which works just fine):
    import type {$Fetch, NitroFetchRequest} from 'nitropack'
    import type {ApiResponse, ApiResponseWithCursorMeta} from "~/types/responses.generics.interface";
    export const eventsRepository = (fetch: $Fetch) => ({
    async get(cursor: null | string = null): Promise {
    let url = '/events/';
    if (cursor) { url += `?cursor=${cursor}` }
    return fetch(url)
    },
    })

    • @TheAlexLichter
      @TheAlexLichter  9 หลายเดือนก่อน

      Thank you!
      I'd go with useAsyncData as shown in th-cam.com/video/jXH8Tr-exhI/w-d-xo.html 😊

  • @vensonhunt
    @vensonhunt 8 หลายเดือนก่อน

    if the url is build upon query, which is not the options of useFetch, how to make it work

    • @TheAlexLichter
      @TheAlexLichter  7 หลายเดือนก่อน

      How do you mean that? You can pass it to useFetch anyway ☺️

  • @freekeys
    @freekeys 5 หลายเดือนก่อน +2

    useAsyncData is more like useEffect in react that has watcher

  • @ArnoldGotClips
    @ArnoldGotClips 9 หลายเดือนก่อน +1

    'DX' is short form for what?

    • @TheAlexLichter
      @TheAlexLichter  9 หลายเดือนก่อน +3

      Developer Experience ☺️

  • @mr.developer617
    @mr.developer617 6 หลายเดือนก่อน

    Thank You

  • @yoskokleng3658
    @yoskokleng3658 2 หลายเดือนก่อน

    so headache, i would use axios instead :)).

    • @TheAlexLichter
      @TheAlexLichter  2 หลายเดือนก่อน

      Keep in mind that axios is comparable to $fetch but not to the fetching composables like useFetch or useAsyncData

  • @nanaassumadu4997
    @nanaassumadu4997 9 หลายเดือนก่อน

    ow God I love you

    • @TheAlexLichter
      @TheAlexLichter  8 หลายเดือนก่อน

      🙏🏻🙏🏻🙏🏻

  • @jurarexx
    @jurarexx 9 หลายเดือนก่อน +1

    • @TheAlexLichter
      @TheAlexLichter  9 หลายเดือนก่อน

      Because it is checked (up to) 3x in the code 😊
      Does that cause an issue?
      I briefly talked about that in th-cam.com/video/Tu9R074zPz0/w-d-xo.html too 🙌