Redux Toolkit Query vs React Query

picking the right api access layer for your react application can be tough so let's take a look at two of the top contenders we have redux toolkit query and we're going to compare that to react query so let's jump right in and build us a to-do list application as if you've never seen one of those before you can go and say that a to-do item is done or not done you can delete a to-do item and of course you can add one no problem cool so let's jump over into our vs code and see how this is actually working so right now all we have is the server it's an sjs server it's pretty simple stuff there is a to do module in there and it basically does uh it references the to do controller which has a bunch of to-do's and you can get the list of to-do's get a particular to do post-it to do and so on and so forth and nestjs makes it really easy to go and build a rest api like this so we're not all that interested in the api right let's go and build out our rtk query application so so the first thing we want to do is do yarn create and then react app i'm gonna say this one is gonna be called rtk to dos and we're going to give a template of typescript all right application's all set up let's jump in that directory and from there i'm going to add a couple of dependencies i'm going to add redux i'm going to add react redux and i'm going to add the redux toolkit redux js toolkit and from there i'm going to start up our application and see we've got looks good all right let's jump back into our application and start hacking on this i'm going to jump over into the source directory and the first thing we're going to do is put in some new css this is going to give us all that nice to do css that we had before and then let's go over into our app tsx and i'm going to really pare this down okay good to go so let's take a look what we've got on the page a beautiful blank starting point awesome so let's go create our store file and this is going to hold our api access layer that's built using redox toolkit called the store.ts and i'm going to import create api and fetch base query from the redux toolkit and the extension that they have on there which is query and react now query is the sort of larger query project and then react is the specific bindings for react that give you the nice hook functionality that we're going to use it's actually really cool so the next thing we need to do is bring in the interface that defines the to-do so to do has an id the text of the to-do whether it's active or not in the database and then whether it's done or not and from there i'm going to build out our api so i'm going to use this create api function that we got and it's giving me the right squeeze because there's a lot that i don't have in there the first is the reducer path so in redux world you're going to have multiple reducers that can sit on a single store and we're going to call this one the to do api next we're going to define the base url for this server and that's on http localhost 4000 and then we're going to define the invalidatable tags and these basically define the kind of entity types within your system so this in this case would just be a list of the to do's and now we get to the fun part where we define the endpoints that we're going to be talking to so to define the endpoints you give it a function and that is given a builder and that builder kind of works in conjunction with this fetch-based query to build out uh get or post or put methods that then talk to that api endpoint and the first thing we want to do is get all the to do's so we're going to create the get all endpoint and it's going to use builder.query to build out that query and then we get into the typescript stuff where we say that we're going to get back a list of all the to do's and we're not going to send it any arguments so that's going to be void and then we're going to do the query and so that's just going to add on to do's on to the end of this localhost 4000 and interestingly it's going to say okay well i'm going to provide data so data is coming out of this i'm going to provide some invalidatable tags describing the pieces of data that i get back in this case it's just the list of all the to do so the type maps to this to do's over here and the invalidatable tag types and then you could have a list of all the ids that you got back or in this case i'm just going to say we want to make the entire list the thing that we're going to invalidate when we do something like put to update a to do or post to create it to do but this should be good enough to just get us off the ground so let's go back over into our app.dsx the first thing we're going to bring in is the api provider from that redux toolkit and that works in conjunction with rtk query to provide the same way that a redux provider would the api down to all the hooks we're going to use to make requests using that those endpoints that we just created so i'm going to change this and call this to do app and then i'm going to create a new function called app that returns the api provider around that to-do app looking good but now we need to give it the api right so api is missing so where do we get that from well we're going to bring it in from that store where we defined it so there we go bringing that to do api and now we're going to connect it to our api and we go let's see if we're actually running still good okay okay so the next thing we need to do is go get that data using our freshly defined endpoint the way that we do that is we use that to do api and it's created automatically a hook for us you called use get all query and why to give it that name well that name comes from down here get all and so it's automatically generated a use get all query because this is a query so we've done builder query we're using get all and it's kind of conjoined that all into that hook name nice right and now we're going to map the data that comes from that to to-do's now there's a whole bunch of stuff that comes off of this including whether it's loading whether you know all of the status whether there's been an error and everything else i'm just going to pull off the data we're just going to do the happy path here so i've got this to do is i've got the data and now we just want to see it in our page let's do a json stringify and just dump the data in there and see we get okay done looking good no just kidding let's actually go and put a nice ui on this all right i'll take the files off and so we can see a little bit better and then paste in our ui now let's take a look all right nice okay so all it's doing here is just doing a standard map it's going through all those to-do's it's creating a react fragment for each one where you've got a checkbox whether it's done or undone got the text and then you got a button and currently these do nothing so the next thing we need to do is implement on the check box here and get it to actually send updates to the store so let's go back over to the store and the first thing we're going to do is create an endpoint for that so we're going to bring in some code here this one's called update to do that's our endpoint in this case it's a mutation it's not a query it's going to change the state of the server it's going to mutate it and therefore it's a builder.mutation it's going to take a to do and it's going to return a to do now the query here is constructed and you give it the url so in this case it's to do and then whatever the id is the method we're going to put which means change in restland and then we're going to give it the body which is the to do we don't need to do any kind of json stringify or anything it does all that for us and then when it's done when it succeeds it then invalidates the tags of the to-do list which means automatically it's going to re-run this get all query and update the page was just freaking awesome so let's go back over here to app.tsx and get this all hooked up so for this i'm going to create a callback i'm going to use use callback here and i'm going to bring in some code that uses that use callback and this is on toggle and it's going to use that use callback to then call update to do and it's going to take a to-do and then it's going to set the new to do that's going to send off to update to do to have a flipped done state and of course it's going to depend on update to do so we need update to do so how do we go get that well we bring that in using another hook so here we go we call use update to do mutation again that's all concatenated by the endpoint names and the types that we gave it and we're going to get back from that a tuple where the first element is that update and then there's a subsequent object which gives you all the status and everything else so i'm not going to use any of that again we're going to do the happy path on this one so on toggle let's jump down here and go over to our on change and let's do on toggle and then give it the to do all right let's check it out and see if it works or not will it blend all right looking pretty good let's refresh i love it so easy okay let's learn about how to do a delete since that's not going to work yet so again we'll go back over to our store and of course we need another mutation for this so i'm going to drop that down in there again it's going to take it to do return it to do and we're going to have the url where it's again that same id but this time we're going to call the delete method and that's really the difference in here and then of course we'll invalidate that list and that's going to then force an update of the total list so let's go back over to our app this time i'll bring in the hook first so bring in the delete mutation hook and then i'll bring in the callback for on delete and jump down here and give it our to do okay and i don't want to learn angular how about that how about i don't want to learn aws boom okay so the last thing we need to do in our rtk example is allow our customer to add a to-do to our to-do list so let's go and add some ui for that and i'll put it right down here at the end it's gonna have an input that has a ref on it and a button that says add that then calls on add so first let's get this text draft all straightened out so the first thing i need back here is user f and then i need to define that text ref and now of course we actually need to have something to call but we don't have anything to call so let's go back over to the store and create a new endpoint so let's add a new endpoint called add to do and this one is going to have the url of slash to do's but it's going to do a post and then the body there is just going to be the text right that's all we need from this add is the piece of text and that's going to go and then create a new to-do for us and again it's going to invalidate that list so go back over here to our app.tsx bring in our add to do mutation and then finally define our callback on add which is going to do an add to do with that current value and let's actually add on to this a little bit i'm going to go and also set that value to an empty string so that once it's done we know it's good okay great say refresh there and i'm going to say add one and we're added awesome cool so that was a really quick walkthrough of how to use rtk query and before we jump into react query i just want to give you this opportunity to hit that like button if you like that video and of course hit that subscribe button if you really like the video and you want to see more advanced fe topics just like this one okay let's go and build out our competitor the react query version all right jump back into our vs code and then i want to bring up our console and then say no no no not anymore that one let's go back and go over to the top level directory and i'm going to again do that yarn create react app and this time we're going to call it rq to do's and give it the template of typescript okay it looks like you're good to go i'm going to jump into that directory and then i'm going to add some dependencies i'm going to add react query and i'm also going to add axios so why am i going to add axios well a viewer nick pavlov actually went through the effort of taking the original video that this is based on which was a comparison of rtk query versus sagas and said hey you really should do react query and he went off and did it and then i sent me the code and i was like well that's really cool but i hadn't used axios in mind so you know what i'm going to use axios as well i thought that was really cool but i am going to go and start with a simple fetch version start to start and then we will then go and do the axios version so let's go and yarn start this up all right we've been there seen that so let's go down into here and start hacking and replace again all that css and go back over to our app and start hacking on that get rid of the logo with header all that cool you know the whole page is a header that doesn't seem right okay cool so the next thing i'm going to do is create a new folder and i'm going to call this lib for library and then within that i'm going to create an api.ts file and this is just going to have a bunch of utility functions for us i'm going to have the base url of our to-do's service it's going to have the definition of what a to do is and it's going to have some functions well one is get to do's and it's going to be an async function that returns a promise to give us a bunch of to-do's and all it's going to do is just fetch with that base url and then get the response back and json i don't even have this in a template that doesn't make any sense get rid of that what are you thinking jack craziness okay cool so we have similar sort of things we can also get an individual to do we can create it to do updated to do and this is essentially just the same thing as before the only little difference here is that i actually have to do the work of doing the json stringify as well as adding the content type for the headers to set it to application json which you kind of need for rest stuff so okay let's uh now we got that next thing we're going to do is bring in use query from react query and then from our api we are going to bring in get to do's that's the first thing we need to do as well as a definition for a to do from that library so the first thing we're going to do is use user query to call that get to dues and get our list of to-do's so we use use query we tell it what the output type is in this case it's gonna be an array of to-do's you give it the data tag name it's kind of similar from what we saw with rtk query and then the method that's gonna go get it so in this case that's gonna be our get to do's as well as the initial set of data so now let's see if we actually get some data back by doing our json stringify trick always handy in a pinch and now it's telling us we don't have a query client so we need to set a query client or have a query client provider so let's go and do that so i'm going to bring in query client provider and query client from react query say that 10 times fast and then i need to go and create a query client just as easy as making a new one just like that and now we need to actually do that wrapping thing again so let's do to do app here and then function app and again we're going to return that to do app but we are going to wrap it in a query client provider but you know what while we're here i'm going to add the dev tools because i think they're really slick so i'm going to bring in the rack query dev tools and then get that and put that in there as well i just love when folks provide this kind of stuff it's really nice so let's go back over our page and now we can see that we are getting that data because we got that provider and we've also got our dev tools down here that's really nice okay so let's hit refresh and we can see that we got to do's you can see all the data that came back just just really nice stuff okay so the next thing we want to do is actually go and put a ui on it right all right so let's get rid of this and bring in our ui and have a look okay looks good cool we're done nah just kidding of course so now we need to go and do our update over here so the first thing we need to do is bring in our update to do and then we need to bring in use mutation because this is going to be mutation it's going to change things and then we'll bring in the code for update mutation which is going to use use mutation as opposed to use query it's going to call that update to do and then when it's successful it's going to invalidate that to do's this is going to again go and force it to redo that request so now we need to call that update mutation and we'll go over there to that on change and let's have a look it's going to call mutate on update mutation and then it's just going to do that toggling there to get the done flag to toggle all right looking good so the next thing we want to do is do the delete functionality so again we're going to bring in delete to do and then we're going to create the delete mutation looking good and finally we want to go and call it and i'm just going to give it the to do and let's see yeah okay looking good nice all right so the last thing we need to do is go and add so i'm going to bring in create to do and i'm going to bring in the mutation for that very similar to what we had before just calling create to do and that's going to give us our create mutation so we're always we need some ui for that let's jump down here all right let's add that ui cool looking good of course we're missing a ref so let's bring in use ref and get that ref going now we've got a text graph very cool all right look great let's go and bring in our create to do function and create our create to do mutation i'll pop that in there and that's just going to call that create to do and then invalidate the queries so the last thing we need to do is just do that so let's jump down here and then create mutation mutate and then give it the text graph current value and of course we want to set that to nothing once we're done here we go okay add two nice all right cool but of course as i mentioned previously nick gave me the great idea to use axios here so let's try that let's bring in axios and use it instead of these verbs down here like get to do's and so forth so we need to set up an axios client so let's do that and all you need to do is give it that base url and there you go and let's just start kind of swapping these out one by one so let's comment this out the query to get the to-do's and we'll bring in the axios version of that so it's going to use that axios client to again get all those to-do's and then it can get back the data from that after getting the await and finally getting the promise back and then resolving the promise and we'll get the data off it all right let's go take a look nice okay good but i think the axio stuff really starts to show when you do like other types of verbs like put and post so let's comment out the update mutation that was the original one and then paste in the mutation for the axios client and this is going to use the put method as opposed to the get method and i think that's actually where it's really nice the other little change here is we're going to say unsettled which means that regardless of the outcome of this whether it's a success or a failure then again invalidate that query i used unsuccess before it's really just depends on the semantics that you're looking for so i'll hit save there and we'll see if it works yeah nice okay very cool let's change our delete mutation and again all we're going to do is just use axios client but in this case call delete with that url and i think you know again if we look over here at the lib version of that so delete to do you know four lines versus uh one line here nice nice right off let's see if it actually works uh this time i don't want to learn uh next.js oh okay cool all right great and then finally let's do that create mutation again comment that out and i'm going to bring in create mutation and it's going to do the invalidation to queries it's also going to set that text graph to nothing so i can actually get rid of this one down here but in this case i actually want to send along the text so i'm going to put in text in the object like that and away we go let's take a look aha add three awesome very cool okay so there you go a pretty decent to-do list battle between react tool kit query and react query so which one would i use well it really depends on whether i'm using redux or not if i'm using redux i'm definitely going to be using redux toolkit and thus redux toolkit query which i think works really well if i'm using basic react hooks and i'm not using redux well react query is a fantastic piece of work and it's going to do a lot of the little edge casey stuff you're not going to get from some homegrown query library alright well i hope you enjoyed this video hit that like button if you did hit the subscribe button if you really did click on the bell and be notified the next time a new one of these comes out

Channel: Jack Herrington

Views: 10,093

Keywords: RTK Query, RTK Query vs React Query, RTK query tutorial, React Query, React Query Application, Redux Toolkit, Redux Toolkit Query, Redux Toolkit Query Application, Redux Toolkit Query vs React Query, jack herrington, react query, react query tutorial, react query vs redux, react redux toolkit, redux, redux rtk query, redux sagas vs redux toolkit query, redux toolkit, redux toolkit query tutorials, redux toolkit react, redux toolkit tutorial, rtk query

Id: LDS1ll93P-s

Length: 22min 11sec (1331 seconds)

Published: Mon Oct 18 2021