- 28
- 77 342
EricWinkDev
Приєднався 8 лис 2022
Self-taught software engineer sharing the learning journey!
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/
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...
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! 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
when you created a new folder at 3:01 was that to keep your testing separate from the project?
Page not found. The link is not working for me.
No tests weere found error
Thanks, you just saved me a ton of time
Thanks a lot man you really sovled my problem 🥰
Very helpful, thanks! 😀
You are using react not next 😂😂 "use client " for all pages
that cool iwant to make something similair with angular ,can you share the figma assets
Really nice to link the vitest examples. It helped me much cause my setup was failing for some strange reasons
I was so giddy after hearing the name😂. Randomly chose the video and heard a name from my best tech podcast🤭🤭
Nice presentation and super useful! Thank you so much, my component tests don't error out now. Keep up the great work!
Thanks lot brother save me lot of time !!!
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
I have a problem, MISSING DEPENDENCY Cannot find dependency 'jsdom' Should I install it as devdepend?
THANKS
Just wondering, does this approach affect the SEO capabilities of Nextjs?
Brother, great tutorial. I like it because it's spot on.
I get "TypeError: data.map is not a function".... Please how do I solve this??
This is the most helpful thing.
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!!!
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?
Most of the things are not working any more. I think they already changed the setups little bit.
Good. Just why isn't Code suggesting methods from the testing libs?
sourcecode?
timecodes?
Awesome ❤❤
To be honest, It is first video in vitest. It is pretty straightforward to go the content. Thank for clear view
Thanks a lot! Really nice explanation! It would be great if you have more issues explained...
This is really helpful for me buddy thanks so much
Thanks men, very clear!
Thanks a lot😍
you are missing what I'm looking for, data fetch sharing between client and server
Next time, please zoom in more on the text. It's very small if not on full screen (not ideal for alt tab)
Life saver!
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?
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!
good clean explaination.
Thanks for walking us through this!
ABSOLUTLY AMAZING :)
When I run my test code, why jest.fn() Is not definted?
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
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
Great video, thanks!
Hi, nice tutorial, which version of tenstack are you using?
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.
You are really a saviour
Thankyou so much!
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 ?
Thanks a ton for this. Nice and easy setup, first time using vitest for me