RTK Query Tutorial - How to Fetch Data With Redux Toolkit Query | React Beginners Tutorial

hey guys how's it going I'm back here with another video and today I decided to bring this video where I'm going to teach you guys um the basics of fetching data using rtk query for those who don't know um Redux toolkit is a state management solution for react and it's very common I have a couple videos introducing it but within Redux toolkit there's also this ability to fetch data in a way such that it could replace something like react query or use SWR those really common libraries and the solution is using rtk query it is already built in to Redix toolkit and in this tutorial I'm going to be assuming you know the basics of Redix toolkit because this is not a Redux toolkit tutorial it is just an rtk query tutorial so all you have to do to learn it is just have Redux toolkit in any project and we'll start from there but before we get into the video if you could leave a like And subscribe I would massively appreciate it I will help push my videos to more people and I would be really grateful if you could do so so with that in mind let's get into the tutorial [Music] [Applause] [Music] [Applause] as many of you might know skillshare is an online learning community with thousands of inspiring classes for anyone who loves learning they have courses on a multitude of topics such as react typescript node.js and much more a course that I took and I really liked was the modern CSS writing better cleaner more scalable code course by Harry Roberts CSS is definitely one of my weak points in web development and this course helped me find a better approach to learning the technology one of the best aspects of skillshare is that it is curated specifically for learning meaning that there are no ads and they're always launching your premium classes so that you can stay focused and learn as many skills as you desire in 2022 the first a thousand of my subscribers that click the link in the description will get a month free trial of skillshare so you can start exploring your creativity today okay everyone so in order to store it like I said we already have some sort of project here which has Redux talk it installed so if you come over here to my package.json you'll see that I have redix.js slash toolkit installed at this version over here and you can see from my app that I have some of the initial stuff for Redix toolkit such as a provider and a store already set up my project is pretty simple literally has nothing all it's doing right now is it's just displaying this component called data which currently is completely empty but what we want to do is we want to fetch data from this API over here which is a public API called dummyjson.com and this will just give us as you can see a list of stuff in this case we're getting a list of products and this is the API we're going to be using to test I'll leave a link for it in the description if you want to use it as well but it's going to be pretty simple that's all we're going to do so in order to start setting up rtk query we don't need to install anything else because it already comes with Redux toolkit but the main difference is that you need to create something using a function from um rtk query called create API and we're going to put that inside of our features folder which is where you also put some stuff like your slices and stuff like that so what we're going to do over here is we're going to create a file I'm going to call this file the API slice just like this and then say dot GS and in this file we're going to import some stuff from Rubik's toolkit so at the top we're going to say import from at reduxjs slash toolkit then slash query and then slash react just like this so what we want to import is first of all the create API function then we want to import another function called the fetch base query now whenever you need to use Redux toolkit to fetch data it's almost always going to be very similar so just understanding these few lines of code will allow you to be able to use this whenever you want so all we have to do is we have to create a constant or a variable which is going to in our case it's going to let's call it products API because we're fetching a list of products from this API over here and then we also need to export it so that we can access it in other files then we're going to set this equal to create API now with the create API it basically allows you to set a reducer path or a name for a reducer path in our case we'll just it's like a namespace you're naming this so that you can identify it later and we can call it similar to what we call the variable we can just call it product API it it has it's used to identify it when we want to use it then with the create API what we have to do is we need to set a base URL for which API we're fetching data so no matter what we're doing with um this specific API over here all of the logic or all of the fetching that we're going to do is going to be written inside of this create API object so if we had if we wanted to have multiple queries right we wanted to query a list of all the products we also wanted to query a list actually query one specific product or we want to add a product or delete a product I would put everything inside of here so to Define this we have to come over here and add a base query just like this and we're going to use the fetch base query function to set which API we want to fetch data from so over here we'll pass what I what I mentioned which is a base URL just like this and then we're just going to pass in the actual URL to the API that we want to make make the request to but the important thing is you don't add the actual uh like path so here we're fetching products we don't add products we add the URL uh the first part of the URL over here because then after this is where we're going to specify which paths or which routes of the API we want to specifically fetch data from then over here we're going to basically create another thing called endpoints and endpoints is where we're actually going to Define all the queries we want to have so it's just a function just like this that will return an object and the object will contain all the different queries we want to have so if I want to create a query for example for getting all the products in this API all I have to do is I just have to set a name for it let's call it get all products just like this then when the status equal to something called a builder query and you get a builder query directly from the arguments of this endpoints function so we'll just grab Builder over here and we'll say Builder dot query just like this now we're saying query because this is a query but if we wanted to create a mutation which is for example adding deleting and updating something we would say Builder dot mutation right but we want to do a query so we're going to say builder.query then we're going to set an object to this and the object just like this will have to define a query inside of you now the query again will be a function and at the end we need to specify the path to which we need to fetch the data it from so what do I mean by that well here we want to get all the products right so in this API called dummy Json if we go to slash project products like this um it would just give us the list of all the the data but if we were to say something like slash products slash search and then put something like this and then search for something like iPhone then it will just give us an iPhone so there's different routes in this API which is very common in different apis so what we put over here is just a string defining which specific path to which route we want to fetch the data from so in our case we're not fetching one thing like I just showed you with the search what we're doing is we're fetching all of them so all we have to put here is just products because this is the path to give us all of the products then I'm going to come again to visual studio code and for now we'll just create this single query inside of rtk query I'm going to make another one just so you guys can get a better idea but for now let's just do it this way then at the end we'll come over here and we're going to say export const and there's a very cool thing that rtk query does which is um it creates a hook for all of your endpoints inside of here so all of your queries that you create when all of your mutations it will create a hook for it now what is the name of the hook well if you set export const equal to products API which is the variable we created over here then the name for it will be use because it's a hook and then get all products because it is the name that we put over here and then we have to put query because it is a query this is already pre-made when you have the create API function so we can just use it in other files now what do we want to do with this well we want to come to our to where we want to fetch the data so any react components such as in our case the data one and I just want to try using that hook now to do that we'll just come over here at the top and we'll say import and we need to import from our API slice file and I'll do that by going back twice saying features slash API slice and I'm going to impact like import the use get our products query function or hook inside of our component is where we have to call the hook and what we're going to do is we're just going to say const equal to use get all products query now there's a bunch of really cool stuff you can get from this hook the main one is the actual data as you can see because the data is where we're going to get back from fetching the API now let's test this out to see if it's working I'm just going to come over here and I'm just going to console log the data if we have anything and right now it will actually not work I know for a fact if we come over here you'll see it will give us a bunch of Errors the reason is because we haven't done one thing that is extremely important in Redux toolkit and in many different libraries which nowadays utilizes something like this like fetching data or even libraries that provide you a solution for managing your states you have to pass in a provider now you might say okay we already have a provider because Redux toolkit requires you to pass a provider with your store just like this but when you have an API that you're fetching data from you have to specify that API I over here so we need to import from Redux toolkit so I'm going to say import from at redex.js toolkit slash query slash react we're going to import something called the iapi provider and the API provider is just where you tell Redix toolkit which API you want to pass in and in our case it is the products API so we'll just pass this like this and then over here you just have to pass in a single prop which is API and then pass in the products API now obviously we have an imported products API to this file so we'll have to do that we'll say import from and then go to Features slash API slice and import the products API just like this now this should be working I'll refresh the page I'll open up my inspect element go to my console and you can clearly see that we do have an object containing all the products meaning that we fetched the data correctly from the API at this point I feel like you might already have some sort of knowledge of how this works to understand how to do other stuff in the library as well however I'll give you guys another example of actually putting arguments or parameters to your routes so that you can actually search the specific product like I showed you before doing something like this right where you're just adding a variable to your url so to do something like that it's actually pretty simple we're going to come over here back to our API slides and we're going to add another endpoint now this endpoint is going to be called get product because we're just getting a single specific product and then we're going to say Builder dot query because this is a query right now the difference is that now when we say query over here and we create a function for this we're actually gonna grab a variable direct or an argument directly from this function so we're going to say something like product over here and we'll just say that the URL for this uh or the path for this specific endpoint is products slash search uh question mark Q equals two and then over here is where we have to put the actual product we're trying to search right so we can do something like uh actually I'll make this into uh backticks instead of quotes and I'll put uh money sign and the curly braces and then I'll just say product now this will allow us to specify uh variables and make this whole API fetching Dynamic now how do we actually give the product that we want to search for well we gotta pass over here a use get product query because like I said each endpoint you create over here will Radix toolkit will create a hook for you and then back in the data we'll just import that one as well just like this use get product query now we'll do the same thing we did before but there's an issue because you can't call both of them data so if you want to actually change the name of the data you get back to another variable what you can do is you can just put a column like this and say for example this one is for all products right so I'm going to say all products data and then this one it should actually be use get product query not use get all product query and I'll call this um single product data just like this now we can console log both of them right I'll do it just like this but the problem is where are we specifying which product we're trying to search for in the single product one we have to pass in this product so that it searches for it so in our case let's try to search for an iPhone just like I did over here well to do that you pass it directly in this part over here and the use get product query you just pass in which specific thing you want to search for and you'll see that if I come over here an inspect element you'll see that now uh it says oh there's so the the array ones the big ones which has a bunch of products is the first query but you'll see there's two of them which only shows two products this is for the one that we just searched see it's only iPhones meaning that it is correctly searching and fetching the data correctly so this is really cool but there's other stuff that you can actually get which is similar to something like react query or use SWR for example you can actually um get the error if there's any errors you can get a Boolean saying if there's any errors you can do something if there is you can get um is loading right it's loading is nice because like I can come over here and say if it's loading um then return uh H1 tag saying loading and then three dots what this will do is while the data is loading which is every time we refresh the page it will say loading for a split second until it actually um fetches the data right there's a bunch of stuff and there's actually a lot more to this Library I just wanted to make this introductory video because I felt like a lot of people were requesting it I know it's kind of confusing Redux is just a confusing topic as a whole but if you want to check out all the code it will be in the description I can actually make a more in-depth tutorial on rtk query because it's just really cool I really like it I do use still use react query and I prefer react query but if I'm using Redux toolkit then 100 I'll use our ticket query because it's already built in and it's a good solution as well so with that in mind again thank you skillshare for sponsoring this video gonna check them out the link will all be the description and yeah that's basically it really hope you guys enjoyed it and I see you guys next time [Music] [Applause] [Music] [Applause] [Music] [Applause] [Music]

Channel: PedroTech

Views: 38,062

Keywords: computer science, crud, css, databases, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, redux toolkit, rtk query, redux toolkit query, rtk query tutorial, rtk query vs react query, redux tutorial, react api, fetch data in react, react redux, react

Id: -8WEd578fFw

Length: 17min 7sec (1027 seconds)

Published: Wed Oct 12 2022