Why I always use react-query on my react apps
ฝัง
- เผยแพร่เมื่อ 31 ต.ค. 2022
- 💬 Discord / discord
🤑 Patreon / webdevjunkie
🔔 Newsletter eepurl.com/hnderP
📁. GitHub github.com/codyseibert/youtube
My VSCode Extensions:
- theme: material community high contrast
- fonts: Menlo, Monaco, 'Courier New', monospace
- errors: Error Lens
- extra git help: Git Lens
- tailwind css intellisense
- indent rainbow
- material icon theme
- prettier & eslint
- ES7+ React Snippets
Omg just discovered this. Idk if I lived behind the moon or smth not finding this library sooner. It looks so good!
Great video!, My first noob mistake was to try to use React-Query for "Everything", but the truth is that things like a login or analytic reporting requests should probably don't need to use it. So it's important to identify where this will give us a real benefit.
I think you can still use mutations for login if you wanted that built in isLoading flag or error boolean if stuff goes wrong
Definately need it for logging in, maybe not for small get requests but still theres nothing wrong with using it for everything
Great stuff, awesome as always 👍
simple example but gold explanation. thanks for sharing!
Oh thank god…you just solved an issue i have been looking for like an hour.❤❤❤
Hi I am still quite confused. Where do you set the todo as a query key, and it is a github repository for this video? I couldn't find it. Thank u
What about using a real-time databases like firebase? Is there any point in using react query with that? Firebase real-time database notifies of changes and gives the latest data to clients.
great tutorial cody
Hi Cody, great video. i haven't got to use Nextjs yet, but I have used React and React-Query together, when using React-Query with Nextjs does that mean you don't have to fetch data with getServerSideProps function or am I way off the mark
You’d still need get server side props if you plan to do ssr
do you use react context or redux toolkit for state management?
Good job babe!!!!
YESSSS I found this and I LOVE IT!!!!
Next13 seems to handle the server side fetching and loading states but for mutations(Post reqs) in client side components the tanstack query will keep on providing greatness still. React says it's the official fetching method now for react but it's unfinished I think, they should have provide an easy way to mutate data too, fetching wasn't a biggie after react query or swr anyways. Can you make a video where a client side component mutates data with prisma "in" the component?? I think it would provide a great value.
I probably would not write prisma calls inside a component, that sounds like going back to php
@@WebDevCody Exactly, I feel like it opened the door for, Wordpress like plugins and widgets to be developed. Which is a great news imo. I used Wordpress for years, would love a tool that is faster, more secure, more agile and not written in PHP :).
@@BarisPalabiyik oh sorry I meant to say would not 😅 I like decoupling my views from my data via api calls. Having prisma directly in components seems like a code smell
@@WebDevCody I see, smart layouts can be value for new people who want to go full-stack I feel and maybe even for big apps. Because seperation of concerns is handled by component base system, I didn't like the MVC codebases where I am all over the place. Fetching in nested layouts is what they are pushing now, and the idea of standardized ecosystem with tailwind, prisma, next where you can just drop a directory and have a fully fledged widget or mini-fullstack-app that you can put wherever in your app sounds delicious.
Great video DevJunkie, am also using react-query, and am facing an issue, I want to "await" a queryKey variable... like a token from Oauth... when the component is initialized Oauth is triggered but react-query doesnt wait the auth.token (for instance)to be available before making the fetch... so the token in fetch() is first null, next undefined and THEN defined... it causes errors in the console... can tell me whats happening ?
I would just make the callback which does the api request just return null if no token is set. That would prevent a network request and just return some default empty state until token is actually set. You can also tell react query to not automatically fetch by setting enabled false and hAving a useEffect listen for when the token is defined and manually invoke your query
@@WebDevCody oh ... ok thanks .... I also though about the second solution... 👏🏾
Want to ask does react query with redux tool kit Overkill?
I think redux has rtk query you might want to use instead?
Your video content is always full of knowledge.
I want to know, can react query work hand in hand with remix?
I’m sure you could use it if needed
Nice video!
I guess most of the companies out there still use more tradicional approaches like redux and all?
But they also want to hire someone that keeps up with new technologies, right?
I don't know which approach to use in my portfolio projects...
I think people are moving away from redux at this point.
@@WebDevCody After a few months on the job hunt I can say that you are mistaken.
Lots and lots of companies from all sizes and countries still using Redux.
I see Redux as a requirement in job descriptions really often.
If you add a random id to the new todo how can a user instantly delete it after because it has a incorrect id dont you have to get the id from the db for each item?
Correct me if im wrong but I think the optimistic updates is better for deletes?
Can’t you keep track of that random id inside a variable of the callback to use in the .catch when an error creating goes wrong?
@@WebDevCody Hmm, I never thought of that before. I use MongoDB for by database so in my case I could geberate a unique "_id" with a library and use that?
React query will keep items in cache as long as you don’t fetch another item with a different key. So basically if you’re on the same page but change pages and it runs another query it’ll replace that cache with the new results.
Oh that's a good point. I've just learned the basics of redux and was wondering about the differences between these two tools since I've heard query could be used instead of redux? But I don't know much of anything yet :d.
look into predeterministic fetching
big thx
Is react-query + redux toolkit a good combination?
Haven’t used those together before so isk
It works but it makes no sense. If you use RTK, using RTK-Query which is redux’ version of “tanstack query” is a no brainer. The api is built in and plays very nicely with the global store. Of course, it’s important to realize how much is really client versus server state. If you’re fetching tons of things and it’s all from the server, you should be using something like Tanstack Query or RTK-Query but you don’t store it in state because it’s not client state. So, to sum it up - I’d not use them together. If you choose the Redux Toolkit route, use the built in API for RTK-Query
@@TannerBarcelos thanks man appreciate it
@@genephillip4233 absolutely 👊🏼
10:35 you return previous todos if the mutate is unsuccessful
This was exactly what I was looking for. WHY to use react query
Amazing
Also RQ is great stuff for FE
why no nextjs?
I use next js as well, but you still need to do dynamic data calls from your client when users do certain interactions
React Query Vs RTK Query which one is better?
both has merits, rtk query can do everything React Query does and has out of box integration with rtk toolkit, and the rtk slice can detect if certain query completed or not and u can do something with it.
If you are stuck with redux, go with rtk. If not, react query is your best choice.
10:27
Well, I guess you said it in the very next sentence why we call it "previousX" ;) Basically your sentence before that was wrong :D
Yeah , the previous returned in that one function is part of the context for the next.
@@WebDevCody Exactly! :)
React-query is the GOAT
The kid in the bg is on fire 😂🔥
What you talking about Willis? Oh my children who always decide to scream when i record
@@WebDevCody This is typical, no worries kids like to bother parents hah
React query is god like, took me a week to get used to it, and now I never look back
Two minutes in and I still don't know why 'I' (not the the guy in the video) would want to use React Query... Help: tell me what problem it will solve that would make my life easier, then tell me how!
Sorry I didn’t provide good examples. Basically in most react apps you’re going to fetch data and need to show a spinner while it’s loading, which means you’ll end up making an isLoading state to track before and after the api request. Request query does that for us. Also, assume you have the same data on 2 components on the page, if they both use the same query, the ui will only make a single api request to get the data. Secondly, if react query has already fetched that data once (navigating back and forth between pages), that data is cached and it’ll be displayed instantly and fetch an updated version of the data behind the scenes.
@@WebDevCody Thanks for the summary
Hi Cody, not such a great video. You leave a lot of things open-ended and kind of hint at things but then don't explain them. Such as you mention isLoading and isFetching but don't explain the difference between the two. Are they the same? You seem to use the terms interchangeably. Or fetching the individual todo request, you sort of start explaining it but then realize you don't really remember how and abort the mission alltogether. This means we have to leave the video and search elsewhere.
Or 'refetchOn WindowFocus' you mention you *believe* it's default is true. It would be good to know this, _before_ recording the video. Again, we come here to learn something, and we find out you don't really know it yourself either. Again the same thing happens with the optimistic update, you say you don't know why to return the previous todos.
It's understandable you want to keep things concise, but then don't start on tangents you don't explore to the fullest. Just some feedback, do with it what you will.
A great walk through react-query V4 hilighting some of its great features. Thanks.
{2022-11-24}, {2023-09-27}