Build Food Recipe App using RTK Query in React | Redux-Toolkit | React TypeScript

hey guys what's up what's going on welcome to my youtube channel so this video is supposed to upload on freeportcam channel but due to some reason they didn't allow me to upload this video on their channel so i decide to upload this video on my youtube channel so let's see what we are going to learn in this video so in this video we are going to explore rtk query which is very powerful data fetching and caching tool built on top of the redux toolkit package we will understand theory part related to artik query later in this video but for now let's see what we are going to build in this video so we will be building a food recipe application with the help of rdk query using react we are going to use here advanced third party api to list out different different recipes on our front front-end app so in this application you can search different different recipe so let's try to search recipe with bread so let's click on search [Music] so you can see that we are getting recipe related to bread and if you are a little bit health conscious then you can select here low sugar so again it's going to filter our result based on this health category and if you click on any recipe card then a model will pop up in which i have included some more detail about this particular recipe so this is the overall application that we are going to build in this video with the help of artik query in react before we start working on our food recipe app let's try to understand first like what is rtk query and its api so rtk query is a powerful data fetching and caching tool so it is mainly used for fetching the data from 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 needs to handwrite data fetching and caching logic yourself so here we don't have to write logic manually for loading fetching or error part whenever we have to make a api request so generally what happens rtk query will take care all of this task behind the scene so overall rtk query provide a powerful tool set to define api interface layer for our application and you don't have to install additional package to work with the rtk query because rtk query is built on the top of the other api in the reader toolkit package so you don't have to install artik query additionally in your application now let's see what api include inside this article query so first we have a create api so create api is the core of the rtk query functionality it allow you to define a set of endpoints describe how to retrieve a data from a series of endpoint including configuration of how to fetch and transform that data and in most cases we should use this once per app so overall in create api we define a different different endpoint you can call series of endpoint so this is all about the create api now let's talk about the fetch based query so phase based query is a small wrapper around phase to simplify request so inside this phase-based query we define base url for our api now let's talk about the api provider so api provider can be used as a provider if you don't have a redux store so if you don't have a store in your application so you can use this api provider so in this course we are not going to follow this approach so we will be basically follow the traditional approach so basically we bring the provider from react readers library and we wrap our app component with the provider and we pass our restore to the app component so this api provider approach we are not going to use in this course now let's talk about the last one that is setup listener so it is a utility used to enable refresh on amount and research on reconnect behavior so overall with redux and redux toolkit we have to manage this piece of each state manually like setting is loading to true then make false once we get data from api same thing goes for other state as well like if you want to get data from back end then we have to set it manually and same thing goes for error part as well if you are having any issue with api then you have to set error state manually so all this manual stuff we don't have to do when we are working with rtk query because every piece of state is going to generate automatically by rtk query and this way also we have to write very less code so they have removed the concept of create slice which is used to manage state manually in reader toolkit so before we do project setup let's configure our food recipe api in admin website so make sure to create account and once you create account you will land on this page and in this we will be using free one and with free we will be able to make only 10 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 api so let's copy this api 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 key so let's store this information as well in notepad now we will start working on our project setup so to work on our recipe application we are going to use a redux typescript template so let's copy this command and i am going to paste in my terminal and i'm just going to change my app name here so it will be rtk recipe okay and let's hit enter so it will take around two to three minutes to set up our react project with reader typescript template so let's wait for the project setup so our project setup got completed over here so first let's go into this directory that is rtk recipe and before we do npm start we need to install one package for our project so in this project we are going to use material design booster 5 so let's copy this one and let's open this terminal i'm going to paste it here and let's hit enter so it will install the package so our package got installed so let's do npm start and i have already opened this project in my visual studio code so let's go to the vs code so you can see that the project is open in my vs code and we have some boilerplate code over here because we have created this project using redux typescript template so let's go to this package.json file as you can see that creating project with redux type script template we don't need to install redux 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 redux type script so guys now let's go to the browser first because our development server is running so we don't have any issue so let's see in the browser so we have got this content and this content basically is displaying from our app.tsx file so we have this content which is displaying on our browser and let's explore this two folder as well so we have got feature and app folder inside this we have store so we have got some basic configuration about store we have hooks here and we have one feature folder in which we have counter folder so this counter folder is not required so let's remove this entire folder first so the counter folder was not required so now let's go to the browser so now our application got break over here so we need to do some cleanup over here so let's go to the store.tss file so 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.tsx file and i'm going to remove our entire content we can give you like port recipe heading for now let's remove this one because we have deleted that entire folder logo is also not required we can also remove this react import statement let's save this file and let's go to the browser so now we don't have any issue in our application since we are 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 import statement and we can paste it over here okay so we can see the changes in our browser so let's go into the browser now you can see that we have got some different heading so that means we have successfully configured material design bootstrap in this project so now next thing we are going to do a folder structure so we are going to have some folder and files in this application so we are going to have one folder components in which we are going to have some files like model dot tsx spinner dot tsx and we are going to have one card component so i am just going to generate a snippet in each component otherwise we will get some error in browser because we are using typescript in this project so let's generate a snippet for this component as well after that let's delete this one features folder instead we are going to have services folder because we are going to create a endpoint and inside that we are going to have recipe api dot ts so let's configure rtk query in this project first so here we need to bring some api from our reader toolkit so from redux toolkit we need to go to the query react okay and we have to bring create api and fetch base query now i am going to paste my api key and app id that we have got from admin so this is the api key and app id that we have generated on our admin now we have to create an endpoint here so export call recipe api create api we have to define reducer path because we have to connect this recipe api to our store so we have to define a reducer path over here after that we have to define the base query of our admin api so we gonna use here fetch based query and we have to provide the base url so the base url will be like https api dot admin dot com after that we are going to have endpoint and we are going to write some builder pattern and here we are going to have get recipes builder dot mutation if you are a little bit aware of rtk query so this builder dot mutation we normally use for making post put or delete request but since here we have to get the recipe based on our search query and health so we have to write here 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 are going to receive query that is search query and health 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 phase based query okay let's paste it over here and we are going to receive this query from our component so we can use here query okay and health we are also going to receive from our component only so let's replace this one so let's format this one and this get recipe is going to expose a new hoop so what we can do over here so export call recipe api and this get recipe is going to expose a new hook so we can write over here so let's save this file and we have to do some small work in our store.tss file so here let's remove this one we don't need we need to import setup listener from our redux toolkit so from redux toolkit we need to go to list folder and query and we have to bring setup listener and now we are going to bring our recipe api from our service folder so let's go to the services and we have to bring a recipe api now we have to connect our reducer with this recipe api so recipe api dot reducer path recipe api dot reducer after that we have to also use middleware here so we are going to use default middleware so get default middleware get default middleware and we have to conquer the recipe api to our middleware let's format this one first and here we can remove this one okay and we can have setup listener store dot dispatch okay let's save this file so we have configured store 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 so let's verify whether rtk query is successfully configured or not so i am going to open reader dev tool and you can see that we are getting something in our redux dev tool so that means we have successfully configured rdk query in this react application so now we can start working on our food recipe application so first i am going to display the recipe in a card component so i'm going to start working on this app.tsx file so here we need to bring some hooks from our react so from react let's bring use effect and use state and we have to also bring the query that we have written under services folder so we need to go to the services and we need to bring that query so use get recipe mutation after that we need to bring some component from our material design bootstrap so from mdb react ui exit we need mdb row mdb input mdb btn mdb navbar mdb container mdb navbar brand okay after that we are going to define some piece of state okay so we are going to have a state or value so basically we are defining state our search input field over here and after that we have to put this value into a different state that is query use state and this will be empty this will also empty now we have to define the health so it is basically health category so it will be set health and by default we are going to basically display a vegan okay and we are going to have a state for our model as well so let's define and we are also going to have a state to display a single recipe in a model so we are going to use object so basically we are going to store that single recipe into a object so let's define here empty object now let's remove this one for now we don't need and here i'm just going to give some inline style and let's give here margin auto let's keep padding 15 pixels i am going to give here max width thousand pixel and align content it will be center now inside this div we are going to have mdb nav bar and this will be light and background color we can give light also then we are going to have mdb container and that will be fluid then we are going to have mdv nabar brand we can give your class name text center so this is the bootstrap class name i am giving over here after that we can have h5 tag with the class name f w hyphen bold empty hyphen 2 and i am going to use here emoji so i am going to use your burger hamburger after that food recipe apps so 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 navbar over here let's continue work on other part so after this nav bar we are going to have div the class name row g hyphen one align items center empty hyphen 2 and inside this div i am going to have input field okay and here let's give wrapper class that will be column auto label let's give search recipe let's keep type text after that we're gonna have value which we already defined then we're gonna have unchanged method so let's define that one as well so this is gonna receive event so e dot target dot value after this input field we are going to have one more div with the class name paul auto and we are going to have one button so mdbtn search okay and we will define on click method later so now we have to basically list out different different recipe in a card component so first we are going to use this query to get all the recipes so 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 gate recipe as well so here first we are going to bring that get recipes after that we are going to different different piece of state that is get generated by our rtk query so you can see that we have a different different state like each error is loading each success so all this different different state is going to generated by rtk query so that's the reason it's called powerful data switching tool so we need only is loading and data so inside this data it will contain our all recipe after this what we have to do so we have to define one use effect and this use effect will run whenever we are searching recipe or we are changing the health category so in both cases we have to run this query okay so i'm going to define one method here so get food recipe so let's define this method below this use effect so cost get food recipe and this will be a thing because we are going to perform asynchronous operation so you can see that in get recipe we are making the api request okay and here we have to also define one more thing that is method so here you have to specify get okay so let's specify method as well after this we can just do like await get recipes and we have to pass query and health in the form of object because we are receiving here in the form of object only so you have to pass this way okay 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 reader dev tool so you can see that our promise got fulfilled over here and here we got some recipe so you can see that inside data we have our all recipe so inside data you have to go to hits and inside heads 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 restructured data so we have to just target like this way data dot hits and inside heads we have our different different recipe so now in order to display the recipe we have to first work on our card component so let's start working on this card component then we will able to display our recipe so from mdb react ui kit we need to bring some component so from material design booster we need to bring mdb column mdb group not btn group mdb card group mdb card mdb card image and mdb card body okay after this we have to do some adjustment to this functional component because we are using typescript so we have to write this way react dot functional component and here we have to specify props function okay we will define this one outside this component and it's going to receive a prop recipe so whenever we pass a prop to a functional component in a type script 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 error so let's define this props 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 column mdb card body then i'm going to use mdb card and here i'm going to use bootstrap class name so it will be h i 100 empty hyphen 2 d hyphen sm flex okay then we are going to have mdb card image inside source i am going to specify the recipe image so recipe dot image in alternate we can specify label so recipe dot label position will be top style let's give here cursor pointer okay we're gonna have on click method so we will define this one later so for now let's remove this one and after this we gonna have mdb card body and here i'm going to use h5 tag with the class name fw hyphen bold and here we are going to have recipe dot label okay so let's format this one and here it will be mdb card group not card body so let's use here mdb card group let's save this file so you can see that in dev tool we have level image so we are using this property inside our cart component so let's minimize this one and i'm going to use this card component inside our app.tsx file so after this div we are going to have mdb row okay and i'm going to use here class name row calls one row calls hyphen md iphone 3 g hyphen 4 and we have to target hits as you can see that in redux dev tool so inside our heads we have our different different recipe so we have to target like this with data dot hits and i'm using here ternary expression so why i'm using this one because if you don't use this so you have to write like this way data dot heads then you will able to use data dot hits dot map okay so that's the reason i am using this ternary expression so data dot heads dot map and item any because we are using here typescript so we have to specify this one and let's use your card component that we have created so vs code automatically import the card component for me and here we have to specify 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 cart component okay now after that what we have to do so we have to implement first 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 are going to have one on click method handle search let's define this one outside return const handle search okay so here we can do set query we can pass the value and after clicking on search button we wanted to clear search input field so we can do like set value to empty now we can perform search functionality in our application so let's go into the browser and i'm going to search a recipe with the bread so let's type here bread and let's click on search so now you can see that we are able to fetch recipe based on the bread okay so search functionality is also implemented in this application now let's go back to vs code and i am going to use this is loading state as well so i am 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 is spinner that is mdb spinner and inside we are going to have one div with the class name text enter empty hyphen 5 and we are going to use here mdb spinner and here we are going to have span tag with the class name visually hidden okay and here i'm going to give loading with three dot and in mdb spinner we have to pass some prop that is grow class name let's give here empty hyphen two let's give some inline style width i am going to give here 3 ram i am going to give 3 ram let's format this one and we can remove this one we don't need let's use this component inside our app.tsx file and here we are bringing this is loading so what we can do so we can check if we have is loading true then in that case i wanted to show the spinner okay so vs code automatically import this spinner component for me now let's go into the browser let's refresh this one so now you can see that we have got a spinner on our application now next thing we are going to implement a drop down here so we are going to have one health 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 are 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 are not going to use a drop down component from material design bootstrap we are going to use normal html and we will style that one with css okay so here first we are going to have 1d with the class name call auto so it will be auto and inside that i am going to use select and we are going to have one class name category drop down and we are going to have one on change method that is handle click ok and we can pass your value health inside that we are going to have options then we are going to map this option that we have defined outside this that we have defined outside have function so let's use here option and index then let's use your option tag so here i'm going to use option dot label and let's use here value so option dot value or it will be empty let's give your key index let's save this one and let's define handle click outside this return call handle click and this will receive an event and we can set health like e dot target dot value okay after that we are going to index.css file so we have to specify the styling for this category drop down so i'm just going to paste the styling for that class name so this is styling i'm going to apply for our drop down so let's save this one and let's go into the browser now refresh this one so now you can see that our styling got applied on drop down so let's select again recipe bread here so now we are searching recipe related to bread and here let's select health category so i am going to select here low sugar so now this time we will get different result for recipe related to bread so you can see that we have got different result now based on our health category so this is also implemented in this react application so last thing we have to work on our model component so whenever you click on any card component so we are 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 component over here you can see that so in this model component first we need to bring some component from material design bootstrap so we need component like mdb model mdb model dialog mdb model content mdb model header then we need mdb btn as well mdb model body and mdb model footer okay let's format this one after this we have to define interface for the props that we are going to receive from our app component so let's define that one as well so toggle so we are going to receive then we are going to receive recipe so this is a function that why i have written like this way this is an object so you can give here any if you want it so any so so it will be boolean okay after this we have to modify this functional component because we are working with the typescript so it will be react dot fc and here we have to pass this props function okay sorry this props function and it's going to receive toggle so recipe show and set so now inside return we are going to have one fragment and here we are going to have mdb model here we are going to use so so once its true model will open okay and we have to also define a set so set so mdb model dialog then we are going to have mdb model content then we are going to have mdb model header then we have h5 tag with the class name f w hyphen bold so this will be level recipe level after this after this s5 tag we are going to have mdb btn okay so here i'm going to give class name btn hyphen close color none on click we are going to give here toggles so so after this header we are going to have mdb model body here i'm going to use image tag okay so source inside source we are going to have recipe dot image inside alternate we are going to have recipe dot level then we are going to have div with the class name empty iphone 2 then we are going to have h5 tag with the class name text start fw hyphen bold text hyphen muted and let's give one inline style that is float left okay inside s5 type we are going to have label like calories okay after that we are going to have again as 5 tag with the class name text hyphen starts and here we are going to show the calorie count so recipe dot calories and we can give the unit as well here so for calorie it will be case c a l after this h5 tag we are going to have ingredient so 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 or ingredient ingredient so ingredients basically contain in array so we are going to use map here so if you look at this dev tool so this is our full field okay so here inside mutation we have to go to this let's go to data let's go to it you will find ingredient for a specific recipe inside 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 recipe dot ingredient line dot map item it could be any then we are going to use your list with the class name text hyphen start and here we are going to have our item then after body we are going to have one footer so mdb model footer and inside footer we are going to have a close button so mdb btn close and here the color i am going to give secondary and on click we are going to use toggle so so we have to define this function in our parent component that is app.esx file so now let's work on the rest of the piece in our app.tsx file so here what we have to do so whenever you click on card so a model will pop up so outside return we have to define toggle so function okay and inside this i am going to pass the recipe okay and toggle so we can just do opposite whatever we have the state value of so and we can set here recipe whatever we are receiving so basically we are storing object okay and in object so this recipe object contain different different detail about particular recipe like image level ingredients okay so we are storing in an object you can see that we have defined this set recipe as a empty object so we are storing 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 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 and here on click what we can do so in on click we can use that toggle so and we can pass this recipe okay let's save this file and let's go to app.tsx file now once this so value got true then we have to open the model so after this mdb row we have to basically show that model component so if so is true then we have to display a model component so let's bring that model component that we have created so vs4 automatically import that component for me and here we have to pass props like show set so because this props we have already defined in our model component here it will be recipe and here we have to pass toggle so 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 that so we have built this food recipe app with the help of artik query in react so i am 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 so the first warning for now we can ignore and let's fix this second warning so i'm going into my vs code and here we can use key so key is equal to index let's save this file let's go to browser refresh this one now we are not seeing that warning related to our cart component and you can ignore this warning for now so let's close this one so we have successfully able to build this food recipe app with the help of artik query in today's video i hope you have learned some important concept related to artik query in this video so thank you so much guys for watching this video so i will see you in some other video till then good bye and take care

Channel: CodeWithVishal

Views: 3,677

Keywords: Recipe App using RTK Query, rtk query typescript, rtk query, rtk query redux toolkit, Build Food Recipe App using RTK Query in React, rtk query redux, Food Recipe App using RTK Query, redux typescript react, redux toolkit typescript react, react redux typescript app, react typescript project, react typescript redux, redux toolkit query, build app using rtk query, react redux rtk query

Id: 2LBzAYQ0ipA

Length: 55min 51sec (3351 seconds)

Published: Sat Apr 30 2022