React Query Tutorial with Typescript | Part 2 -- Mutations

Подписаться 7 тыс.

Просмотров 13 тыс.

50% 1

In this video, I will introduce and help walk through how to use react-query mutations and invalidate the cache with these mutations.
This part of the video will be focusing on react-query useMutation and introduce query cache invalidation.
React query documentation: react-query.tanstack.com/over...
Starter Project: github.com/leoroese/reactquer...
Finished ReactQuery Tutorial Project: github.com/leoroese/reactquer...
Timestamps
0:00 Intro
1:00 Start create
2:45 useMutation
6:10 useMutation side effects
9:40 query invalidation

Опубликовано:

4 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 19

@albertdugba 2 года назад

The best channels are often the ones that are with less subscribers. Love your content hands downs. Definitely going to like and share

@abdelrahmanabdelatief8375 2 года назад

man, this is by far the best react query tutorial I've watched, love the way you present the content and explain it, your videos are fast paced which is so cool. keep it up man, and don't get discouraged by the numbers man you have one of the best youtube channels out there in my opinion, finally thank you so much for your work

@loganj6203 3 года назад

Your contents and stacks are what I try to build for my small projects! Thank for all video and I'll keep following it.

@CodeDunks 3 года назад

Appreciate it! Glad I could help

@loganj6203 2 года назад

@@CodeDunks I really lost how mutation works since I watch the invalidate part, I do not understand 2 things that first, the mutate send post data to '/api/person/create' and the person data get data from '/api/person' how the mutate data can affect different domain data? second, the invalidation meaning looks like you wanted to change the data but if you don't want to change, you can cancel the process, is it right explanation? I'm not sure my questions are clear but I really lost.

@CodeDunks 2 года назад

@@loganj6203 the mutation allows you to have multiple sub methods that give you more control over what’s happening. For example if you want to quickly update the frontend with what the “new data” is going to be before it actually completes you can via proactive updates. But let’s say that fails, then you don’t want the data reflected to be wrong right? Since the request didn’t ever complete to the DB you can use the sub methods to essentially “rollback” the changes that didn’t go through. In terms of your domain question I’m not entirely sure I follow what is being asked so I’m sorry I’m not able to better answer but you can modify “/api/person” cache data directly from anywhere that you provide access to the client

@loganj6203 2 года назад

@@CodeDunks Thank you for the explanation, I could understand what is the mutation clearly. What I was confused about the domain that the mutation send a request to '/api/person/create' and the person useQuery send a request to '/api/person' but how they can share the person data between them, but I think it was just you wanted to show that how invalidation works so I understand the flow right now. I really appreciate your videos!

@alfieqashwa5257 2 года назад

Subscribed and liked. My feedback is... :Clould you please slow down a little bit?". I'm from Indonesia and English is not my native language. But thanks for this provided typescript using react-query. So much appreciate it.

@user-bt9cf7eu5b Год назад

Thank you ! What a useful video !!!

@Pedro-yo4hr Год назад

Thanks for the amazing video! I was wondering if you could tell me why do we need those 3 arguments on the onSuccess if we aren't using them. Are they optional? Also, what's the meaning of the underscore on _variables and _context? Thanks!

@stevereid636 Год назад

I realised that I needed to learn a bit more about React Query and this series using Typescript is perfect. One thing though is there a reason you're using React.SyntheticEvent in the onSubmit function instead of React.FormEvent?

@alirezavahidi8880 2 года назад

Thanks a lot Leo, everything was great. The only problem is that you scroll up and down too much within the VScode and I personally get confused! :D

@CodeDunks 2 года назад

Sorry about that! Will keep that in mind moving forward, thanks for the heads up!

@ahmedshehata5601 Год назад

what about if I have 4 functions each one doing some logic like update item / delete item / addItem how do toggle btw these in useMutations()

@taetaebeatz5578 2 года назад

You should link pt1 in this video!:)

@jesusmendoza7774 2 года назад

do you know how to type error when using mutation and react-query?

@CodeDunks 2 года назад

I came across this stack overflow that might be of some use. stackoverflow.com/questions/67828232/react-query-mutation-error-not-recognized-as-type-error

@andrearossi2770 2 года назад

your knowledge is good but you really need to work on your wording and speech skills , 70% of your words are "actually" and "kind of" , might throw some people like me off

@CodeDunks 2 года назад

Appreciate the feedback Andrea! I agree and will try my best moving forward!