Complete Guide to RTK Query with React JS

1. Introduction: Hello and welcome to this course, complete guide to RTK query with React js, minor damage, some iteration. And I will be your instructor in this course. And in this course we're going to learn very powerful tool for data fetching and caching called articulate query. If you are a React developer, then you might be using the router as a state management for your React application to maintain application instead. And you might be also using Redux tongue or redox logger middleware to handle desired effect in your React application. So definitely redact team came up with the new approach to write logic. So Article query age introduced by the same reductive to make data fitting and caching with the redact as easy as possible. And it is built on top of the redact toolkit. That means you don't have to install additional package to work with Arctic jQuery, you just have to add Toolkit package in your React application. With the help of article query, our Rudolf logic will be more relatable and concise. Now, let me give you the brief overview of Rudolf to those of you who don't know what it is. So redact failure is state management library that we use in our React application, as well as you're going to use within your application. Not just with React, but it's very popular with the React library. So that's the overview of the reduct. So let's understand what we are going to learn in this course. First, we will start with some theoretical concepts. Like we will try to understand the core problem of React and why we use Redux with the React. Then we will understand like what is a toolkit and what APA in glued inside article query. All these concept we are going to understand with the help of puberty. And after that, we will build our credit React application with the help of RTK query and JSON fixed. With the help of this application, you are going to understand how to write a series of endpoint with the help of RTK query API, you are going to learn to make api requests that get, put, post and delete. This hit the overall application that we're going to build in this course with the help of hard jQuery. Now, let's talk about the basic requirement before you enroll into discord. This course is designed in such a way that anyone can join this course who are interested to learn modern Redux concept, you just need to have basic understanding of HTML, CSS, JavaScript, as well as React basic knowledge. And at the end of this course, you will have full understanding of RTK query concept and you will also able to implement articulate query in your any addicting React project. You will also able to replace if old redact logic present in your any React project with this article query, what are you waiting for joining this course in order to learn all these modern concept? And if you have any query or suggestion, then you can always reach out to me. I will try my level best to solve your all query. So that's it. From my end, I will see you in the course section. 2. What is Redux & Why we use it ?: In this video first, we will understand the core problem of React js estate management. We have our main app component. Then we got our sub-component. If we want to change a text, then we cannot do directly. Instead, I have to inform a parent and change the text there. And if I got additional component, then it will get even more complex. Therefore, we have a read of which have a different approach. So here we have our view, our application, and in this application in any given component will dispatch and action. Then action brand through the reducer. Reducer rather simple job or task. It will take an action, then it will take all the manipulated, and it will give a new state. This manipulation will happen, bake on the immutable. That means it won't change the old vector. It will take all the circuit as a basis and then create a brand new copy of all depicted with the changes in ploidy did stay untouched. We just create a new lifted and return this new state. This immutable gives you a unique state in your application. Now we're getting a new state can be reduced it then it will get stored into a store. And we will have only one store in our application. This vector has a one simple task, push toward our state. That's why it's called Restore. You might have a multiple reducer, but we will have only one is stored in our application. Then our application subscribe to this store. Whenever it's dated, get updated. New state park to the store. The store will automatically send it to all the component and directed and the application will get updated. Now, let's back to the previous example where we had our app component with other components. And now we also have a store. Now if we wanted to change something, the user component from MainComponent, then we will dispatch and action. Then the state introduce it. And then we path is dear to all components in this data all about what is reduct and why we use Redux in React js. 3. What is Redux-Toolkit ?: So now let's understand what is the total good reader to liquidate also use for managing application if statement a React application in efficient way. It's provided some batteries included tool set for efficient development. This batteries included toolset term, look a little bit fancy here, but you will understand this term later. Routers was already popular option for state management in our React application. Then why redact toolkit is required? With redact toolkit, there was so much code required to configure it, to optimize that basic level. And thereby too much boilerplate code, which makes our code, let's clean it efficient. Also, too many packages need to install to build a scalable application. With traditional redox, we used to write action and reducer in separate file. And this become more complex when our app and get you to address this challenge, redacting came up with a reader toolkit. Redact tool kit is a better approach for writing rid of logic. Overall, the reader to look at its period of the reduct and development by including reader Corbett redact tool good paragraphs that they think are filled to build a native application. So redact toolkit allow developers to write simple, clean Redux code. So this is all about redact toolkit and why we use with React. So I hope you understand this fancy term now that is battery included toolset. So this is all about toolkit. Now let's understand this reader to look good with one basic scenario. Suppose we have to build a counter application. We have to manage it is still five. I'm going to show you the traditional approach with traditional reduct. So we usually read reducer and accident in a separate file. As you can see that here we have x and dot js in which we have a two x ten to increment the counter value or decrement the counter value and introduce a dot js file, we have a logic to increment a counter value or decrement the counter value of the Theta. Traditional redact. Suppose now let us see how we approach with the reader to look good. In redact tool, we could rewrite our reducer and action in the same file. You can see that we have written our action at reducer under the Create slice through the toolkit approach. And you can make the code much more concept by using create. Both the reducer and I can, can be written like this way under the live by seeing this code, define a grid with it and action become cleaner. It data to look. There is no longer need to use the switch statement to manage the action with its corresponding producer. And another thing you might have, notice here, we have now directly mutating the value in the reducer function instead of returning a new value to update. This actually happened because the redact tool could use the library which allow writing the mutating logically, reducing. This is all about the reader toolkit with the basic scenario. 4. Understand RTK Query: Now let's understand what is RTK query. Rtk query either powerful data fetching n tracing tool. It is mainly used for fetching the data com server and its cache, the data for future use. And here it is also mentioned that it is designed to simplify common cases for loading data in web application, eliminating the niche to handwrite data fetching and caching logic yourself. Here, we don't have to write logic manually, loading, pitching our error part whenever we have to make an API request. So generally what happened? Articulate query will take care of all of this task behind the scene. Overall article query provided powerful toolset to define API interface layer for our application. And you don't have to install an additional package to work with the article query because Article query is built on the top of the other API in the reader Toolkit package. So you don't have to install article query additionally in your application. Now let us see what APA, including scientists RTK query file to create API. So creative PI is the core of the article query functionality that allow you to define a set of endpoints. Describe how to retrieve the data from a series of endpoint, including configuration of how to fish transform that data. And in most cases, we should use this once per. Overall in creative VA, we define a different, different endpoint, you can call series of endpoint. This is all about the creative here. Now let's talk about the base query. Faith-based query. It is small wrapper around fit. To simplify request. Inside is filled with query, will define base URL for our API. Now let's talk about the API provider's API provider can be used as a provider if you don't have a reduct is stored. If we don't have it stored in your application. So you can use this API provider. In this course, we are not going to follow this approach. We will follow the traditional approach. So basically we bring the provider of React redact library and we wrap our app component with the provider and we pass our restored to the app component. This APA provided approach we are not going to use in this course. Now, let's talk about the last one that is setup listener utility used to enable research on em on and reflect on reconnected we have here. This is all about the article query. 5. Project Set-up: Guys, now we're going to set up our React project. I'm going to use TypeScript template. So let's copy this command here. And now I'm going into my directory. Here. I'm going to open a command prompt, and let's paste that command. And I'm going to change the app name. So I have RTK hyphen current. Let's hit Enter. It will take around two to three minute to install all the necessary dependency. I'll be back 12 all the dependency getting told survive. Our project is now created. And I have already opened this project in Visual Studio Code. Let's go into the VS code first and let's open package.json file. Let's see what we have in our package.json file. So you can see that we have already got rid a toolkit and dxdt Redux package because we have used this command to create our React project. If you're using this command, then you don't need to install manually reader toolkit and reacted ydx. That's why I have used this command to create our React project. We have got our reduct toolkit and cardiac index package. Now, what do we have to do? So far? I'm going to do a clean-up here little bit. So we don't need feature folder for this project. Let's remove this one. We all, we also don't need this app folder. Let's say remove this one as well. An app dot TSX file. What we have to do a fight, I'm going to remove all these unwanted content which is not required for our project. Let's remove this one. Let's keep this heading. Like I didn't like RTK query. Let's say move all this thing. Let's remove the test file as well. And an in-depth or TSX file. Blush to comment here this line of code. And also left to comment this one. We are going to do uncomment this later once we configured our redact tool, the grid in this obligation, and also comment this line of import and this line up important because later is going to require, before we do npm, install some packages, I'm going into the directory and I'm going to install package like React, router down. And I'm going to call reactive as well, because we're going to use torque notification in this project too. So either error method, our success message, let us install these two packages first. Meanwhile, I'm going to create db.json file because we are going to use JSON server in this project. Let's create db.json file in the root directory. Here I'm going to pay some data. So I have just painted some initial data that we can start our work. And you can also create the data from urine. You have to inject add name, you will contact an ID. In order to run this JSON server, we have to write one script in our package.json file. I'm going to pick one script over here. You see the script required in order to run our JSON server. Jason cerebral will turn on 5 thousand port. Let's see whether our package installer not. So our packet got a tall. Now, let's do here and I'm also going to cut out JSON server ads. Well, this is our project directory and I'm going to append one more command prompt here. And I'm going to do here and the server. We can access this resource on this URL. So let's copy this URL. By mistake. Scott cancel. Let's start this Jetsons server again. We can access this resource on this URL. So let's copy this one. Let's go into the browser. You can see that we are able to display all the data that we have in our and db.json file. So this is our initial data that I have put in my db.json file. This is our initial data that is displaying in our browser on this URL. 6. Structure: So now I'm going to collect sitting or project. I'm going to create a couple of folders here. Folder I'm going to have pages. The next folder we are going to have pervasive. Next folder we're going to have model because we are using here TypeScript. So we have to create a model for this contact data. Now, we are going to have a tour under the source. So let's create here if dor dot dS, not JS, because we are using TypeScript, so it could be TSX. Here, you will get an error. So far. Now, what we can do here, export, const store. We can give your console dot log the error bar. Now, we will remove this later. Now what I'm going to do, I'm going to reject that our route. So I'm going to create some files here. Added it, I'm going to create edited got THF. Here we are going to use same file for adding the new content or updating the exiting contact. For this added it. We are also going to have CSS file for this case, so I added it dot CHS. The next page we are going to have home in which we are going to display all the contact in a table component. For this also, we're going to use CSS file. So home dot CSS. The last page we are going to have in full-page in which we are going to display a single contact detail. For this also, we are going to use CSS file info dot css. And for now, I'm just going to generate a reactive snippet here. And I'm just going to give heading had because I'm going to reject it this route in our app.js file. Let's generate this snippet here as well. It will be home. And let's generate a snippet in our input dot txt file as well. It will be in full. Let's first go to our app.js file, which I'm going to register all this route from React router down. We need to bring upper-left component. We need here routes, routes, browser, router, and let's remove this one. And here I'm going to use browser router. Routes in which I'm going to reject it all drought route is gonna be the home route. We are using year drought, though we don't need to provide the exact keyword. So here we are using the updated version of the react router down. You can see that in our packet or JSON file reacts with Dr. Dom got a bitter to vergence. You're going to see that we are also not using switch here. We are using routes and here it will be not component, it will be the element. We can bring our home component VS code automatically import that component for me. Let's copy this couple of times. This will be the add, add context. We are going to bring the added component. Now, this one will be the Edit Contact. We're going to read the context and based on the ID, we're going to use the same component, but updating the ejecting contact. The lifespan, we are going to have a input page in which we can see the single contact detail. It will be involved. And we are going to be the single contact. It'll based on the ID. Here. We are going to bring the info component. Let's verify in the browser whether all these routed, rejected or not. Let's go into the browser. You can see that home route called the detector. Very bad at contact. They said all surjective, Let's verify edit contact. In case of we did contact we have with faced by their ID. So it will render the same page because we are using the same page before adding the new content or updating the existing content. Now let's verify the info as well in case up in false. So we are going to provide the ID. Also got rejected. We have successfully rejector our old route in this application. 7. RTK Query Set up: Now we're going to start working on our RTK query. So as you can see that in our db.json file, we have already some initial data. I'm going to write a query to face all the data that we have in our db.json file. I'm going to create one file here and harvest folder. The file name will be like contexts, APA dot TSX. In this file, we are going to create a series of endpoint with the help of create API from toolkit. And we have to go to Query, then react. And we have to bring create API and faith-based very album in which we are going to provide our base URL. And we have to also create a model here. So it will be like contact dot model, dot ts. In this I'm going to create an interface for our contact. You can see that our content will have ID, name, email, and contact. Let go to this context API dot txt file. Here. Let's bring that interface from our model folder. Contact. Now here we are going to create our series of endpoint with the album create API, export, contacts API. We're going to use your API. Here. I'm going to reduce her path. This is a required because we need to connect this service with our code. We can give you a reducer part Context API only. Here we are going to have our base pairing in which we are going to specify our base URL. And Thaddeus faith-based query. Our base URL, http localhost. 5 thousand. After that, we're going to create a hatred of endpoint. We're going to use your pattern. After that. We are going to create our query here. Contexts dot query. Here. We are going to retrieve our all query in the form of area of object. We have to provide this model. And we have to specify this area because our, our contacted if tour in an array of object in our db dot JSON file. You can see that here. That's why I have it split by. The second argument will be the wired because we are not passing anything at the argument. It will be wired. Inside that we are going to write query. And here we are. Please specify our endpoint. It will be contact. This query basically expose a knee. Hope we can get this knee hook like this way. From our contacts API. The knee hook will be like huge contexts query. Whatever the name you are going to give you, going to expose a new hook like this way. Let's see if you are giving here on the data. Now, our new hook will become US. Use data query, okay? It's up to you whatever the name you are going to give. So the query will get changed. It will be now use contexts query. I hope you are getting my point here. Now we are done with our first query, which is responsible for fetching the data that we have in our JSON server. We have to configure our store. So let's remove this piece of code and we're going to bring configured it to our toolkit. So configured store. We have to also bring that context API, service folder, contacts API. Here we are going to configure. Our export is stored, is equal to configure store. Here I'm going to use it. It is contexts api dot reducer path. I have to specify the reducer path in our contexts api dot txt file so that it can be connected with our historical contexts api dot reducer. And here I'm also going to use middleware, middleware. And I'm going to use default middleware. So good default, middle ware. Good default middleware. Conquered. And we're going to convert our contact API. With Middleware. We are done with the store configuration. Now let's go into the index dot txt file. And we can just do uncomment all the important treatment and this one as well, the provider one. We are pitching the path of if torr. Now it is in source folder, so we can specify the space by this path. Now we can verify this one whether we are successfully configured our reduct toolkit or not. Let us turn to the browser. Let's go to the homepage. Let's open our reduction depth tool. Let's see if the state. Now you can see that we have got this query is mutation provided and subscripts. And that when we have successfully configured our reduct toolkit in this React application. 8. Get Data using RTK Query: Now we're going to display all the contexts that we have in our db.json file in a table component. So let's go into the VS Code. So you can see that I have already some data in our db.json file. So first, I'm going to display the data in that table component in home.html file. We're going to do that from React 5k. Let's bring US effect. We also need to bring link mode, React router dom. After that, we also going to need toast as well. Demo reactor. Let's bring this one as well. We also going to bring this CSS file as well. So import home, not CSS. I'm going to pay the CSS code for this file. Don't worry about all this CSS code because I have already at this CSS file to this lecture. You can find this CSS file in this lecture itself. Let's come to this home.html file. Now, what we have to do, we are going to use that you'd contact query to fetch the data that we have in our db.json file. Use contact query. You can see that we get called automatically import that one. Now, what do we have to do so once it's phased the database server, so basically our auditor will present in the data. You can see that in this data we're going to have all the data that we have in our db.json file. Now you can also attract some more property. You can also bring like loading. Loading, you can also use here each switching. You can see that this query provided in different, different property like easier each pitching success. You can use this one. And we're going to use only data is loading n error part as well. As per your convenience, you can also use other property as well if you wanted, but I'm going to use only the three property from this huge contexts query. Now we have got all the data. Now, we have to display data in a table component. Lets remove this one. I'm going to give some Atlantis tiling year. Let's give here margin top 100 pixel. After that, I'm going to have one link. Basically it will never get towards the head contact page. Contact. Then we are going to have a button with the class name. Add the value of what envelope with the add contact. Now, after this link, we are going to have a couple of break. Then we're going to have a table with the class name style table. Now, this table is failing of table is incorrect, so it will be a table like this way. Now inside this, we're going to have table head first, third table, we are going to have table row. Then we are going to have table head. First column will be the ID. We can give you a tile like a length center, line, center. And I'm going to do a couple of copy this line of code. This will become name, e-mail, contact with the action in which we can perform a delete operation, it RTK query. Now after this T head, let's format this one. So after this tiered, we're going to have our T body. In the body, we are going to display our data that we have in our db.json file. So data dot map, data dot map. We can have item. It could be any sense. We're using here TypeScript, so we have to provide this one. Otherwise, you will get an error. Index will be the enemy also. Now after this, we are going to be fiddly. Return the table row. We have to define key here. Item dot ID. Inside the table row. We're going to have first photo edit table head only. We can give you a scope row. Here we are going to use index plus one because in area in depth they started from 0. So we are going to be ethically increase the index plus one. So this will be not be ID, you can give here number. It should not be IID. And after this, what do we have to do? Now? We are going to have our table data inside this and we can display our item name. I'm going to copy a couple of time. This kind of board, this will email contact in the last column, which, in which we have an action. This action we are going to have three buttons for performing the operation, delete operation and V operation interval data. We are going to have the link here. And you have to provide two here. We wanted to navigate towards the edit page. Let's take the route first. We have add contact, then Edit Contact, Contact, then dollar, item dot ID. Now after this, we are going to habitat. Then we're going to keep class name here, beauty and beauty and edit. Now after this button, we are going to have one more button to perform the delete operation. So button with the class name, btn, btn hyphen Lily. Evaluate button will be the delete. We will soon define the onClick method here as well. Let's first define the button. Now we're going to have a view button which will navigate towards a single contact page. It will also have a button with the class name, btn, btn hyphen view. The value of a button will be the view. We're going to navigate towards the info page. Info. We can specify here dollar. Here we have to specify the ID. Let's check the single contact page as well. With the info Only. Let's go to the home.html file. And we can check five, where our data is showing or not in table component. Now you can see that we are able to sort the data in a table component. We have a name, email, contact and action. Now, we are also going to use this is loading as well. So we can use here light is loading is true. That we are going to show some methods like loading. Okay, let's go into the browser and we can also verify this one. So let's reload this application. Now you can see that her a brief moment, we're getting this loading. Okay. 9. Error Handling: Let's also use this one as well error. So far error, I'm going to use the US effect here. Let's use a huge effect. Here. I'm going to path independent theater at this huge effect only run if we have any kind of error. We can give you methods like toast, like something. We can also take this one, whether it's working or not. So what I'm going to do now, let us go to the Content API dot CSS file. And here we can just modify this one. So let's modify this one. Let's take this one. Let's go into the browser. Refresh this one. We're not getting anything. Let console log this one. Actually we are getting console log error. Whether we are cutting anything or not. Let's go into the browser, refresh this one. So you can see that we have got object and we have got the status whenever we are not getting the notification because we haven't configured our reactor active high in the app dot txt file. So we have to configure this reactor. Then only we can see the notification. So let's do that 1 first, I'm just going to pick the two line of import statement related to the reactor. And we can use the container. Let's go into the browser. Now you can see that we have got this method like something went wrong. We have also taste this one. Now, let's say revert our changes here. It will be contexts. Let's go into the browser. Now everything looks good. The next thing we are going to work on our adding the contact, click on Add Content. Then we are going to be deadly solar farm component here, in which either can provide the contact, name, email and contact. So let's do that one in the next video. 10. Writing POST RTK Query: So in order to add a new contexts of time, I'm going to write a query here. So I'm going to write a query like at contact. And here we are going to write our builder pattern, builder dot mutation since we are adding a new data. So here we have to write a mutation. Here what we can do here, the first argument will be the object, because we are going to send a contact detail in a object form. And then our contact. After this, what we have to do query here. Then contact. We are going to receive a contact from our component. Then we have to specify the URL. The URL a little bit of context only method we have with PHP. So far, adding a new contact method will put them both. Then body, body, we're going to send the context that we are receiving come out component. We have with paid for either contact. Here. Now, we'll expose new hook here. We are going to write a new hook like use at contact mutation. We are done with the query part related to adding a new contact in our JSON file. 11. Form Component: Now we have to create a form component in this added ID dot txt file. So let's do that one from React, I'm going to bring huge state use effect. From React, router dom. We need to bring US para and use navigate. Us parenthetically will require later once we perform the update operation. Now we also need youth navigate in order to navigate towards the home after adding a new contact. It is also required. Let's bring the toes as well. Let's print the toast. Let us bring this DHS file as well for this page. So I added it dot CSS. I'm going to pick the CSS code here and this CSS file. And don't worry guys, I have already attach CSS file to this lecture so you can get it from there. Now, let's work on our form component first. So I'm going to define some initial state or status component. Initially. Name, email and contact. Let's give your name. Should be in putty email with empathy. Contact, which will be the impetigo. Now here I'm going to define one state, cost value. Set. Value. Usually state. I'm going to pass this initial state here. Now I can take all these value from our form value. We can do taxa like name, email, and contact. And we have to also, toward the efforts of us navigate into a navigate variable, selection to that one as well. Basic thing we have done here. Now, what do we have to do first? I'm going to first work on our Form Component. Let's remove this one, decides to tag. I'm going to provide some inline styling. That is again, margin, top 100 pixel. I'm going to have here. Here I'm going to page somebody line is telling. Again, there's a thin line is telling. I object pictured here. This way or form component will be in the middle. Now, after that, we're going to have a label that will be like name. For it will be the name. We are going to have inputField. In this, we are going to have a type ID. Name. Name will be name only. The placeholder will be like name. Then we can give your name. And we're going to have on change. Depend that one as well. The handle input change. Let's define this one. Handle input change outsiders return. Let's also define the handle submit, perform submission, handle submit. We can use handle Summit here. On submit. Submit. Both function will receive an event. We're going to work later on this function. Now, I'm going to copy this input for a couple of times in our email and contact. This will become now email. This will be the e-mail. The e-mail ID will email, name will be the email. Can give you like email evaluated with the e-mail and the light input for available the contact. Contact. This will become contact. This will be the only number. Let us give you a type number. Will become contact, name will become contact. Here it will be in contact. Number. Value will become contact. We've got two warning here. So since we are using TypeScript, so here you can give any, okay. So let's go into the browser and check whether our farm component is displaying or not. So our form component is displaying here. Now we are meeting one button here. So let's add that button as well. Of credit inputField, we're going to add that button. Input type will be the summit. And we are going to give you a light value. Valuable, valuable be like. Let's go to the browser. Now you can see that we have got our button as well. So our formula is ready now. 12. Use POST Query to Add Data: Now the next thing we're going to add our new contact and that db.json file. So we're going to use the query. First. Let's work on this function first. Handle input change, detach it from a dot target, name and value. Then on value. We can spread out bomb value. Then we can do like name, column value. So handle input done. Now, let's work on handle submit. We are going to do is prevent default. To prevent the default behavior of a browser. After this, we're just going to verify user hadn't provided name or e-mail our contact them. I don't want it to somebody in PDF form. So in that case, I wanted to edit a method in it in the form of both notification. So we can give you a torch dot error. We can give method like Please provide value to each input. Let's save this one. And in the else part, we are going to be ethically, you use that query that we have created in our contact api dot txt file. So here we have to do something. At the top. We have to bring that query. Use contact mutation. We have bringing here. Now, we need to add contact. Contact. And this contact we are going to use here in our handle summit. Did handle submit will be the a thing. Let's see huge hear anything. After that. We can just do like a weird at contact. Here. We can provide our form value, entire form value. After that, we can navigate to the homepage and we can give you a success message like contact added successfully. Contact added successfully. Now, we can verify this one whether it's working or not. So let's go into the browser. Let's reload the app. Let's fight vary by the empathy input field validation. So let's click on Add. Now you can see that we have got our torque notification. Now let's add one contact here. So let's give you a name lactase for now. And then at gmail.com, Let's keep some contact. And let's click on hand. Now you can see that we're successfully able to add the content in our table component. So guys, we have perform the add operation with the help of RTK query. 13. Writing DELETE Query: Now we are going to perform the delete operation. So in order to dilute a contact, first, we're going to write a query in context API dot txt file. We're going to write five query to delete it contact. After this we are going to have one more query like delete contact. Delete contact. We're going to build a pattern here. This will be also mutation. We're going to pass the first argument wide here. It will be wired. Train. Why we are passing a string, because we are going to pass the ID. You can delete the content based on the ID. That's why it will be the string here. Because we are going to pass the ID from our component. Let's write your query. We are going to have ID. Here. We are going to specify URL. And the URL will be like context. We have to specify the ID here. And the method. I'm going to give you dilute because we are performing the delete operation. Now, this delete content again, expose the knee hook. Let detractor that knew who use delete contexts mutation. Now we're going to use this one in our home dot txt file. Because in home.html file we have our Delete button. We are going to have our onclick method, which we are going to define one method, light, delete, okay? We can pass item dot ID. Now we have to define this function outside, return to that one. Delete. And it will be also a thing. And here it will receive an ID. It couldn't be any. After that. First, I wanted to Window popup confirm message to you there. Are you sorry, you wanted to delete that message. Some kind of methods I wanted to display to the user before deleting the message. It'll be like a ratio that you wanted to delete that contact. If you click on Okay, and then it will basically come in steady state condition. Here we can use that Mutation query. So we have to bring our use delete contact mutation. We can use this one to delete our contact. This will be light delete contact. We can use here delete contact, and we can pass the ID. Here. We can keep this facility both towards success. Contact, deleted successfully. Now let's go to the project. Whether we are able to dilute the contact or not. Let us refer this application. Let's delete the fourth one. Now let's click on Okay. Now you can see that we have called the method of eye contact deleted that says bully. But from our table component, it's not getting deleted. If you're afraid this application. You will see there the fourth recorded but deleted now from our table component. Why it's happening? Because we have to add some more property in our context API dot txt file. So we have to provide a tag types. We can give you attack types. Here it will be contact because the name of modal is contact whenever any change occur in our entire context, so it will get refresh. We can use this one tag type like this way. In each query. In GitHub Query, we're going to use provided tags. Here. We can pass again this contact. In case of mutation, we're going to have invalidated tags. Here. We have to use invalidate tax. It will be contact. Here also. We have to use invalidate. If any change happened in our data, then our UI will get rerender with the updated data. Let's try again. Let's reload this application again. And let's try to delete again one word, record. Delete this one and click on. Okay. Now you can see that this time it got deleted without reloading this application. You have to provide this tags in order to see the updated data on UI. We have performed the delete operation in this application with the help of our decay query. 14. View Page: Now we're going to view the single record based on the ID on this info page. Let's do that one. So five, we are going to write a query for this. Let's go to the Content API dot txt file. Here we are going to write a query. Contact. Again, we are going to write a builder pattern here. Dot query. The fact argument will be the context because we're going to get a single contact in the object. And the second argument will be the string, because we are going to pass the ID from our component to get the single contact from our db.json file. Here we have directed query. We're going to specify the ID. Fit further endpoint here. It will be the ID. And we have to also specify the provider tag here. So let's copy this one and let's paste it here. Let's give you a comma. Now, this contact will export the new hook. We can define this new hook here. Use contact query. Okay. Now let's go to the info dot txt file where we are going to split a single contact detail. Now here what we have to do from react by Tenet to bring US effect. We're also going to need here, he used because we need IID from our URL, from React router dom. We need to use parallel as well as a link. Because we are, because we are also going to have one Go Back button. In order to navigate towards the homepage. Let's bring out to react. Now, let's bring the CSS file. This Info.plist file as well. Info dot CSS. I'm going to paste the CSS code here, or this info dot CSS file. And a CSS file is already attached to this lecture. So you can easily find out that CSS file and this lecture which is already attached. Here, what we have to do first, we are going to grab the ID. If I go back to our application. If you click on View, you can see that we have what this id2. If you need to grab that ID with the help of the US para. We are going to use use better. And we need Heidi. Okay? Now after that, we're going to use that use contact query. This youth contact query. We're going to pass an ID. Here. We have to provide exclamation mark. Here. We're going to detach it data. So it will contain a single object in which we will have our contact details, name, email, and contact. We're also going to use II error here. We're also going to use error. So let's bring that one as well. Arid part we are going to use here instead our youth effect. This huge effect only turned. If you have any kind of error. We can give you an error. We are checking. If we have error, then error. And we can give something methylate, something went wrong. Now, we have got our single contact detail here inside this data. Here what we can do is style. I can give some margin, top tip Excel. I'm going to use class, card class. I'm going to use one more class, the card header. Inside this. I'm going to have Beta, some heading. You the contact details. After this p tag. What we're going to have. Again, I'm going to have one more class with the container. And inside there, we're going to use a strong tag. We're going to use your ID. Then we are going to have a span tag, which I'm going to display the ID. We have grabbed the id with Delta, we use pattern. Now I'm going to have a couple of break here. And I'm going to copy this a couple of times because we are also going to display the name, e-mail and contact. This will become name. This will become like data dot name because this data will contain a single object in which it will have all the contact details like name, MLN contexts. So this will become a male data. Later dot evil. The last one will become contact. Contact. At this pillow, we are going to have our Go Back button, button. I'm going to use the class name tn, tn at it. Let's keep the value of button. Go back. We're going to use air link. Let's cut this button and paste it here. We're going to navigate towards the homepage. So if you click on Copy button here, we're particularly navigate towards the homepage. Let's see whether it's working or not. So let's go into the browser. So let's view this content detail. Now you can see that we are able to see the single user contact details on our info. And if you click on go back so you will never get to western homepage. Now, we are done with the single user contact detail based on the idea with the help of our decay query. 15. Populate Form Data: Now we're going to perform the update operation. So if you click on Edit button, here, we'll navigate to Edit Contact page. We are going to populate the existing value into eight irrespective input field for name, email, and contact. And the Evaluate button will also get changed from had to update. So far, let's do all this thing. Then we are going to perform the update operation in added ID dot txt file. What we have to do here, I'm going to use use param with the help of u is parallel. We are going to get our ideas from our URL. Now after that, what we have to do first, our job is to populate the data into each respective input field. I'm going to have one state here that is called Edit mode. Mode. It will be initially false. Now, we are going to run huge effect here. Use effect. Use effect only runs once we have the ID and once you have the data. Here, we are going to use this query to get the finger contact detailed weight on the ID in order to populate into it respective input field. Here in edited got THE file. What we have to do. So we're going to use that query as well. Use contact query. And we're going to get data. Let's also bring the error as well. This huge effect only runs once we have data. Here, we're going to check if we have the ID. That means users updating the existing contact detail. That case, I wanted to do landscape mode to true. Here we're going to check if we have the data set form value. I'm just going to spread out the data because this data will have a single object which will hold the value like name, email, and contact. So it's printing out this value in order to populate the hesitating value into its respective and portfolio. Now in this condition, what we are going to do stat edit mode to false value to our initial state. Let's also use one word, youth effect. This huge effect with Italy will run if you have any error. Here. We can check if you have error. Also, we are going to provide an ID. We can give here methylate, torched dot. Something went wrong. In case of update, we are only taking this error part. We can give it like something went wrong because in case of adding the new contexts, you will not get ID. Let's first check whether we are able to populate the existing value. And here we've got some error. Here with Italy, we have to provide the ID. That's why we are getting that error. We can use this one after this line. Okay? First let's go into the project and see whether we are able to populate the exiting value into it irrespective and put filled or not. So now you can see that we are able to public the exiting value into each respective input field. Let's go back. Let's click on this 1 second record. It is working. 16. Update with RTK Query: Now in order to update the existing contact details. So we have to write a query here in our context, heavier dot txt file. Here. What we have to do here, I'm just going to cover this one. Let's stay here. This will be like update contact method will be the output. And here we are going to receive a contact. And the second one will be the string because we are going to update the content based on the ID. Here. What I can do need ID and we can pass rate of the content additives like name, email, and contact. So we can just give you a body. We can inject. Path is red because the thread object will contain our updated contact detail like name, email, contact. Here we got some error. Here. We're getting error because it will be wired. It will be content because we are getting this context object from our component. We are receiving this content from our component which contains ID, name, email, and contact. That's why detecting the ID only. And I'm just passing the rate of the detail like e-mail, name and contact in the body. We have to do this small adjustment here. This query will again expose a New Hope. Let dv structured that new hope here, The US update contact mutation. Now let's go to the adequate dot txt file and it handles summit. We have two particularly update the existing logic in handle submit with Italy we have to update our adjective logic. So here we have put determine whether we are in immediate mode or not. So if you are not any more, that meant, that meant user is adding a new context. We can cut out this piece of code and we can pay to tear apart. We have to do so first we have to bring that use update contact mutation. Let's just copy this one. And it will be used update on tech mutation. And this will be updated contact. Now, handle submit. We can just copy this one. Here. This will update contact. We also wanted to save the edit mode to false. After updating the content, we wanted to never get towards the homepage. We have also specified and navigate here. And let's update the method as well. It will be contact operated successfully. Now here also we have to change the value of button based on the edit mode. If you are in edit mode. But anybody with the update and in case of adding, it will be the ad. Let's go into the browser. Refresh this obligation. Now, let's click on edit. Now let's update this one name. And this will become like James Gunn. And let's click on Update. Now you can see that we're successfully able to update the existing contact detail. We have performed the update operation with the hair pop RTK query and this React application. Now it's time to perform all operations one-by-one so that we won't break anything. Let's add a new contact again. And this time I'm going to give you the rate gmail.com. Click on Add, new contact added successfully in our table component. Let's review this one. So we are also able to view the content. Now, let's edit the existing contact details. So let us click on it, it. Now the time I'm going to give you a reporter. Let's also update the email as well. Reported. Let's click on update. We are also able to perform the update operation. Now let's perform the delete operation. So I'm going to delete the second record. Let's click on Delete. Let's click on Okay. We are also able to delete the record come out table compared with the above articulate query. 17. Project 2 Demo: In this section, we're going to build a food recipe application with the help of RTK query in React. And we will be using TypeScript template in this section to build this food recipe app. With the help of this app, you are going to understand how to work with third party APIs. In article worry, we will be using Edmund third-party API to lift out the different, different recipe on our GUI. So in this application, you can search different, different recipe. So let's try to search the TP with bread. So let's click on Search. So you can see that we're getting the recipe related to bread. And if you are a little bit health-conscious, then you can select here lows over. Again. It's going to filter our result based on this health category. And if you click on any recipe card, then a modal will pop up in which I have included some more detail about this particular recipe. So this is the overall application that we're going to build in this section with the help of Arctic a query. In React. Next video, we're going to configure oedema third-party API. And after that, we will start doing projects set up. So I will see you in next video. 18. Project 2 Configure Edamam Recipe API: Let's configure our food recipe API in admin website. So make sure to create an account. And once you create an account, you will land on this page. And in this, we will be using 31. With three, we will be able to make only ten requests per minute, which is enough to build this food recipe application. So under document, we will get our recipe search API. So here we are using older version. So let's scroll down and we need this APA. So let's copy the TPA and save it somewhere in Notepad. Now we need App ID and app key. So we need to click on Get API key. After that, you have to click on this View under Recipe Search API. So this is our app ID and app k. So let us store this information as well in lone pair. 19. Project 2 Set Up: Now we will start working on our project setup. So to work on our recipe of location, we are going to use a redox type script template. So let's copy this command. And I'm going to paste in my terminal. And I'm just going to change my app name here. It will be RTK recipe, okay? And let's hit Enter. It will take around two to 3 min to set up our React project with redox type script template. So let's wait for the projects set up. Our project setup got completed over year. So first, let's go into this directory. That is our decay recipe. Before we do an image tag, we need to install one package for our project. So in this project, we're going to use material design booster five. So let's copy this one. And let's open this terminal. I'm going to paint it here. And let's hit Enter. It will install the package. So our packet got a star. Let's do and pay me start. And I have already opened this project in my Visual Studio code. So let's go to the VS Code. So as you can see that the project is open in my VS Code. And we have some boilerplate code over yet because we have created this project using redox type script template. So let's go to this package.json file. As you can see that creating project with the redact TypeScript template, we don't need to reader Toolkit package as well as we also don't need to install React redux. So we don't need to install these two packages using TypeScript. So guys, now let's go to the browser because our development server is running, so we don't have any issue. So let's see in the browser. So we have bought this content and this content with Italy. It's displaying from our ab.js text file. So we have this content which is displaying on our browser. And let's explore these two folder as well. So we have bought feature and I have folder inside this, we have restored. So we have got some basic configuration about if we have hooks here. And we have one feature folder in which we have content folder. This content folder is not required. So let's remove this entire folder, fudged. The content folder was not required. So now let's go to the browser. So now our application and got break over here. So we need to do some cleanup over yet. So let's go to the store dot CSS file. We don't need this one. Let's remove this one. Let's remove this one. And let's save this file first. Let's go to the app.js file. And I'm going to remove our entire content. We can give you like a recipe. For now. Let's say remove this one because we have deleted that entire folder. Locally also not required. We can also remove this React important statement. Let's save this file. And let's go to the browser. Now, we don't have any issue in our application since we're using material design Bootstrap in this project. So we need to bring the CSS file for the material design Bootstrap. So what we can do for that. So we can copy this important statement and we can paste it over here. Okay? So we can see the changes in our browser. So let's go to the browser. Now you can see that we have got some different heading. So that when we have successfully configured a Material Design Book Club in this project. 20. Project 2 Folder Structure: So now next thing we're going to do it for structure. So we're going to have some folders and files in this application. We are going to have one folder components in which we are going to have some files like model, not TFX, spinner dot t sets. And we're going to have one card component. So I'm just going to generate a snippet in each component. The other way, we will get some error in browser because we're using TypeScript in this project. So let's send it a snippet for this component as well. After that, Let's delete this one features folder. Instead, we're going to have services for that. Because we are going to create an endpoint. And inside that, we are going to have that STP, APA dot ts. 21. Project 2 Configure Store & RTK Query: So let's configure Arctic a query in this project first. So here we need to bring some APA from our toolkit. So from redact to liquid, we need to go to the query. React, okay? And we have to bring create APA and Fitch bit query. Now I'm going to take my API key and app ID that we have got from Adam. And so this is the API key and app ID that we have generated on our element. Now, we have to create an endpoint here. So export that NCP, APA. Create APA. We are predefined reducer part because we have to connect this recipe APA to our restore. So we have to define reducer part over here. After that, we have pre-defined the base query of our admin API. So we want to use your faith based query and we have to provide the base URL. So the URL will be like HTTPS, apa.admin.com. After that, we're going to have endpoint. And we are going to write some builder pattern. Here. We are going to have get recipes. Builder lot mutation. If you are a little bit aware of RTK query, this builder dot mutation we normally use for making polls or delete request. But since here, we have to get the recipe based on our search query and health. So we have to variety or a mutation because we need to receive search, query and health from our component. So here we have to write mutation. So inside this, we are going to have query and we're going to receive query, that is search query. And then we can return. So here we have to specify the URL. So I'm just going to copy this one. So this is our base URL, which we have already specified in phage base query. Okay, Let paste it over here. And we're going to receive this query Tamar component. So we can use here query, okay? And health. We're also going to receive from our component only. So let's replace this one. So let's format this one. And this recipe is going to exposure New Hope. So what we can do over yet, export call the recipe APA. This recipe is going to expose your new hook so we can try it over here. So let's save this file. And we have to do some work in our store dot CSS file. So here, let's remove this one. We don't need to import better listener from our toolkit. So from redact toolkit, we need to go to dist, folder and query. And we have to bring setup listener. And now we're going to bring our recipe APA, from our service for lead. Let's go to the site of series. And we have to bring new recipe if VA. Now we have to connect our reducer with this recipe APA. So they see PABA reducer part at STP, APA dot reducer. After that, we have to also use middleware here. So we're going to use default middleware. So good default middleware. That default middleware. And we have to cut that STP APA to our middleware. Let's format this 15. And here we can remove this one. Okay? And we can have setup listener, store, not dispatch. Okay. Let's save this file. So we have configured if tour in this project. So let's open terminal, whether we have any issue or not. So we don't have any issue as of now. So let's go to the browser. So here also we don't have any issue. Let's verify whether our decay query is successfully configure or not. So I'm going to open read a dev tool. And you can see that we're getting something in our reductive tool. That wins. We have successfully configured our decay query in this React application. So now we can start working on our food. That SAP application. 22. Project 2 Navbar & Search Input Field: First I'm going to display the recipe in a card component. So I'm going to start working on this app dot txt file. So here we need to bring some hooks from our React. From react. Let's bring usage that. And usually state. And we have to also bring the query that we have written under Services folder. So we need to go to these services. And we need to bring that query. Use get recipe mutation. After that, we need to bring some component from our material design bootstrap. From MDB, react UHC. We need MDB, MDB input, MDB, MDB, NAB, but I'm Davy container, MDB, navbar brand. Okay. After that, we are going to define some piece of state. Okay? So we're going to have a state bar value. So basically we are defining a state, our third input wave over here. And after that, we have to put this value into a different dictate, that is, query. You just did. And this will be inputted. We'll also empathy. Now we have to define the health. So it is basically held category. It will be set health. And by default, we are going to basically display a vegan, okay? And we're going to have each state for our model as well. Let's define. And we're also going to have to display a single recipe in a model. So we're going to use object. So basically we are willing to act toward that single recipe into object. So let's define here in Part D object. Now, let's remove this one. Now we don't need. And here I'm just going to give some inline style. And let's give your margin auto. Let's give padding ten pixels. I'm going to give you a max width, thousand pixel and align content. It will be centered. Now inside this div, we're going to have MDB nav bar. And this will be light background color. We can give light also. Then we're going to have MDB container and that will be loaded. Then we're going to have m dv, navbar brand. We can give it a class name, text center. So this is a Bootstrap class name I'm giving over yet. After that we can have h5 tag with the class name f, w. I spent bold, empty hyphen two. And I'm going to use here emoji. So I'm going to use your burger, burger after that recipe. This is our title for this application. Let's save this one and let's see in the browser how it's look like. So now we have got our nice nav bar over yet. Let's continue work on other part. So after this navbar, we are going to have the div, the class name, rho, d hyphen one, align items, center, md hyphen too. And inside this div, I'm going to have input field. Okay? And here, let's give an upper-class that will be auto level. Let's give recipe. Let's keep type text. After that, we're going to have value which we already defined. Then we're going to have on tin method. So let's define that one as well. So this is going to receive event dot target value. After this input field, we are going to have one more day. The class name Ball auto. And we're going to have one button. So MDB, beauty and search. Okay? We will define onclick method later. 23. Project 2 List Recipes in Card: So now we have to basically lay out different, different recipe in a card component. So we're going to use this query to get all the recipe. So let's use that query. So cons use get recipe, mutation. And we have to pass this query and health. So we have to bring this recipe as well. So here, first, we are going to bring that, get the recipes. After that, we're going to dig texture, different, different piece of the state that is generated by our article query. You can see that we have a different light. Either is loading, is that all these different, different state is going to generate it by our decay query. So that's the reason it's called powerful data fitting tool. So we need only each loading and data. Inside this data, it will contain our, all the recipe. After this, what we have to do. So we have pre-defined when you defect. And this huge effect. It will run whenever we're recipe or we're changing the health category. So in both cases, we have to run this query. Okay? So I'm going to define one method yet. So get food recipe. So let's define this method below this huge effect. So cost and get the recipe. And this will be a thing because we are going to perform asynchronous operation. So you can see that in get recipe, we're making the API request. And here we have to also define one more thing, that is method. So here you have this case if I get okay. So let us specify method as well. After this. We can just do like a weight, get the recipes. And we have to pass query and health in the form of object because we're receiving here in the form of object only. So you have to pass this way. After that. What we have to do. So we can verify this one, whether it's working or not. So let's go into the browser and let's open the rate of death. You can see that our promise, God fulfill over here. And here we got some recipe. So you can see that inside data we have are all the ATP. Inside data. You have to go to grades and inside hits. You will have different, different recipe. So we have to target this way. So let's go to the VS code. So here you can see that we have already deep structure data. We have to just target like this way, data dot hits and inside hits. We have our different, different recipe. So now in order to display the recipe, we have to work on our card component. So let us start working on this card component. Then we will ever to display our recipe still from MDB reactivated. We need to bring some component from material design. We need to bring m dv, column, MDB group, not beauty and group. Mdb card group. Mdb, MDB card image and IMDB card body. Okay? After this, we have to do some adjustment to this functional component because we're using TypeScript. So we have to write this way, React dot functional component. And here we have plates pay-to-play Rob's function. We will define this one outside this component. And it's going to receive a prop recipe. So whenever we pass a probe to a functional component in a TypeScript, so we have to write our functional component this way. And outside this functional component, we have to define our interface. Otherwise we will get a red. Let's define this prompt function. And we are going to receive a recipe. So it could be any, okay, after this, what we have to do. So we can remove this one. And here it will be MDB color, MDB card body. Then I'm going to use MDB car. And here I'm going to use Bootstrap class name. It will be edge hyphen, md hyphen to d hyphen SM flux. Then we're going to have MDB card image. Inside source. I'm going to be specified at STP image. So recipe dot image. In alternate, we can expect to pay levels. So recipe not labeled. Petition will be top. Stylists. Give me a character pointer. Okay? We're going to have onClick method. So we will define this one later. So for now let's remove this one. And after this, we're going to have MDB card body. And here I'm going to use h5 tag with the class name, have w and bold. Here. We are going to have the recipe level. Okay? So let's format this one. And here it will be MDB card groups, card body. So let's use here MDB card group. Let's save this file. So you can see that in-depth tool, we have level image. So we're using this property inside our card component. So let's minimize this one. And I'm going to use this card component inside our app dot txt file. So after this div, we are going to have MDB row. Okay? And I'm going to use here class name. Row calls life, and one row calls hyphen, md, hyphen three, G, hyphen four. And we have put target hits. As you can see that in greater depth tool inside our heads, we have our different, different recipe. We have to target like this word data, dot hits. And I'm using here ternary expression. So why am using this one? Because if you don't use this, so you have to write like this way, data dot hits, then you will able to use data dot hits, dot map. Okay? So their citizen, I'm using this ternary expression. So data dot hits, dot, map and item any. Because we're using here TypeScript, so we have to specify this one. And let's use your card component that we have created. Soviet code automatically import the card component for me. And here we have to specify the recipe props. So item dot recipe. We have to give like this way. Let's save this file. And let's verify this one whether it's working or not. So let's go into the browser. So now you can see that we are able to render different, different recipe in our card component. Okay. 24. Project 2 Search Recipe & Spinner: Now after that, what we have to do, we have to implement search functionality. So we have created the button, Search button, but we haven't tried any logic to perform the search functionality. So here we're going to have one onclick method. And then let's define this one outside the return clause handle. Okay? So here we can do set query and you can pass the value. And after clicking on search button, we want it to clear search input field. We can do like fit value to input t. Now, we can perform search functionality in our application. So let's go into the browser. And I'm going to set it SAP with the bread. So let's type here the bread. Let's click on Search. Now you can see that we are able to fish recipe based on the bread. Okay, so status functionality is also implemented in this application. Now let's go back to VS code. And I'm going to use, this is loading is theta as well. So I'm going to work on our spinner component. So here what we have to do. So here we have to bring one component from our material design Bootstrap, that it is printer, that is the MDB is peanut. And inside, we're going to have one div with the class name text, md hyphen five. And we are going to use here MDB spinner. And here we are going to have a span tag with the class name visually hidden. Okay? And here I'm going to give loading with three door. And in MDB spinner we have to pass some probe that is grow class name. Let's give here empty hyphen two. Let's keep some inline style. I'm going to give here Three them. I am going to give them this one. And we can remove this one. We don't need. Let's use this component inside our app dot txt file. And here we are bringing this is loading. So what we can do, we can check if we have is loading true. Then in that case, I wanted to do is painted, okay, so VS code automatically import this spinner component for me. Now, let's go to the browser. Let's illustrate this one. So now you can see that we have bought a spinner on our obligation. Now, next thing. 25. Project 2 Get Recipes on Health Category: We're going to implement it dropped down here. So we're going to have one health and drop down, which will contain some option to filter out based on different, different health category. So let's work on that one. So we're going to have this health category in our drop-down. So let's create a drop-down over here. So here we are going to have drop-down and we're not going to use a drop down component, raw material than Bootstrap, we are going to use normal HTML and we will each tile that one with CSS. Okay? So here we are going to have one div with the class name called auto. It will be auto. And inside that, I'm going to use Select. And we're going to have one class name, category, dropdown. And we're going to have one on Jane method. It is handled OK. And we can pass your value. Inside that. We're going to have options. Then we're going to map this option that we have defined, our strategies, that we have defined outside have function. So let's use the adoption and index. Then let's use your option tag. So here I'm going to use are not level. And let's use here value. So option values are, it will be in per day. Let's give you a key. And let's save this one. And let's define and double-click. Outside this return can handle click. And this will receive an event. And we can fit like E dot target value. After that, we're going to index dot CSS file. So we have to space by the styling for this category dropdown. So I'm just going to paste the styling for that class name. So this is telling I'm going to apply for our dropdown. So let's save this one. And let's go into the browser. Now for this one. So now you can see that our styling applied on drop-down. Select again recipe bread here. Now we're searching with SAP related to bread. And here, let's select health category. So I'm going to select here low server. So now this time we will get different result recipe related to bread. So you can see that we have got different results now based on our health category. So this is also implemented in this React application. 26. Project 2 Show Recipe Detail on Modal: So last thing, we have to work on our modal component. So whenever you click on any card competent. So we're going to display some additional info about that particular recipe. So let's work on that model component. So we need to go back to VS Code. And we have already created a model competent over here. You can see that. So in this model component, we need to bring some component from material design Bootstrap. So Vineet component like MDB, MDB modal dialog, MDB model content, MDB modal header. Then we need MDB butane as well. Imdb model muddy and MDB model. Okay, let's format this one. After this, we have to define interface for the prompts that we are going to get a tip from our app component. So let's define that one as well. So we have been good if you then we are going to receive the density. So this is a function that way I have written like this where this is an object. You can give it any if you want it. So any, so it will be boolean. Okay? After this, we have to modify this functional component because we're working with the task groups. So it will be React dot FC. And here we have to pass this prox function. This prompts function, and it's going to toggle so recipe, show and set. So now inside the term, we're going to have one fragment. And here we are going to have IMDB model. Here we are going to be Jewish. So, so once this true model will open, okay? And we have to also define yesterday. So, so MDB modal dialogue. Then we're going to have MDB modal content. Then we are going to have MDB modal header. Then we have h5 tag with the class name f, w, hyphen bold. So this will be level, the recipe level. After this. After this style tag, we're going to have MDB, BTN. Okay? So here I'm going to give className btn, hyphen close, Taylor, none. Onclick. We're going to give yet. So after this header and we're going to have MDB model body. Yet I'm going to use the image tag. Okay? So thoughts, inside source, we are going to have recipe Doherty maze. Inside alternate. We are going to have disappeared DOD level. Then we are going to have the div with the class name and iPhone. Then we are going to have h5 tag with the class name, text, start, F, W hyphen, bold, text, hyphen muted. And let's give one inline style. That is float. Left. Inside is five times. We are going to have level like calories. Okay? After that, we're going to have again h5 tag with the class name, which I finished starts. And here we are going to solve the calorie count. So recipe, not galleries. And we can give the unit as well. Here. So far calorie, it will be case. T a L. After this h5 tag, we're going to have ingredient. I'm just going to copy this one. I'm going to paste it over here. And let's remove this style. We don't need this style. Bar ingredient. Ingredients. Ingredients basically contained in array. So we're going to use map here. So if you look at this, so this is our field, okay? So here inside of mutation, we have to go to this. Let's go to Data Flow to hit. You will find ingredient for a specific recipe insight ingredient line. Okay, so here we have ingredient line, which is array. So that's why I'm going to use map over here to display the ingredient for that particular recipe. So we have to target like this way, the recipe dot ingredient, line, dot map, item. It could be any. Then we're going to use yet lift with the class name, text I furnished start. And here we are going to have our item. Then after body, we are going to have one. So IMDB model. So for that we are going to have a close button. So MDB, beauty and close. And here, the color, I'm going to give the country. And onClick. We're going to use toggles. So we have to define this function in our parent component, that is ab.js text file. So now let's work on the rest of the piece in our app.js file. So here what we have to do. So whenever you click on card, a modal will pop up. Outside return, we have to define a function. And inside this, I'm going to pass at STP. Okay? And so we can just do oppose it, whatever we have the state value of. So we can set here at SAP whatever we are receiving. So basically we are storing objects in object. So this recipe object content different, different detail about particular recipe, like image level ingredients. Okay, So we are storing objects even three that we have defined this set recipe as a empty object. We are exploring everything in an object. So this toggle, so we can use here. So in card, we have to pass this toggle. So, okay, now let's go to this component. And here also we have to define that also. Okay, so I'm just going to copy this one because it will be the same. And here we have to pass toggle. So here onClick, what we can do. So in onclick, we can use that toggle so we can pass this recipe. Okay, let's save this file and let's go to ab.js text file. Now, once this silver I looked got true, then we have to open the model. So after this MDB row, we have to basically so that modal component. So if it's true, then we have Bu, display model component. So let's bring that model competent that we have created. So we had pulled automatically important that component for me. And here we have to pass props like show set. So because this prompts and we have already defined in our model component, here it will be the NCP. And here we have two paths also as well. Now let's save this one and verify in our browser whether it's working or not. So let's refresh this one. Let's click on any card component. Now you can see that we are able to display some more information about this particular recipe, like calorie and ingredient. So this is also done. So everything is working. You can see there. So we have build this food recipe app with the help of article query in React. So I'm going to open a console whether we have any issue or not in this current application. So you can see that we have some kind of warning. The warning for now we can ignore. And let's fix this second warning. I'm going into my VS Code. And here we can use key. So t is equal to index. Let's save this file. Let's go to browser. Refresh this one. Now, we're not seeing that warning related to our card component. And you're going to ignore this warning for now. So let's close this one. 27. Project 2 Fixing Types: Let's work on the type which we haven't really worked so far in this application. So let's go back to the VS Code. And if I just said Amy, okay, so you can see that in all these different, different file, we have to use the type as any. So it doesn't look whenever we're working with the TypeScript. So you can see that we have used any here. We have used any here. Let's work on this type. Okay? So what I'm going to do part-time, going to create one folder here that is common. And I'm going to create one file types. Okay? Now, if you look at the component in the model dot TSX. So here we have a recipe. The recipe should it be an object okay, which contained ingredient image data. Okay, so we're going to define the type for that. So let's export type. And this should be a recipient type and recipe content, the property like label. So it will be trained image. It will be also a spring. Then we have a Calories, which will be an ingredient lines. Ingredient ingredients line. This will be added and it will be having a drink. Okay. Now let's save this file. Let's go to this model dot css. And here we can bring this one. So this will be at STP type code automatically import this type for me. So I have bring this recipe type from this part. And here also we have a wide typing any other type. So here x would be LTP type. And so what we can do for this, because it is coming from our app dot txt file. Okay? So here what we have to do, so React dot dispatch. And here it will be react.net axial and the failure Boolean. We have to assign Boolean. Okay? Now after that, what we have to do. So here you can see that we got one warning. Let's go to this app.js file. Here. You can see that we got one warning here. So why we are getting this warning? Because if you go back to this ab.js text file where it is novel, so accepting a recipe as an argument. Okay, So what we can do, we can provide the recipe. And from here also we have to provide the recipe even if you're closing the model. Because now we're working with that group, so we have to provide the recipe. After that. Let's go to this ab.js text file. And here, what do we have to do? So we cannot write as any here again, because you are working with the TypeScript. So what we can do over here, so it will be LTP type only. So we have to bring again at the tippy type from this path, the VS code automatically import this one for me. Here. It will be a wide, okay? And here we have to just simply return nothing. So this is smallest, small correction I'm doing in this application related to type. Now, we have to also work on the handle click as well. Handled click nothing but it is a drop-down. So here it will be React dot change event. And it will be HTML element, HTML select element. Because you can see that they've handled later, we have used in a drop-down only. Okay, So that's why it's so HTML select element. Now we got one warning. Okay, so let's go into the browser. Now you can see that it's saying like objectives meeting, following property from type recipe, type of an artifact, this problem. What we can do over yet. So now it should not be empty object. Okay? Oh, yeah. We have to bring this recipe type. The tippy type is already imported. Now inside this, we have to define the initial value. Level will be the inputted string only because everything will be the input D initially. And image should be also in putting rates we have, so it will be zero. And we have the ingredient lines. So it shouldn't be, it should be in pretty era. Now that warning is gone. And let's work on this part as well, where we have defined different, different state. So we have to also mention the type here as well. So here it will be string. Okay? This is also a tree. This is also a string. And this one is a Boolean. Let's save this one. And that is where we have used any other time in this file. So we have used any here as well. For this, what we can do index, we can give here number. And here. We can use this function. In modeled or TFX file. We have defined this function. So we can bring this interface from this file and we can use it over here. Props function. So I think we have to Export, Export, export our interface. Let's see, use it over here. Function. We add code automatically imported this one for me. So now we don't have any other time in this file so far. Let's go back to again, modeled or TSX file. So here also again, we bought any. So this is the JSX, okay, So it should be a strange epithelial spring. Okay. And let's use your in-depth as well. Shouldn't be a number and let you use your key. Otherwise you will get a warning. Like each child should be a unique. So let's use your index. And I think in the card component also, we are using any other type. So here we can bring this recipe type, recipe type on this path. And for this also, it should be a recipe. Okay? Here already we are passing the recipe. Any place we have left, we have replaced ME with the proper type in our old file where we have used any other type. Now, let's go back to the browser and check whether it's working or not. The fact I'm definitely think that obligation We're working. Okay, let's refresh this application. Let's select anything. Okay? This is also working. Application is working as usual after defining the proper type in our code. So that's it from this video. 28. Project 2 Wrap-up: So we have successfully able to build this food recipe app with the help of RTK query. In this section, I hope now you have learned how to use third-party API with article query. So hope you have learned some important concepts related to art k query in this section. So thank you so much guys for watching this section. I will keep adding more project related to redact toolkit, an article, a query. In this course. 29. Wrap Up: If you're watching this video, that means you have completed this course. Now, I'm fully confident that you have little understanding of art jQuery concept with React. I hope you have enjoyed this course with some new redact quantitative and still have some doubt our query related to this course, then you can always portfolio valuable thought in comments section, I will try my level best to solve your query. That's it. From my end, I will see you in next course.