Redux Toolkit Query vs React Query
HTML-код
- Опубликовано: 27 июл 2024
- Picking an API access library for your React app is tough, there are so many great choices! Let's take a look at two of the most popular; React Query and Redux Toolkit Query.
Code: github.com/jherr/rtk-query-vs-rq
I have a book out on TypeScript that gets updated with a new chapter every time I add a new No BS TS episode. Check it out! no-bs-ts.myshopify.com/
👉 What's my theme? Night Wolf [black]
👉 What's that font? MonoLisa
👉 I'm a host on the React Round Up podcast: devchat.tv/podcasts/react-rou...
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
Thank you for watching this video, click the "SUBSCRIBE" button to stay connected with this channel.
00:00 Introduction
00:13 The project
01:03 Implementation using RTK Query
11:50 Implementation using React Query
21:28 Outroduction
#redux #reduxTookit #reactQuery #react 
Наука
Its finally here. Jack you're a godsend. Just a couple of months ago I swapped rtk query with react query since I couldn't grasp rtk query that well. This is much appreciated. Looking forward to more great stuff 😄
The best teacher ever. You are my favorite, please do not stop. Jack you inspired me to switch from Angular to React, thank you so much.
Same here! Amazing stuff, congratulations and a big thank you!
I have no intention of switching to Angular but can you please tell me in comparison to Angular and React which is tool is easier to make websites with??
@@mazharansari7813 Definetely react is easier for the webtsites, because you can control a lot of stuff which are not needed depends on the size of your website. BUT if we are talking about enterprise, picture here could be different, because here you need to consider business requirenments also, learning curve for Angular could be faster if you have a lot of BE devs who want to become fullstacks, and many other reasons
@@mazharansari7813 Next.js You need server side rendering
Wow thank you so much for listening my request 😭 really appreciated. Redux(state management) is still difficult but trying my best to gain the knowledge
Wow, just explored this hidden gem 💎. Such a quality tutorials! Especially the fact that there's github code linked almost to each video. Thank you!
I am so glad that I came to this hidden gem. Your videos are so amazing! Learning so much from you.
Thanks again, Jack! Amazing video as usual!
You always make it look easy!
Thanks, Jack. Love all your videos. Straight to the code.
I have resisted learning redux my whole dev career. So far so good haha
Another great video! Been binging your stuff all day
HI from Brazil Jack, this video was amazing. I've just subscribed!
One thing is that rtk-query doesn't have support for infinite scrolls (at least for now), while react-query has a useInfiniteQuery hook that performs really well.
good to know
That can be fixed in many ways.
@@juanhuenchun8908 Such as?
The concept of infinite scroll is the one and only thing that I loathe in this entire existence. Other than that, I'm quite happy that I was born...
@@shineLouisShine😂😂😂
The problem with these videos is that after watching I always get an urge to do major refactoring on existing projects to try all these new cool techniques or packages. Inspiring content as always Jack.
Really liked the React Query + Axios style of API calls, I'm going to have to give this a try. I would love to see an elegant way to combine this or SWR with something like Auth0 where you may have a short-lived authentication token that needs to be refreshed (with a refresh token) at a certain interval.
ruclips.net/video/-JJFQ9bkUbo/видео.html#dialog
Thanks Jack for the high quality content
Such a great video. It's funny that anything to do with Redux suddenly make things complex..
This is such a great stuff! Thanks for that!
whenever i am faced with a challenge in typescript or react i think to myself "i bet jack herrington has a video for this, ohhh but what if he doesn't? maybe i can make a suggestion and he'll do a video on it and it'll be awesome because it was my idea!" I am forever at a crossroads between disappointed and ecstatic, because jack ALWAYS has a video to fit my needs... thanks jack!
10:04 - I've been through all major UI frameworks and i find Angular the worst. I also use Azure often. You read my mind. Subbed.
This channel need more subs the contents are amazing
thank you for a great content.
Mr.Jack, can you make a video on axios error handling with react/typescript best practice?
with this new "unknown" type and how to access response property on error if Error does not have it.
And how to make it reusable pattern as a single source of error handling.
thank you once again.
great content dude!, u got a new subscriber from Brazil !!
Thank you!
Thanks. Very Useful!
really good video! you´ve got a new subscriber for sure. :)
They are very similar, redux toolkit is very similar, it seems to me equal to react-query- If in a project I use redux it's obvious that I don't have to add react-query and it's recommended to use redux. If in a project I use Recoil, well it's strongly recommended to think to use react-query toghether with recoil. This could be the winner solution for state management in 2022
That was so smooth. thanks a lot.
I just feel like rtk query is still limited to what we can do with it in complex scenarios since we can't just access the api responses without their hooks unlike redux, where we can just use the variables (in multiple components) we store our responses in
I was migrating from react query to rtk query - one very important difference - RTK Query has the serializable state inside - it requires you to use only serializable data in parameters and returns. No class instances (fine in RQ). Also, in react query you define the endpoint as a hook - you can easily access other hooks (even api) from there. While in rtk you have to make such wrapper hook by yourself, if you depend on hooks (and pass the data as endpoint parameters, not a big deal, but some extra boilerplate). RTK idea is that your api code is a pure transport layer - it doesn’t allow you to mix some complex processing in it (while react query is ok with that) - in rtk you add extra processing on the higher level - in api consumers. In short, RTK query is a handy transport to a RAW (most important) api data, restrictive/opinionated. While react query might look more flexible out of the box. Both are great though
React Query is the winner because you can choose how much of it's features you need. I love it.
Just went through the process of migrating our redux store to RTK and using RTK Query for all calls. It is a bit complex but its far better than dealing with unopinionated redux, which I've found filled with boilerplate and different styles of structuring redux. So much of what we did was boilerplate for pending, success, and failing for each action, and getting rid of all that with rtk query was a joy.
Yes. ^^^^
Great content, thanks!
A very good comparison of rtk-query and react-query, but I got a little confused with useCallback since it didn't look like we had performance problems
Can you give a time reference?
@@jherr around 9 minute mark
@@jherr 8:05 and 9:45 you use useCallback.
hey Jack, would be nice to see a video on Nextjs Turborepo, and also would love to see a video on TurboRepo vs Module Federation
thanks!!! you are awesome!
Great video. How Can we fetch data on the server with next.js and put it to the cash as initial data? With react query we can, but I can't find the recipe with rtk query
Was wrapping onToggle handler in useCallback necessary?, referring to rtk query part of the video, great video 👍.
No. You don’t really need to in this case.
in RTK, I can see in all cases the endpoint return the full list, which is not the case in most of time, and mostly the endpoint will return only the modified object, so how manuly we can update the store
I think RTK is really complex, so that I would rather using React Query with React Hooks
No at all! RTK is abstracted the way complexity of redux working.
Agreed. RTK can claim it abstracts all the boilerplate away, but ultimately it's still there. And complexity will always be there. We adopted it and found it overkill. Moving to react query now.
Thank you so much. everything good
great
more on rtk query plz
So you MUST use typescript to use RTK query? I have yet to see an example where they don't give the builder.query a type. Seems weird to me that it requires typescript.
Hi Jack.
Can you please guide me, how can I implement Infinite scroll using RTK Query?
Thank you so much for this video! Is there a reason why you are using `ref` for the input and not using controlled component via useState (inside a form maybe?)
That’s an uncontrolled input and the react team recommends that unless you actually need to respond to changes on every keystroke.
Hi Jack, have you already tried react-query in context of WMF. Did you know that different federated apps can share the same provider and thus the same cache? With all the good parts like query invalidation and optimistic update strategy working out of the box with no additional setup across all the apps. Let me know what you think about it.
Thanks for amazing content 🙌
All these variables [ todo, TODOS, Todo, addTodo] how to keep track on them and not get messed up?
Hi, how to create rtk query with sending Basic authorization to server?
So am I right that with RTK Query I can totally discard my usual slice with the reducers I used before? So no need for useAppDispatch and useRootState etc? Also means that I am making a lot more http calls when I need the state in multiple nested components, doesn't it?
Exists any way to implements RTK-Query fetching data per chunks??? similar to redux use with dispatch to add more data into an specific store??
Seem that if you already have your api calls setup using AXIOS that react-query would be the way to go.
amazing explanation
Hi jack, awesome comparison, but i would like to see more architecture strategies than tools, for e.g: clean, hexagonal, DDD architecture in the frontend, is it possible? Greetings!
I get this question now and again, could you join the Discord server (linked to in the description), so that we can talk about what you'd like see in some more detail?
Cool jack i gonna join to the discord thanks !!!
Thanks Love That
How Rtk query handle multiple parallel query? Loading state in more than 3 parallel query?
Great video! Sorry for the late question, but I was wondering if GraphQL fits at all into RTK Query?
Any web request will work with RTK but maybe you would be better served by Apollo client or URQL or GraphQL-request.
hi.........
How much data can we save in react query cache?
Why u defined the onToggle in a useCallback? there is a reason for that? what is the value of updateTodo in every mutation? why just not a regular function? for the react-query version I see more convenient create just a todoMutation function with useCallback since the only value you're changing is the fetching function and passing that value as a dependency for the callback, the when calling idk updateTodo will just use todoMutation(updateTodo, { ...todo, done: !todo.done })
i chose the RTK Query because i aldready used the redux-toolkit for global state management
How does RTK work together with createSlice? it seems like they of a different data store ...
Thanks for the video it really helped me alot, btw what's that plugin which autocompletes yarn command and lists node packages whenever you type something??
That's Fig.
@@jherr thanks!!
Great video again 👏 can't stop thinking that it's not DRY to write write the types "again" on the front end. Is mono repo the only way to make it DRY? Would love to hear your advice on DRY sharing of types between front and back?
Monorepo would work. You could also generate the types off the schema if you use GraphQL.
@@jherr you wouldn't happen to have a video on that? 😊
You have some of the best videos on RUclips 👏
@@Norfeldt ruclips.net/video/UbEx1v26kCs/видео.html
@@jherr trpc is better than generating types
Thank you
Awesome tutorial.....thank you
But I'd like to ask, can one use both of these for data fetching React native too?
AFAIK you can
best tutorial 😍
What theme you are using in the Zsh terminal?
The real question is though what do you do when you actually want to mix-and-match? When e.g. you have your local frontend global state but on certain interaction (e.g. user presses the "Submit" button in a wizard form entry situation) you have to actually post data to the backend? How could RTK accommodate this?
You would avoid using RTK, but use react-query and pass the data into the reducers via actions.
Or you can have your submit function calling your RTK method returned from the hook, it works just as fine.
I'd like to see a video which uses SWR
What magic is this? Immediately I was looking for it. Awesome ❤. Now, let's watch...
Edit: React Query seems sooo cool especially with Axios. In my current project I am using Redux Toolkit (without the query part). I was actually using it to manage Server data. Maybe I can replace RTK entirely with React query especially if I no longer have the need for Redux.
I am also switching to Next JS... Does this work there?
It should. I transitioned as well from Redux to react query based on my use case
@@internet4543 Alright. Thanks so much
You should compare them to SWR!
why invalidateTags and providesTags doesn't added automatically ?
what does ! in ref.current!.value?
hello Jack, great tutorials, thanks !
but when I try to run the code with npm install and then npm run start I get the following error : Package subpath './lib/tokenize' is not defined by "exports"
then after I solve this by running this from bash export NODE_OPTIONS=--openssl-legacy-provider, I moved past but I got stopped by another error - @reduxjs/toolkit/dist/query/react/rtk-query-react.legacy-esm.js 59:23
Module parse failed: Unexpected token (59:23)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
May I ask for the theme you're using, it looks high contrast but better than original theme.
Night Wolf [dark] and Operator Mono.
I noticed that you have auto suggestion when you type npm install. How can I archive that?
That's "fig".
Jack, you're so awesome. I love your videos.
pls create a video for atomWithQuery in jotai
This is one advanced thing that keeps beating me.
Hello Jack,
Thanks for this amazing tutorial
I have a question please, whats the purpose of using useCallback in 9:01, you havent passed onToggle to an other component, i want please to understand why you choosed to use usecallback here ?
It's overkill here. You don't need it.
@@jherr Thanks man, you're a great instructor
How does this compare with Redux saga?
Funny you should ask: ruclips.net/video/0W4SdogReDg/видео.html
Why did you useRef isntead of state? Isn't that against the docs? I've seen web dev simplified do the same, and get a bit of flack for it
I use `useRef` rarely, but I usually have a decent reason to that I can explain if you give me a time code reference.
What if the backend is graphql API?
It’s just a different post body format.
How about SWR?
Thank you for this example Jack! Really helpful! Is there a way to use axios with RTK Query as well? And attach the token from next-auth session for example?
Extend basequery function you can use axios with rtk query
I find it really hard to follow along when the screen is zoomed in that close on the code. My brain doesn’t go very fast. I need to read stuff in context if the overall component, which I can’t do when what I’m ready is constantly rolling off the screen.
Otherwise an excellent presentation,
How can I implement api if I have for example 5 endpoints for users and 5 endpoints for products and 5 endpoints for something else , I need to call createApi three times ? And where I can combine them in the root level ?
Sounds like a great question for the Discord server: discord.gg/eQj6G3qD
Create an apiSlice, add createApi as the tutorial said, use localhost:5000 as the baseUrl for example , add everything and leave your end points empty then create new files for your endpoints, this time instead of using createApi, use ApiSlice.injectEndpoints
No. Create multiple createApi is an anti-pattern. There should only be ONE createApi! Just like only one redux store. You have 2 choices:
1) define all of these endpoints in createApi
2) split these endpoint to it's according slices by using injectEndpoints api. This will enable code-splitting of createApi. So you can create 1 injectEndpoint for users with 5 endpoints described here, 1 injectEndpoint for products with 5 endpoints described etc...
All these injectEndpoints will be merged to single createApi under the hood. Just like reducers to single redux store
Awesome Jack ❤️
First comment ❤️🙌
I find RTK Query a little convoluted. Even this terrific tutorial still leaves me feeling like "Huh?". I much prefer useSWR or React Query. Personally coding preference though.
Totally agree. If I have the choice to go with RQ or SWR I'm just gonna go with that.
Why do you add a ref to the input ui element?
To get the current value. In react terms that’s an “uncontrolled input”. The other way to do it is to have some state and the set the value to the state and update the state during onChange.
@@jherr got it thanks
How to map data returned from fetchBaseQuery in the createApi (not in the Component)?
Can you give me a time reference so I can address exactly what you are interested in?
I mean for example if I want to return todos.text instead of todos 6:30. I have more complex data and it return me response.response.player but I want to return only player how to do this?
@@piotrkrysiak9414 You can destructure as far as you like const { response: { response: { player} } = { ... } is ok.
@@jherr ok I know that but I thinking about doing it in fetchBaseQuery
@@piotrkrysiak9414 Gotcha, well, first of fetchBaseQuery is just a helper function, you can provide your own version of it. But... you could also just add on fetchBaseQuery(...).then(resp => { ... }); And mutate the data version of the response in that then block to restructure the response however you want.
Type 'string' is not assignable to type 'never'. on the tagTypes
That means that the tagTypes array is defined by an inferred array value `[]`. Which is interpreted by TypeScript as `never[]`. You need to declare `tagTypes` as `string[]`.
Nice, but invalidating the whole list every time you mutate only one element is pretty inefficient. It's much better to selectively choose which elements should be refreshed in the list, i.e. only the ones that you mutated.
I know that in react query, that if your post returns a body of the updated record, you can pass that data to the cache so it uses that (since you already have it which avoids a round trip to the server)
I recently started to learn React Query. Should i learn RTK instead? Please help.
If you use Redux then you should use RTK. If you're not using Redux then I would continue on with react-query.
@@jherr Thank you very much for your response. I was quite confused. It really helped. 🙏🏻
Text editor font could be smaller doesn't have to be font size 36😂 It is a great tutorial. Thank you very much!
I wanna buy your awesome react typescript course (project).
torrent
As a newbie learning React and learned JavaScript only since ES6, seeing the "function" keyword irks me lol.
What about web components? All you know about this topic!😀
It's an older set of videos, but web components haven't changed much: ruclips.net/video/_Tr9ZcXcMjQ/видео.html
I haven't looked too deeply into this yet but what would you say is the main advantage of this approach instead of just Redux toolkit with Redux thunk?
You don't have to manually manage loading and error states for each thunk, RTK query will do it for you. Also, response are all cached so the application feels faster because it displays the cached data even tho in the background is updating the cache refetching
what themes and fonts are you using in vscode?
It's always listed in the description, in this case it's Night Wolf [black] and Monolisa.
Well from architectonic point of view:
redux toolkit should solve balast of plain imutabile redux store, every side effects containing rest api should handle react-query, why?
Because why not, i will pick best of the two worlds and don't care about few dependencies.. who does app in react to work in super strict mode of bestly optimalizations anyway (personal experience from multiple large production codebases)
Redux is not even necessary in most of the apps especially next js ones, if you have control over server and do large app with micro frontends, even Dan Abramov says: redux is only for data storage if you not know where else it could be put.
Good comparsion, but imho if you compare these just a mention that RTK is not necessary with redux toolkit, a lot of "inexperienced" programmers will start to rewrite react query into RTK just because they want to use redux toolkit which is fundamentaly bad decision
What the hell is current!.value??? Is that an operator “!.”.?? @ 19:13
too much magic in all these stuff
I just don't like how you skimmed over 80% of the project in the first 30 seconds. When I try to apply this knowledge, there's literally a giant gap in the steps I need to take.
Fair point.
Personally, I find both to be very good tools, but I prefer to use RTK Query because of its direct integration with React. I don't need to install anything extra and it works perfectly with React Redux Dev. It's all integrated in the same console.
React Query has its advantages but I'm not convinced. Great video! Thank you very much !
What do you mean by "Direct Integration with React"? React Query has a hooks-first API as well, so neither is really "better integrated" with React. Also, React Query supports it's own Dev Tools.
I'm not exactly sold on the "it's all integrated in one place" solution. Server State and Client State have dramatically different problems to solve, so using different tools for each doesn't sound any worse than "Use the right tool for the right job". Plus, Redux is so frequently overkill for most projects, I wouldn't be surprised if React Query is a better fit for more people.
What do you mean with direct integration?