EricWinkDev
EricWinkDev
  • 28
  • 77 342
How to Use React Query with NextJS 13
Want to learn how to use React Query aka Tanstack Query?
Want to learn how to write cleaner code and more manageable React components?
In this video, I review the process of setting up Tanstack in a NextJS 13 application. I also show the process of setting up query functions, mutation functions, query keys, refetching, devtools, etc.
While this isn't meant to be a full code-along, it should be an informative video that helps you write cleaner components in your React applications, which a much better process of handling asynchronous state
Tanstack: tanstack.com/
Shadcn/ui: ui.shadcn.com/
NextJS: nextjs.org/
Переглядів: 27 832

Відео

Why You Should Use React Query
Переглядів 2 тис.Рік тому
What is Tanstack Query, formerly known as React Query? What does it help you do in your application and why should you care? In this video we give a quick overview of how Tanstack can help you write cleaner code and more independent components in your react applications
We Should Watch - Update 5
Переглядів 47Рік тому
If you recall from past updates, the purpose of this app is to have groups with others that you can all add media to so you can keep track of what you want to watch together, as well as easily access information for movies/tv shows like actors, genres, streaming data. In this video we review the logic of inviting a user to a group, which creates and sends an invitation email. On the opposite en...
We Should Watch - Update 4
Переглядів 61Рік тому
The fourth video in my We Should Watch... update series! This is a big one! Summary below. If anything in the video is unclear, or you’d just like a deeper dive, let me know and I’ll make a follow-up! Authorization : I’m handling authorization with NextAuth, and it’s so easy that it feels like cheating. We review the Sign In button, the setup of the component (useSession, signIn(), signOut() fr...
We Should Watch - Update 3
Переглядів 31Рік тому
The third in a series of videos on my We Should Watch... project! Keep in mind all the styles are super basic at this point! In this video I do a quick review on the search bar and the media details page, and how the routing is handled in NextJS, then we dive into the Streaming Options component. For this component, I send data to my backend, which then calls out to TMDB's API. The data we rece...
We Should Watch - Update 2
Переглядів 79Рік тому
The second video in the series of updates for my We Should Watch... project! In this video I review some updates on the Front End. 1. PosterButton component & PreviewCard component 2. We review the array of objects that we receive on an API call that is passed in as props utilizing the spread operator 3. Interface file where we have some interfaces set up for Typescript 3. PreviewCard: 3a. Tern...
We Should Watch - Update 1
Переглядів 145Рік тому
Time for some Build In Public videos! I'm working on a project I'm calling "We Should Watch..." Originally posted on LinkedIn... In this video we cover the following topics: - What is my application and why am I making it? - Basic flow of how a user will use the application (in #figma ) - Using NextJS - External API calls to TMDB - Using Prisma to interface with MongoDB - How Prisma handles Mod...
How to use Vitest with Jest-DOM and React Testing Library
Переглядів 42 тис.2 роки тому
In this next Code With Me series, I'll be experimenting with the world of Test Driven Development. Before we get started, we need to set up our environment for testing. I have decided to use Vitest, since I am an avid user of Vite. I don't want to use Create-React-App even though the testing is ready to go. I find CRA bloated and slow, but I still want to use the awesome tools provided by React...
How To Use Pre-rendering and Data Fetching - a Next JS Tutorial
Переглядів 3692 роки тому
Hello Documentation Nation! We continue learning Next JS by reading through and analyzing the documents provided on nextjs.org. In this session, we go through the options available for pre-rendering and data fetching. In this tutorial series, we learn together the basics of Next JS, a React JS framework, by reading through the documentation, breaking down coding examples, and following along wi...
Deleting board data with findIndex() and splice()
Переглядів 1312 роки тому
This will be the last video showing work on the Kanban Task Tracker In this session, we: - create a component to render a button, and onClick, a pop-up to edit/delete an item - use array methods .findIndex() and .splice() to help us locate and then delete the specified Kanban Task Board from the boards array in our data - troubleshoot some display issues, most notably with z-index and how the z...
How to use Assets, Metadata, and CSS - a Next JS tutorial
Переглядів 3952 роки тому
Hello Documentation Nation! We continue learning Next JS by reading through and analyzing the documents provided for us. In this session we go through handling assets (image files), using metadata, and styling with CSS using module imports and global CSS. In this tutorial series, we learn together the basics of Next JS, a React JS framework, by reading through the documentation, breaking down c...
Coding A Navbar in the Kanban Task Tracker
Переглядів 1232 роки тому
Code with me! Continuing work on the Kanban Task Tracker, lots of CSS in this one! In this session, we start off by listing out the remaining functionality we have to work through, then we start adjustments on the navbar. We use display flex and justify content space-between to set the distance for our elements in the navbar. We discuss the box model and containing elements. We hit a minor disp...
How to setup Routing with Link - Next JS tutorial
Переглядів 3182 роки тому
Hello Documentation Nation! In this video we are starting a series to learn Next JS. If you aren't aware of Next JS, it is a React JS framework. It is intended to build onto React and make the process of creating full stack applications easier, as well as provide numerous improvements for SEO, performance, and more. We'll find out what the fuss is all about by going through the docs! In this tu...
Code With Me (mini) - Fix the Splice - Kanban Task Tracker
Переглядів 1712 роки тому
It's a chill kind of morning and we are continuing work on our Kanban Task Tracker... We fix the issue we left off with in the previous video, where changing the status of a task during the edit process would splice it inside of the new column, rather than push to the end. We go slowly through the steps, and accomplish the following: 1. Compare previous task data to new task data to get a boole...
Learn React - useState
Переглядів 1282 роки тому
Learn React - useState
Code With Me - Edit Task Immer Function - Kanban Task Tracker
Переглядів 882 роки тому
Code With Me - Edit Task Immer Function - Kanban Task Tracker
Code With Me - Edit Task Modal - Kanban Task Tracker
Переглядів 2072 роки тому
Code With Me - Edit Task Modal - Kanban Task Tracker
Code With Me (mini) - Custom Hooks - Kanban Task Tracker
Переглядів 792 роки тому
Code With Me (mini) - Custom Hooks - Kanban Task Tracker
Code With Me - Add Board Modal - Kanban Task Tracker
Переглядів 7542 роки тому
Code With Me - Add Board Modal - Kanban Task Tracker
Code With Me - Confirm Delete Modal - Kanban App
Переглядів 722 роки тому
Code With Me - Confirm Delete Modal - Kanban App
LEARN OUT LOUD! Kanban Tracker and Spread Syntax - Update 5
Переглядів 402 роки тому
LEARN OUT LOUD! Kanban Tracker and Spread Syntax - Update 5
LEARN OUT LOUD! Kanban Tracker and Immer - Update 4
Переглядів 712 роки тому
LEARN OUT LOUD! Kanban Tracker and Immer - Update 4
LEARN OUT LOUD! Kanban Tracker and useContext - Update 3
Переглядів 1042 роки тому
LEARN OUT LOUD! Kanban Tracker and useContext - Update 3
LEARN OUT LOUD! Kanban Tracker - Update 2
Переглядів 2142 роки тому
LEARN OUT LOUD! Kanban Tracker - Update 2
LEARN OUT LOUD - Connect Four Project
Переглядів 1232 роки тому
LEARN OUT LOUD - Connect Four Project
LEARN OUT LOUD! Kanban Tracker - Update 1
Переглядів 2132 роки тому
LEARN OUT LOUD! Kanban Tracker - Update 1
LiveStream Kanban FrontEndMentor Challenge 1
Переглядів 1,1 тис.2 роки тому
LiveStream Kanban FrontEndMentor Challenge 1

КОМЕНТАРІ

  • @ethanjacobsson
    @ethanjacobsson 16 днів тому

    when you created a new folder at 3:01 was that to keep your testing separate from the project?

  • @Sulaiman-softoo
    @Sulaiman-softoo Місяць тому

    Page not found. The link is not working for me.

  • @михаилкиселёв-н5г
    @михаилкиселёв-н5г 3 місяці тому

    No tests weere found error

  • @jamesbotwina8744
    @jamesbotwina8744 4 місяці тому

    Thanks, you just saved me a ton of time

  • @forall7586
    @forall7586 5 місяців тому

    Thanks a lot man you really sovled my problem 🥰

  • @dantheman8300
    @dantheman8300 5 місяців тому

    Very helpful, thanks! 😀

  • @ezadeeeeen
    @ezadeeeeen 5 місяців тому

    You are using react not next 😂😂 "use client " for all pages

  • @o.abdelaaziz
    @o.abdelaaziz 5 місяців тому

    that cool iwant to make something similair with angular ,can you share the figma assets

  • @vponochovny
    @vponochovny 5 місяців тому

    Really nice to link the vitest examples. It helped me much cause my setup was failing for some strange reasons

  • @tobibada6443
    @tobibada6443 6 місяців тому

    I was so giddy after hearing the name😂. Randomly chose the video and heard a name from my best tech podcast🤭🤭

  • @jeff-creations
    @jeff-creations 6 місяців тому

    Nice presentation and super useful! Thank you so much, my component tests don't error out now. Keep up the great work!

  • @FingerTipWisdom
    @FingerTipWisdom 6 місяців тому

    Thanks lot brother save me lot of time !!!

  • @DrumkitCodes
    @DrumkitCodes 7 місяців тому

    Thanks so much for the tutorial! I couldn't figure out how to get vitest working before, I really appreciate how you went through the full setup and explained why we were setting certain things to certain values. Can't wait to see more in your TDD series

  • @ЭзизК
    @ЭзизК 7 місяців тому

    I have a problem, MISSING DEPENDENCY Cannot find dependency 'jsdom' Should I install it as devdepend?

  • @somajuice666
    @somajuice666 7 місяців тому

    THANKS

  • @jamieblair4336
    @jamieblair4336 8 місяців тому

    Just wondering, does this approach affect the SEO capabilities of Nextjs?

  • @kikevanegazz325
    @kikevanegazz325 8 місяців тому

    Brother, great tutorial. I like it because it's spot on.

  • @adejoh6650
    @adejoh6650 8 місяців тому

    I get "TypeError: data.map is not a function".... Please how do I solve this??

  • @paulgasbarra
    @paulgasbarra 9 місяців тому

    This is the most helpful thing.

  • @francistrujillo2488
    @francistrujillo2488 9 місяців тому

    DUDE!!!! You are a TRUE JEDI!!! I have been racking my brain for 2 days. UA-cam, Chatgpt, Gemini, Copilot, Google search....... Nada! Except for you. AWESOME!!!

  • @fantabarack
    @fantabarack 10 місяців тому

    Hey Eric, thanks for the video. What if I want to fetch two endpoints at the same time and show all the data on one page but two datatables and listen to that particular data and if something changes, a toast msg appears. Can I add all the fetches and datatables toast component in page.tsx? what is the best structure in this case?

  • @abhijitmondalabhi2146
    @abhijitmondalabhi2146 10 місяців тому

    Most of the things are not working any more. I think they already changed the setups little bit.

  • @Gabriel-kl6bt
    @Gabriel-kl6bt 10 місяців тому

    Good. Just why isn't Code suggesting methods from the testing libs?

  • @27sosite73
    @27sosite73 10 місяців тому

    sourcecode?

  • @27sosite73
    @27sosite73 10 місяців тому

    timecodes?

  • @Anshumantiwarianstiwar
    @Anshumantiwarianstiwar 10 місяців тому

    Awesome ❤❤

  • @Prathap_SK
    @Prathap_SK 11 місяців тому

    To be honest, It is first video in vitest. It is pretty straightforward to go the content. Thank for clear view

  • @zorancijevski4494
    @zorancijevski4494 11 місяців тому

    Thanks a lot! Really nice explanation! It would be great if you have more issues explained...

  • @coderboyakash5853
    @coderboyakash5853 11 місяців тому

    This is really helpful for me buddy thanks so much

  • @simonprato9666
    @simonprato9666 11 місяців тому

    Thanks men, very clear!

  • @walidaguib3944
    @walidaguib3944 11 місяців тому

    Thanks a lot😍

  • @ooogabooga5111
    @ooogabooga5111 11 місяців тому

    you are missing what I'm looking for, data fetch sharing between client and server

  • @tinhoCs
    @tinhoCs 11 місяців тому

    Next time, please zoom in more on the text. It's very small if not on full screen (not ideal for alt tab)

  • @davidjnevin
    @davidjnevin 11 місяців тому

    Life saver!

  • @manavjethani4118
    @manavjethani4118 Рік тому

    This is really great, i am able to setup vitest with your help, although i am stuck with this error `TypeError: Class extends value undefined is not a constructor or null` while using amcharts4 in our project, wanted to ask do we have to do add any config to allow `Class extends` syntax?

  • @krzysztofs3t532
    @krzysztofs3t532 Рік тому

    28:48 - man! WTF :D - nice reworking of shadcn button! I remember once I reworked completeley one of this date pickers from Material UI - it tooks me ages!

  • @subhranshudas8862
    @subhranshudas8862 Рік тому

    good clean explaination.

  • @faruzzy
    @faruzzy Рік тому

    Thanks for walking us through this!

  • @1haker
    @1haker Рік тому

    ABSOLUTLY AMAZING :)

  • @djarma7980
    @djarma7980 Рік тому

    When I run my test code, why jest.fn() Is not definted?

  • @ErickoAndriamanarivo
    @ErickoAndriamanarivo Рік тому

    I really needed this one, I am switching to typescript and react-vite now and I am struggling with testing with jest library with typescript. This one is easier to configure and faster. You should continue this TDD serie dude, you will help a lot of young, beginners, junior developers like me

  • @VinhDo-u5x
    @VinhDo-u5x Рік тому

    I think you should have everything empty first. Follow your instruction with a lot of your code already there is hard to follow. I follow and it not work, complain about 'use client' something

  • @ronyortizop
    @ronyortizop Рік тому

    Great video, thanks!

  • @saadmanbjitsaadmanbjit
    @saadmanbjitsaadmanbjit Рік тому

    Hi, nice tutorial, which version of tenstack are you using?

  • @longhuynh8277
    @longhuynh8277 Рік тому

    in senario where we only use react and not nextjs, declare queryClient = new queryClient() outside of App component not create queryClient everytime app is re-render. So you don't have to worry about state.

  • @pranshubasak8796
    @pranshubasak8796 Рік тому

    You are really a saviour

  • @splat_bang
    @splat_bang Рік тому

    Thankyou so much!

  • @lewischarlton7420
    @lewischarlton7420 Рік тому

    Thanks for the tutorial! Just wondering what version of React-Query you was using for this? It seems they've done quite a few updates in the last 2 months so a few things have changed e.g. isLoading no longer available in useMutation ?

  • @keifer7813
    @keifer7813 Рік тому

    Thanks a ton for this. Nice and easy setup, first time using vitest for me