Why I Still Use React Query with Next 14

แชร์
ฝัง
  • เผยแพร่เมื่อ 8 มิ.ย. 2024
  • Check out my courses to become a for awesome web dev courses ✨!
    developedbyed.com/
    Here is the link for the repo as well, do note I haven't yet implemented the likes or delete, so you can just delete anyones post now lol
    github.com/developedbyed/next...
    Let's chat 👋
    Twitter: / developedbyed
    Github: github.com/developedbyed/
    Chapters
    00:01 Is React Query still worth using with Next.js?
    01:18 Using React Hook Form and Next Safe Actions for form validation
    02:40 Fetching and handling post data with React Query
    04:08 Using React Query to handle data fetching and caching in Next.js
    05:42 Initialize and configure React Query in Next.js with a query provider file
    07:03 Using React Query for server-side rendering and data fetching
    08:34 Using React Query for managing state in client side components
    10:09 Demonstration of real-time data fetching and server-side validation
    Dope tracks 🔥
    C Y G N - Take it Eazy chll.to/a2c63d7c
    C Y G N - Sex on the Backseat chll.to/5d8700bb
    C Y G N - Sunset Drive chll.to/d66020b5
    C Y G N - Emotions chll.to/bfeb2b66
    #programming
  • วิทยาศาสตร์และเทคโนโลยี

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

  • @Logicmontana
    @Logicmontana 4 หลายเดือนก่อน +20

    00:01 Is React Query still worth using with Next.js?
    01:18 Using React Hook Form and Next Safe Actions for form validation
    02:40 Fetching and handling post data with React Query
    04:08 Using React Query to handle data fetching and caching in Next.js
    05:42 Initialize and configure React Query in Next.js with a query provider file
    07:03 Using React Query for server-side rendering and data fetching
    08:34 Using React Query for managing state in client side components
    10:09 Demonstration of real-time data fetching and server-side validation

    • @developedbyed
      @developedbyed  4 หลายเดือนก่อน +3

      That's well impressive you did that in a minute, holy crap

    • @Logicmontana
      @Logicmontana 4 หลายเดือนก่อน

      @@developedbyed 😅 wasn't easy but you have been my only tutor from the start, don't need to watch the video twice to understand you .

    • @prashlovessamosa
      @prashlovessamosa 4 หลายเดือนก่อน

      You can also do this with AI Ed​@@developedbyed

  • @developedbyed
    @developedbyed  4 หลายเดือนก่อน +25

    Told ya I'll start posting more,
    hope you enjoy this one 👋

    • @Logicmontana
      @Logicmontana 4 หลายเดือนก่อน

      thats really useful

    • @emsy9471
      @emsy9471 4 หลายเดือนก่อน

      do you have discord server?

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

    I started watching your videos 5 years ago when i was first learning web development and I stumbled on your stuff again and I am so happy you are still making videos!! still as helpful as ever. thanks for the high energy and humor

  • @wisdomelue
    @wisdomelue 4 หลายเดือนก่อน +18

    question is, is that not too many api calls, setting refetch interval to 6 seconds?

  • @nathanblaing
    @nathanblaing 4 หลายเดือนก่อน +9

    I think there is still a strong argument to use React Query if you’re using queries from a variety of sources and/or complex filters that create dependencies. Lots of enterprise apps that I’ve worked on pull data from different sources (APIs, MSSQL, other relational databases etc) and consolidate on the client view. Including filters etc from global state in query keys (which operate as dependency arrays for a given query function) is an elegant pattern that just works.

  • @IvayloDechkoff
    @IvayloDechkoff 4 หลายเดือนก่อน +2

    Hi Ed, thanks for another great video! May I ask what theme you're using in VS Code?

  • @Logicmontana
    @Logicmontana 4 หลายเดือนก่อน +2

    i like the consistency keep it up dev ed thanks again

  • @mathiasriissorensen6994
    @mathiasriissorensen6994 4 หลายเดือนก่อน +1

    This is brilliant! I do wonder how to revalidate when something needs to get updated in my nav bar, which is a part of my layout and not a part of a specific route/page, where I'm mutating from.

  • @aqibmalik6313
    @aqibmalik6313 4 หลายเดือนก่อน +1

    Deved I love you and your work..
    Here is a little motivation
    Keep going always no matter what. Somewhere in a small village of a small town in the state of Kashmir a boy is waiting for ur video

  • @roberth8737
    @roberth8737 4 หลายเดือนก่อน

    Thats a cool use of query. Are you mostly swapping actions in instead of trpc?

  • @learner8084
    @learner8084 4 หลายเดือนก่อน

    Thanks very much for the video. I wonder if server actions works with react native programs ? Or I still need to use API ? Also what network protocols does the server action use ? Would it be possible to route through firewalls ? Thanks again.

  • @ricoputrapradana4407
    @ricoputrapradana4407 4 หลายเดือนก่อน +4

    Hi Ed, just asking, does it mean you're using long polling approach there for getting the "real-time changes"?

    • @motta021
      @motta021 4 หลายเดือนก่อน

      this is a behavior of react query with the refetchInterval

  • @Omarwaqar-pt7wf
    @Omarwaqar-pt7wf 4 หลายเดือนก่อน

    If are calling server action in a server component than there is no need for next-safe action right ? I don't know maybe it sound a bit dump question but I'm still learning

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

    Always enjoy your videos

  • @_tanzil_
    @_tanzil_ 4 หลายเดือนก่อน

    Awesome vs code themeing. Please share your latest vs code setups. ❤

  • @lucasmaia7553
    @lucasmaia7553 4 หลายเดือนก่อน

    Amazing content as always. One thing that I got sad about is, I downloaded your project and I realized that the data comes to the client side with requests so the functions apparently are not dispatch on the server side but indeed on the client side, so in theory you won’t need any of this right? You can double check the console of your browser will have the “creating post…” message, I thought this would be executing on the server side 😢

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

    How would I go about fetching posts that belong to a specific tenant ?
    I have a Supabase table for all my posts, but it's a multi tenant multi user app.
    One thing I'm struggling to get my head around with a drizzle query is getting all the posts that belong to the logged in users tenant ?
    Supabase doesn't have a field in the auth schema to put tenantID so I assign it in the public.users.tenant_id
    How do I get the logged in users tenant _id before I make the query ?
    I'm guessing it's going to come down to using RLS and just making a general query but I'd like to do it programmatically so I can address any bugs or issues from one control source.
    Love your videos, I'm a hobbyist and you've helped with heaps of niche situations I've come across.

  • @usamecoban2582
    @usamecoban2582 4 หลายเดือนก่อน +3

    Hey Ed, thanks for the video. I have a question about this approach. You had an another video on your channel about react-query combo with nextjs14, I tried same methods on my project but when I fetch data just using server actions I can view all the html content by checking page source. But If I use hydration boundary with prefetch query, I dont see any content on the page source

    • @developedbyed
      @developedbyed  4 หลายเดือนก่อน +4

      Ohh that’s interesting, will definitely have a look into it. Their docs say using initial data and hydration boundary give you ssr, ill get back to you 👍

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

      I'm guessing when you set your page component as client side component there's no way it's hydrated on the server side. You should probably keep your page component as server side, and call the action directly for initial server-side hydration. Then, create a client side wrapper around server component that utilises useQuery hook and pass the returned data to server component as prop as you'd normally do with getServerSideProps.

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

      I have the same exact issue after setting up custom hooks of the tanstack query that fetches data from the client side... the data is shown but the page source does not update

  • @thielicious2156
    @thielicious2156 4 หลายเดือนก่อน

    how come you get no type errors during all of that despite working in ts/tsx files. did u change or disable something?

  • @codingintelugu8820
    @codingintelugu8820 4 หลายเดือนก่อน +4

    Within Nextjs you can still pass const revalidate = 3600 at the top of your page or if you are using fetch youn use { next: { revalidate: 3600 } } to revalidate the cache on timelines. I'm still not able to figure out use case of React Query in Nextjs

    • @sudarshan7468
      @sudarshan7468 4 หลายเดือนก่อน

      same here

    • @aurorasofie
      @aurorasofie 4 หลายเดือนก่อน

      Wondering the same.

    • @rgsquintanilha
      @rgsquintanilha 4 หลายเดือนก่อน +2

      This will only work if the endpoint is public. If your fetch uses some sort of authorization (for example passing a cookie for authentication), then you are automatically opt-out.
      Another (arguably smaller) advantage is being able to cache locally. NextJS won't cache during development, so if your call takes long it can be annoying to work on.

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

      @@rgsquintanilha What about using the fetch options, how does it compare? And, if you deploy on some other platform than Vercel, what changes? fetch('...', { next: { revalidate: 3600 } })

  • @edmondbounasr8727
    @edmondbounasr8727 4 หลายเดือนก่อน

    do we have to use revalidate with react query ? because u kept in ur action

  • @alexambrinos
    @alexambrinos 4 หลายเดือนก่อน +1

    Hi, I just want to thank you for opening my eyes. I was thinking of either using the next-safe-action or the react hook form, not realising that i can just use them together to make a killer combo. I just have one question, if we are handling data cache using tanstack query, wouldn't we need to invalidate the cache when creating something new using something like invalidateQueries after being successful? Is it handled by the revalidatePath used in the action? Does it work because it removes the client side router cache and full route cache and so the query runs again on the server because the client makes a new request with the cleared cache?

    • @usamecoban2582
      @usamecoban2582 4 หลายเดือนก่อน

      I think revalidating path triggers the prefetch method in the server component. But didnt try just making a guess

    • @TheEdoRan
      @TheEdoRan 4 หลายเดือนก่อน +3

      I'm the creator of next-safe-action and I always used it with react-hook-form, I think it's an amazing combo. Very glad that now Ed is teaching this approach to the world!

    • @Tanner-cz4bd
      @Tanner-cz4bd 4 หลายเดือนก่อน

      @@TheEdoRan thanks for the amazing project

    • @Tanner-cz4bd
      @Tanner-cz4bd 4 หลายเดือนก่อน

      @@usamecoban2582 I was also thinking the same thing, can someone confirm this?!

  • @airixxxx
    @airixxxx 4 หลายเดือนก่อน +4

    but by using react query you had to make it a client component, right?

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

    How would you implement prefetch and tanstack table?

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

    This refetching approach (every 6 seconds) makes realtime database possible in SSR ❤

  • @Alex.Shalda
    @Alex.Shalda 2 หลายเดือนก่อน

    Love your videos

  • @ukaszzbrozek6470
    @ukaszzbrozek6470 4 หลายเดือนก่อน

    If you are using the next js BE isn't better to use tRCP instead React Query ?

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

    great video!

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

    Thanks to You, I was able to fix an error in my code: useQuery's queryFn needs to be on the server side, otherwise it will throw an error:
    Invariant: headers() expects to have requestAsyncStorage, none available.
    I think it's not documented well, or it's just Next.js things...

  • @Tommy-ev6gv
    @Tommy-ev6gv 4 หลายเดือนก่อน

    Hi Ed, One question regarding the fetching, is it because you use drizzle you get the types of posts?

    • @euanmorgann
      @euanmorgann 4 หลายเดือนก่อน

      Yes it is :)

    • @speedster784
      @speedster784 4 หลายเดือนก่อน

      Prisma also offers this

    • @Tommy-ev6gv
      @Tommy-ev6gv 4 หลายเดือนก่อน

      @@euanmorgann Thanks for the reply. I need to check it out !

    • @developedbyed
      @developedbyed  4 หลายเดือนก่อน +1

      Yeah that’s correct! They both offer it, I went with drizzle cause it’s simple and fast

  • @simpingsyndrome
    @simpingsyndrome 4 หลายเดือนก่อน

    I only use RQ as my global state management and it's sooo great compared to silly rtk library,

  • @nguyenminhhieu8604
    @nguyenminhhieu8604 4 หลายเดือนก่อน +2

    Why not use revalidate in NextJs instead of ReactQuery? I watched your video through to the finish, but I'm not sure why you do it. Will you kindly respond to me?

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

      you can just export revalidate variable and then wrap non fetch request in a react cache, the revalidate will get applied for it too.

  • @iscars
    @iscars 4 หลายเดือนก่อน

    You are using a new QueryClient on the server side without option staleTime (7:50). When I do that, it makes an API request every time without SSR caching. If I add staleTime Infinity, caching starts working, but updates from the client component revalidatePath or revalidateTag are not being executed. Help

    • @lucasmaia7553
      @lucasmaia7553 4 หลายเดือนก่อน

      I thought that was only happening with me, your code is being executed on the client side also right?

    • @iscars
      @iscars 4 หลายเดือนก่อน

      @@lucasmaia7553 I tried various ways to do this with React Query, but nothing worked. I came up with a method of loading data on the server side using native fetch. Then, I forcefully store the result in prefetchQuery. It looks like this: const result = fetch(); await queryClient.prefetchQuery({queryFn: () => result}). Now everything works as I want, but I have to maintain duplicate requests.

  • @Tanner-cz4bd
    @Tanner-cz4bd 4 หลายเดือนก่อน

    this is great

  • @ae_holic
    @ae_holic 4 หลายเดือนก่อน +1

    May I know what your chilled background music is?

    • @developedbyed
      @developedbyed  4 หลายเดือนก่อน +1

      Description has all the tracks in this vid 👍

    • @ae_holic
      @ae_holic 4 หลายเดือนก่อน +1

      @@developedbyed Oh I already was binge reading the descrioption but I was blind :D thanks

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

    Wrapping provider with usestate will resulted as an error: async/await is not yet supported in Client Components!

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

    Why not just use the fetch API and assign tags to revalidate the cache?

  • @juanmacias5922
    @juanmacias5922 4 หลายเดือนก่อน

    From my Firebase experience using web sockets/subscriptions to keep the list updated this approach is very different lol

  • @kimhwanhoon
    @kimhwanhoon 4 หลายเดือนก่อน +3

    I believe you don’t have to put “use server” on the top since the base is server. If you wanna make sure it only runs on server, you import “server-only”

  • @thepenetrator2006
    @thepenetrator2006 4 หลายเดือนก่อน +18

    I can’t programme anymore I swear work is killing me. I think I need another job.

    • @marcvanrenterghem5468
      @marcvanrenterghem5468 4 หลายเดือนก่อน +1

      What's the issue here ?

    • @developedbyed
      @developedbyed  4 หลายเดือนก่อน +8

      Hope you find something that brings back some of that joy. Wishing you best of luck

    • @IanJamieson
      @IanJamieson 4 หลายเดือนก่อน +1

      It's because everything is half baked. Ignore TH-cam 😅

    • @marcvanrenterghem5468
      @marcvanrenterghem5468 4 หลายเดือนก่อน +1

      Actually I was able to make an entire website in NextJS14 without react-query, only using next-safe-action library ;)

  • @svetoslavtrifonov6431
    @svetoslavtrifonov6431 4 หลายเดือนก่อน

    Hi, great video. Sadly I have this error and I can't get rid of it...
    Internal error: TypeError: Cannot read properties of null (reading 'useContext')
    This is when I use the prefetch and HydrationBoundary
    I think it is only in development but still, if anyone has any ideas. Thanks

    • @ervinbehxheti344
      @ervinbehxheti344 4 หลายเดือนก่อน

      Any error that says cannot read properties of null means that the variable or reference you are using has no value

    • @ervinbehxheti344
      @ervinbehxheti344 4 หลายเดือนก่อน

      or probably doesnt exist

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

    you don't need to do any of that, you can just export next.js revalidate constent and set it to some posivite value for the page, and then wrap all the database query logic inside a react cache, now the cache will be revalidated as you set.

  • @gaming_zen_99
    @gaming_zen_99 4 หลายเดือนก่อน +2

    Is SWR acceptable instead 🤔

  • @mikelCold
    @mikelCold 13 วันที่ผ่านมา

    I'd say the proper solution is a websocket, but I'm not sure the best way. React Query is the easiest and good for state management.

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

    I guess, it has a really bad design when user wrap it client component with hydration boundary and passing dehydrate function. It should be simple and clean, in my opinion

  • @gustavokuhluna
    @gustavokuhluna 4 หลายเดือนก่อน

    What about SWR?
    It's so simple, looks fine to my, but I don't know nothing about the comparison between other strategies

    • @Tanner-cz4bd
      @Tanner-cz4bd 4 หลายเดือนก่อน +1

      Lack of updates and poor docs

  • @regilearn2138
    @regilearn2138 4 หลายเดือนก่อน

    pls do MERN stack next js project with TYPESCRIPT ,react query and REDUX

    • @t-shirtguy
      @t-shirtguy 2 หลายเดือนก่อน

      Redux??

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

    50 shades of cache.hihi

  • @jazzymichael
    @jazzymichael 4 หลายเดือนก่อน +3

    It looks like you just implemented a very basic polling solution to refetch all data every 6 seconds...

    • @trebturner
      @trebturner 4 หลายเดือนก่อน +1

      How would you implement it without react query?

    • @inzendis
      @inzendis 4 หลายเดือนก่อน

      @@trebturnerif using Next, I would create a refresh component with the time I want. It will use UseRouter from next/nav and do router.Refresh(). Obv you would need to disable caching with giving headers to the Get req or revalidate = 0.

    • @juancamiloibanezchaparro
      @juancamiloibanezchaparro 4 หลายเดือนก่อน

      @@trebturner set interval with a basic setting cache ? what you do you need more

  • @sarcasticdna
    @sarcasticdna 4 หลายเดือนก่อน

    No next js, I dropped using it

  • @Santiego
    @Santiego 4 หลายเดือนก่อน

    Web devs are masochists lol, there is so much boilerplate