Building a StackOverflow Clone: React Native Tutorial for Beginners

what's up node.js developers today is a special day today I'm coming at you with a huge project it's going to be a full stack overflow clone yeah full stack stack overflowing clone yeah that's exactly what we're gonna do today and we're gonna do that as a mobile application by using the real stack Overflow API so that you can have a browse Tech overflow right on your mobile phone it's going to be a great educational tutorial for you it's going to be fun and we're gonna cover both a front-end and the back-end integration so there is a lot of valuable content that I prepare for you today and also everything is beginner friendly and also step by step like I have all the steps that you need to follow in the guide I'm gonna provide you in a moment but first let's have a look at what exactly we're gonna do today so this tutorial exactly this video is going to be split into three parts firstly we're gonna build the user interface of stack overflow using rack native after that we're gonna convert the stack Overflow rest API to a graphql API using stepson and after that we're gonna query the graphql API from our application and by the end of this video you're gonna have a functional application that actually queries the data from stack Overflow displays it and you can search and navigate all the questions and answers there in a mobile application um so we're gonna build a couple of screens the home screen where you will be able to see the default questions and also you're going to be able to search and The Details page where you'll see more information about the question and also the answers to that question something very interesting here is the ability to render markdown and these are like code Snippets and actually images so this is something unique to this project and I believe you will enjoy it a lot so for that we're going to use react native Expo and Expo router because that's the best way to build cross-platform mobile applications and on the backhand side we're gonna use stepson and we're going to actually also use the stack Overflow rest API and Van creta very thin layer on top of that using stabzan which is going to allow us to create a graphql API and then we're going to query it inside our application this video is actually sponsored by stabzan so a big thank you to steps and for helping us create this tutorial and bring this one to everyone here on YouTube if you are not familiar with steps and we already did a couple of tutorials with them I enjoy working with steps and a lot because it helps us build graphql apis very easily with a couple of lines of code and every time our job as developers is simplify I really enjoy it because it saves us a lot of time so as I said um what exactly stepson is doing is it integrates with different backend building blocks for example you might have a SQL database or you might have a rest API or even a graphql API and with steps then you can connect them together and create a graphql layer on top of them so more details you're actually going to see by the end of this tutorial because we're gonna actually get out get our hands dirty and write and build this graphql API but for now you can create your free account and be ready until when we get there the link you can find in the description below and thank you again steps and for sponsoring a video so this is the plan for today I think we can get started and because we have quite a lot of things to do today so let's get started [Applause] [Music] hello everyone in the chat how are you doing guys I think I'm Overexposed right too much light maybe hello from India hello so um if you already feel that you're overwhelmed because we are using a lot of Technologies don't worry as I said this tutorial uh I do it with everyone in mind like it's going to be very helpful for people with already experience with react native with building mobile applications but at the same time it's going to be possible for beginners as well because I provide them step-by-step guide that you can actually find at nodejs.dev project stack Overflow and actually I'm gonna open it up somewhere here and basically we're gonna have here like all the steps for building the application some Snippets very important all the layouts that we'll have to build so it's going to be quite easy to to follow and if you if you get started from the process you're going to be able to compare with a code there to know where um you need to to fix something uh so the next step is of course download asset bundle where you'll find some dummy data that we will definitely need today because it's a lot of data so to get started before we implement the API we're going to use some damage I bet you can find in the description below and with that being said I think we are actually ready to get started so uh here I think I need the camera and if you open up the step-by-step guide here at the top is the guide for us to start working and start creating our Expo project open it up on the side I'm not gonna reference it too much but it actually contains everything as we are doing it but I really want to code everything together with you here and explain every single line so that everyone understands and can not only build this application and have it on your phone but actually understand what's happening there and why we are doing certain things so let's get started and let's go ahead and create a new project with Expo so I'm gonna zoom in a bit so you can see better I hope you do let's go ahead and go somewhere here and to create a new Expo project we are going to use to create a new extra project you don't need to have anything installed other than node.js and npm because having npm you also have this npx command and with that we can call npx create Expo Let Me Clear actually clear with that we can run npx create Expo up I also prefer to add the at latest to get the latest version of createx pop-up and here we need to provide the name of the application the name is going to be let's say stack Overflow and I also want to start not from scratch but I want to start with an example that already had the Expo router installed so the example is called with router and that will use a template that has Expo router install so it's going to save us a couple of minutes as well to install and set up everything let's wait until npm install solventy penises come on and while we're waiting this project to be installed I see a question but then can you tell us what are the criteria that lead you to choose Expo react native CLI basically nowadays the this question or decision is very simple like I always use the Expo and um a couple of years ago like I I said that a couple of times and I'm gonna repeat it again like a couple of years ago when you got started with react native right from the beginning you had to make a choice do you want to go with rack native CLI with bigger workflow or with the Expo uh and at that point in time going with Expo means that it's much easier to get started and you get the benefit of using some of the tools that export provide but at that point there were some limitations for example when you had to work with some native code or native packages nowadays Expo is at a completely different level and uh using config plugins we are able to use any kind of native code with expert projects so at this moment it's a no-brainer when you get started with rack native go ahead and start with Expo and you're gonna thank me later and by the way Expo is not sponsoring anything these are my pure opinions so um now that our project is ready let's go ahead and open it in Visual Studio code like this stack overflow if you don't have this one just simply open Visual Studio code and from this menu open and navigate to the project and you'll find it there so I'm gonna make it like this zoom in a bit as well so you can see and when we are in the visual studio code let's go ahead and open a terminal you can do this from the top new terminal or with the shortcut uh and from the terminal I want to start the development server the development server we can start with npm start and that will start the Metro bundler from where we can run our application on different devices the easiest way is to download the Expo go application from the market it's available both for Android and iOS and scan with secure code where if you have some emulators or simulators run it locally so that's what I'm gonna do I'm gonna press I to run it on iOS and here we should have just for you to be able to see like what I'm coding here hello from Gabon thank you for your answer you're welcome you always come up with big projects and clone Projects please do some small projects like recipe app fitness app or weather app please do small projects too uh yeah like uh it's always like I want to do the biggest house because that's actually what you guys enjoy like I'm pretty sure you can find a lot of rack native Weber application or to do applications out there but what differentiates but not just Dev channel is UM depth and the scale of a project that we are building and yeah but thank you for the advice maybe we can do some easy projects as well back to our project uh our application when is running on our device we see the welcome screen the welcome screen initially says that hey press on this button to get started because at the moment as you can see we do not have the up directory so if I press this button that automatically creates our app directory and in export router all the files that are inside the app directory they will be mapped to screens So This Is A New Concept this is a file based navigation system and if you don't have experience with expert router it's going to be interesting for you to learn and to see how easy it is to manage the navigation stack but the only thing is that remember everything that is inside app directory this is a screen in our application it is managed automatically we're going to see a bit later how we can create new screens but yeah for her for now like for the rest of the code that we're gonna write like components and Snippets and dominate and so on we should not put it inside our app directory for that I would like to create them as a receipt directory where we will work and put all our source code for example here we can also write components uh perfect um before we get started actually let's bring in the dummy data that we will need that we will depend on so for that uh download the asset bundle that you can find in the description below open it up unzip it and let me also find it so here is the asset bundle and it will contain that data folder so just drag and drop it in the root directory copy folder add folder let's copy folder so now copying the folder we have a new director in the root of our project with dummy data and here I have provided you two Json files one for questions like can't run migration with migration run have a react native Expo project and so on and one with answers it's an array of answers you're going to see that this is quite similar to what stack Overflow is is answering basically I downloaded that those files to make it much easier for us to get started Okay so speaking about Expo router I'm not sure if I want to to show you at this moment but whenever we have to like every file here in our app directory is going to be a page for example if I create here a new file like home that's going to be a new page when we navigate to the slash home whenever we have to write some code that is needed in all the screens this is basically called like layout code for example if we have some some components that are being shared between two screens let's say a tab navigator that should be visible when navigating between the two screens so basically stuff related to the navigation this is layout and in export router to do that what we have to do is create a new file here in our app directory called underscore layout.js and here let's Define the function root layout layout layout come on lay out this is going to be an arrow function that will return it will return what I want to do here is to display a stack Navigator because I want the header there so let's import stack from Expo router and simply render the stack here we'll add them come on stack and let's close it right away and Advance export default root layout just by doing that we already see the header here so we found this stack here we didn't see them the header so I needed that header that's why we have a stack that added them header with the name of our page index at the Top If you want to adjust the name of a page what we can do is we can open up this stack and because expert router behind the scenes is using rack navigation we can adjust the options and configuration of our stack dot screen in a similar way of how we were doing it in react navigation the name that we want to Target is this index file so we should say index and the options I want to change the title so inside the options I'm going to provide title I don't know home screen or stack Overflow something like that yeah home is nice I'm gonna add this I'm not sure like if you have this error like with red warnings but yeah for me I have it and what I have to do is to create this Json config file this is actually optional like it's just to get rid of that red squiggly line and for GSX I provided react GSX that's it now should go away yeah perfect okay so we have a stack screen we have we see it on the top and we are ready to get started let's open up index.js and here is where we're gonna write the next code for our home page let's have a look at what is going to be the first component but we have to uh to create and for that I'm going to open the the guide from the website so after creating the layout what we have to do is we have to start rendering one question when I build react native applications uh it's easy really easy when you think in terms of reusable and reusable components basically when you look at one page think about what components will you will need there what building blocks you'll need and by building your user interface this way it's going to be much more easier to put everything together because you're going to have to work with only small pieces of code only small components and then as as um yeah like a puzzle you're going to put everything together to to see what you have to to have like a proper user interface so if you look at them actually stack Overflow let's open it not staging but stack overflow if we look at the stack Overflow here maybe we can I don't know let's search for react native and let's put it in the phone view like this so when we look here we see a lot of text but if we focus our attention on only one question and if we have developed that component first it's going to be much easier to create this home screen so I had um a screenshot here and let's go ahead and start developing this component okay so I'm gonna right away create a new component inside the source component called question list item dot GS and here let's define that question list item component which is a function that returns some jsx what we have to do is to make sure to export default question list item and here we can start by rendering a text like hello just to see that it's there uh let's make sure to import this text component from react native should I zoom in a bit more so far yeah I can do it so make sure to import text from react native render the hello here and let's go back to our application index and instead of rendering all of this hello world let's delete this View let's leave only the container and inside this container let's go ahead and import our question list item from one director above Source components question list item and in order to render it we do it as we would render like default Rec native component like a view so angle bracket question list item and then we can self close it right here and what we see on the screen is the hello there and we can also display multiple questions question list items on the screen perfect let's clean a bit V Styles because we removed some of these uh components from our page and we only have the cells for the container so we don't need this title subtitle in Main and for the container itself I also would like to give some background color white I don't think we need that much padding so around 10 padding will be enough and I also don't think we will need to align the items in the center so let's delete align item Center to have our items start from the left okay now let's move to our source component question list item and start developing we have a question list item I'll go ahead and actually import some data so that we start working right away with data instead of writing a lot of stuff ourselves so remember we imported this dummy data folder in our root folder and here we have information about questions let's go ahead and import these Json of questions in our question list item so import questions from One Directory up we go into the source another director app we go into the root then we go into the data and then we go into the questions like this and let's the question is an object with items which is an array of a lot of questions let's go ahead and grab the first question from here by accessing item set position one so question equal to questions dot items at position zero actually sorry array starts at zero right so now if instead of this hello I'm gonna write them curly brackets in order to be able to access the JavaScript variable and if I'm gonna write question Dot let's see what do we have here title yes question dot title we see already can't run migration with migration through and if I change the number here it's going to be an hour title so that's already good we have access to the data that we have to display I think the first step is going to be just to to ignore the styles for a bit and just see what information do we have so if we think about the structure of our question the quality of this screenshot is so low if we think about the structure what we see is at the top we have a line with some statistics about the question number of votes answers and Views when we have a title then we have the body some tags and finally the date so let's go ahead and display them just simply on the screen just for us to have them so let's go here and what do we need because we're going to have a lot of things let's put everything inside a view and here we're gonna start with a title but actually the first thing is not the title the first thing is them line with stats so the text will be I don't know let's say one vote then we have two answers and 66 views we need to make sure to import view from react native like this and yeah we see them at the top in order to render this dot in between the the texts what you can do is simply Google uh dot in the middle symbol and that's actually like a a character but you can simply copy and paste in your code like this and you will simply have that dot without having to do any kind of styles or weird hacks okay but all of these are static text like the numbers themselves are hard coded what I want is to actually take it from the question if we look at the question we have this data we have um The View count we have yeah like the view count let's start with a view count and it's this one the last one so instead of 66 let's go ahead and delete it replace it with curly brackets and let's access question dynamically question Dot View underscore count to render specifically from that item and if I will change here we see that the number of views actually changes and is coming from the data that's the same for the answer so it's question Dot answer account and for the votes that's going to be a question DOT score I think there is square yeah the square so zero vote zero answer is seven views perfect one thing to to to to mention here is my editor automatically added this this syntax like basically by creating this curly bracket portal it added an empty space because we found this if the text is moved to a new line there will be no space between this number and this dot on your user interface even if you put it in then save it automatically deletes it from here so that's why we in this case is to add a space you can do it like through JavaScript like this okay perfect [Music] um so the next step is our title uh then what do we have when we have the body so after the title let's go ahead and render the body and we're gonna do this by accessing question Dot I think it's bodied underscore markdown body markdown yes but as you can see that's a lot of text in stack Overflow we are interested only in the beginning like only in a couple of lines so if you want to limit how many how much tax do you want to render you can specify the number of lines to the text here and let's specify two and in this case I only render two lines for our body okay perfect what's next okay next we have a next we have the text tags and them um time before we actually get into the tags that's going to involve like dynamically looping and rendering for for this data um let's actually stop for a moment add a bit of style here and then move move to the next step so to style in Rec native what we need is the style sheet from react native we can actually style them in line so we can provide Styles here like I don't know background color pink but it's a device it's recommended to separate your rendering logic from your styling Logic for that reason what we're gonna do is below we're gonna Define the Styles object that we can create using style sheet and inside this style sheet let's go ahead and create some some Styles here we need to provide the stance for what for for our main container so container it's going to be the the view of it contains everything then we have the stats for our let me just make sure that I use the same names so that you you can reuse them from from the guide so this text is going to be the stats then we have a title and then we have the body so now here for the style what we can do is we can send the Styles dot container to this View and everything that we're gonna provide here like a background color pink is going to be assigned as a styles of this View so let's move on to assign all the styles that we have created so this one is Styles dot stunts uh this one is tiles dot title and this one is tiles dot body okay so starting with the title uh the first step is I want to increase um the title on stack Overflow is some kind of uh blue so let's change the color of this title so the color is going to be I have actually got the color here so it's zero zero six three b f okay do we need to make it like more bold maybe I can zoom in a bit like make this bigger just for you to see better like what we have there what do you say this is better I think so um I also want to decrease a bit the font size of our stance because it's a bit smaller than it should be a bit smaller than the title so font size of 12 should be better I'll delete the background pink from the container and I will only add probably some spacing inside this container like padding 10 yes and to separate multiple questions from each other let's add a border on the bottom of each question so border bottom with can be 0.5 and Border color can be light Gray and that will add this border on the bottom and when we have multiple questions it's going to be easier to separate between them uh okay so um yeah like if we look at this one if we look here we see that the body is actually the smallest text on this screen so for the body let's decrease the font size to over 12 or even lower like to 11 and for that color we can use a dim gray like something that just barely is visible just not to get a lot of attention from the user so that's much better and what else what else should we add some margin for our title in order to give him some room to breathe we can do that by marching vertical five and this will add on top and on the bottom and I think we are good yes it's already looking uh pretty but we are just getting started because as I said we still have to implement that tags the list of tags if we look in our data question here the text is an array of strings so what we have to do is to dynamically Loop through this array and render these tags as separate tags on this screen so how do we do that well let's go ahead and below this body let's start by looping through all of the tags to do that we're going to open this um the portal the curly bracket and let's access the tags the array of tags so questions dot question dot tags and what we can do next is by mapping from a string to a GSX component we can render something on the screen for every single item in our array so to do that we're going to use the DOT map function without map function expects M callback function that will receive that each item individually so here we're gonna receive a tag and what we should return back is something to render on the screen for example a text with that tag itself so if I'm going to do that you already see free tags on the screen react native exponent type or RAM and if you change them question here is going to be even more okay let's go ahead and start um at this moment I'm not sure why we do not see the error no actually we see the error so at the moment track native is complaining that each child in a list should have a unique key so what does that mean that means that we are dynamically rendering a list of of components in this by mapping through all of our tags but we are not assigning some unique IDs to these components and what we can do is to provide the key property of our text of the first component inside our map and let's provide a unique key that will identify this component what it can be usually it's the ID of a thing but because these are simply strings we can actually use that tag itself as the key and now react native will know better like how to re-render these components because it will identify them them by this unique key okay perfect now let's go ahead and add the style here for our Styles dot tag and because I want to put all of these tags in the same line I will have to encapsulate them inside the view so let's create this view around our list of tags can do here thanks and let's give this view as tiles.tags now let's define the Styles below tags and our tag for the tags what do I want for the tags I want to render them in the same line to do that I'm gonna provide Flex Direction row and that will render all the children basic lord of the tanks in the same row as we can see there are a lot of them they will move out of a screen so what we can do is we can specify the flex rub to say hey if you are do not if the items do not fit on the same line rub from a new line and display even there so that's what we see flat list wrapped from a new line um and taking advantage of a new style property in react native the flex Gap property we can easily add spacing between our items by providing the Gap property here like Gap 5 We'll add five pixels between horizontally and vertically and to understand to see that better we can add a background background color to the tag for example red and here we see the 5 pixels without it everything is going to be close together let's change the background color from red to the actual background color that stack Overflow is using so it's E1 EC F4 and for the text color it's going to be 3973 9 d okay that looks like stack overflow um let's continue adding some more styles for example for this tag we need some padding inside it because the text is really cramped there so let's add some padding like five let's make the borders a bit round so border radius free will be enough uh but because it's a text view like what we are doing here is not a view but it's a text simply adding report the radius 3 will not change anything even if you add here 20 nothing will change because you have to also specify that you want the Overflow of this component to be hidden and only that is going to take effect so let's go back to free here and it's slightly rounded corners and let's also declare decrease the font size from from the default 14 to 12 yes perfect and I think I will have to add some spacing on the top so for the text container let's add margin top should be 10 so now it looks better and if I change the question yes it looks perfect okay so the last thing from this component is displaying the time here when it was asked so what we can do here is we can let's after review of with tags let's render here a text with the text asked and the question dot if we look here there is the property creation date question dot creation date that would say like ask that this timestamp this is the date in the format as a timestamp and what we can do is we can create a date value out of this creation date like this new date and we have to actually get the string value so but not the actual string value but yeah like two date string so what does that say it says Tuesday January 20 1970. that doesn't look like a right date when the migration was when someone had issues with migration but usually the problem is that timestamps are sometimes specified specified as seconds sometimes as milliseconds and I think that this creation date is in seconds and the date expects milliseconds so we can simply multiply by 1000 and this is Wednesday May 31 2023 this looks much more realistic um if you look in them in the design here you'll see that in cases that there is enough space I don't see it here but in cases there is enough space the date will actually be on the same line with the text actually you can see here on the screenshot so for that reason let's move this text inside our view after we render all the tags that's what we're gonna see and if I'm going to change this to one it's going to be there but we are we want to to align it to the right so let's add the style property here Styles dot time and let's style this time a bit so in order to render it all the way to the right we can use a little trick from flexbox by assigning margin on the opposite side margin left Auto and what that will do it will put as the maximum amount of margin on the left side of this component and this way it will push it all the way to the um to the right let's also decrease the font size to 12 and the color should be something like dim Gray yeah looks good now it's a bit not centered horizontally with our tags so if we add here to the text property one more align items center now this text will be perfectly aligned I'm not sure if you can see it but it's perfectly aligned with our values here yes now you can see it better you lose weight man that's the first comment I see when when I look into the comment chat thank you very much yeah I'm not sure when was the last time you used you watched the videos but if you are talking like from compared with one year ago yeah definitely okay so we have done a lot of stuff now to be honest like we are done with rendering one question so it's a lot of text it's a lot of styling but I hope you understand all the way and all the stuff that we talk in order to render this simple question list item on the screen so I think what I'm gonna do is I'm going to commit this in order for you if you are familiar with Git to be able to later watch through through this commits and to get commit to to be able to see exactly like what we've done at every single step in this application so this is question list item did I add everything yep perfect okay so guys now that we have this question list item and we are able to render it from our application like this the next step is to send data to this component because at the moment if we want to render two questions one on top of each other we will both render the same question because the data is managed inside this component whenever we have to send data from a parent component to a child component that's where we are using props so first of all in our index.js from our application basically on our page here is where we will need the data so let's get the questions from One Directory up data questions and let's go ahead and send through the props similar to how we are sending style property to the view let's send here a new property called question and the data of that property is going to be is going to come from this question dot items at position zero for example and for the second one let's go ahead and send the same but the data is going to be coming from the position one of items so this is how we are sending properties to a component now on the component side to receive that question like we're not going to need these import questions and questions anymore because we're going to receive it for properties and to do that what we how it's happening the properties are the first and only argument of our functional component so we are here props and this props is an object that contains Fields with these names that we provided so if we provided here a name question what we can do we can access props dot for example props dot question an easy way to get the question out of the props in the same line is to destructure it from here doing this and now as you can see the first one rendered the first question and the second one renders a completely different one and this way from our index from our parent component we are able to send different data to our to our child component and they will render it what that allows us to do is to render all the questions that we have in our data not only manually rendering two of them we already saw a way to render a list of things using a mapping like this but whenever you have like a more complex scenario like rendering rendering fully like full page lists where you need some additional functionalities like basically whenever you have an uh infinite infinite list or a list that is quite huge in that case you can use the flat list from react native and I'm going to comment all these two components because instead of them we're gonna use a flat list so flat list expects to require properties the first one is the data but we need to to render and this data should be an array of items so what is the array of items it's our questions dot items and it also expects a render item function that where we have to specify how do we want to render every single item from this array of data so the render item is an a function so let's define the function it will receive an object that contains the item that we want to render and that item will be one of these items from that array if I open the data questions so it's going to be the first time it renders this one then it's going to be the second one and so on so basically write them is one question so for every question what we have to do is to render this component like this question list item and for the question we're gonna send not this data but the item that we are rendering and this way as you can see we have a scrollable list of questions I think we can remove a padding from the page itself yes and we can scroll through this list and all of this data is coming from our dummy data here as you can see so that's how simple it is to put everything together a list of data a component we put together with a flat list and we have a functional scrollable list of information in our application I think we can also disable this scroll indicator here on the left on the right I'm not sure if we need it but you can do that with show vertical scroll indicator false and that will hide it from the left perfect from the right sorry so that's our homepage finished we have everything that we need here on the home page in the next step we're gonna start working on the next page which is going to be the details page so before we do that let's make sure to add everything um let's say home page flat list of questions perfect so guys how are you doing uh I was so focused like to deliver because we I plan so much for today and I really want to um to provide a very seamless experience for you to to watch and build especially for people that are watching afterwards guys if you enjoy this video and everyone actually if you enjoy this video make sure to subscribe to my channel and become part of our one percent club and you might ask what is the one percent Club volume they want to know what's the one percent Club give me just one second I'm gonna show you this is the one percent Club in the last month uh in the last 28 days we got 98 of watch hours from no non-subscribers so that means that 98 of you watching right now are not yet subscribed so make sure to subscribe to my channel and write down in the comments with your part of a one percent Club and I'll be very happy if you do that it's helping us a lot to reach more Developers uh where is my page here it is Expo with web if you are interested on on that with Expo router you not only build the application for Android iOS but it's also available for web out of the box so if I go back to our bundler and if I press W this will open our application in the web browser let's see how it looks actually you are in the two percent no it's actually one percent and we we looked for the most recent data and it's actually less than one percent it's 0.9 percent so as you can see our react native application is working in the web browser as well it's very zoomed in but as you can see it's working we can scroll everything is working in web browser how cool is that we're going to test it for them building it maybe in the browser more okay let me see some comments do you have any feedback on Heroku services for deploying back and rest apis um we can we can do some tutorials about that if you're interested guys um someone is asking about protected routes in Expo router we actually have implemented that in our Twitter application so if you check our latest project where we integrate the backend with the front end in that video we show how to do protected routes in explore router are you going to do mutations for this tutorial I only plan queries because I want you to get to to be easier for you to get started because for queries you don't need an API keys and to run mutations basically to create new questions were to submit answers you would need to implement authentication and you need to register the application with stack Overflow but if you're interested maybe we can do something in future can we develop a whole application on stack I'm pretty sure you can so give it a try and let me know how it works yeah I don't like everything is possible with snack okay guys so where are we at we have created we rendered one question list item we render all the questions inside a flat list what else um I think we can skip the search input for for now or if you're interested on how to add a search input in our native stack just follow this guide on uh on the on our website it's quite simple you have to add this layout effect inside your page and it will add them when I actually yeah let me just no no if we need that we're gonna get back and do it uh the next step next step is the question Details page so question Details page here I'm gonna explain a bit how expiratory is working so for the question Details page whenever we press on one of these questions we want to open the question Details page so that's going to be a new page as I said in the beginning in export router all the files inside our application directory they become screens where mapped to screens so to create the question Details page all we have to do is basically create a new file here like details.gs and Export something basically render something the question details page and let's export it from here from the mobile outside it's going to be a bit harder to navigate to this page but if we run it on the but we're gonna get there this is just for for me to demonstrate you how everything is put together so you can for five minutes you can just watch even last three minutes so let's open this project in browser because it's going to be much easier to navigate to that page all we have to do is to change the route of in our browser to slash details because that's details did I write it correctly it says that much not found yeah because I wrote it incorrectly but if I go to the details that automatically renders our screen with details and if I do here hello world we see Hello World on this page so what does that mean it means that yeah it proves a point you can understand visually you create you simply create files in our app directory and they are mapped to urls which can be which for and to that URL to that Pages we can navigate by using the Slash and the name of a component if you would have like directories you would have to put the slash directory slash directory slash file for example because it's in our root folder it's simply a page adverb slash details now how do we navigate in our application to this page for that yeah export router as you see is working based on URLs very similar to how navigation works on the web so for that we have a link component that we can use so for example if I open source question list items we can as the first as the first component inside our view let's add a new link open that will navigate yeah let's import this link from Expo router and let's use href wear to the slash details so now if I press on this open it redirects automatically to The Details page and I can go back and open a different one the thing is that we want to open the details page not only when we press on this text input text thing but on the whole component so a link automatically renders the child's as a text so if we would put if we would drop everything inside this link and actually that's what you should do let's wrap all our view inside this link if we press wow it works wait a second I think explore router updated this because yeah uh previously you had to take a couple of more steps and I gave them a feedback that it would be really nice to manage all of those details automatically so as we can see right now it actually navigate automatically if it doesn't work for you what you have to do or what you had to do in the past so I'm just gonna show you in order to make sure that for everyone it's working so we had to transform our child View from A View to a pressable because it needs a component with onpress events and for the link we need to provide that as child property in order to make sure that it passes the own press to this child component so now it works again but as I see for me I don't have to do that so I can simply go back because it's much easier less properties less code and it still works right let's see if on web it's working as well so let's go to the home page if I press it redirects perfect so that's how we navigate to a different screen the next question is that on this details screen we would need to render question with ID but what id where do we get ID from well if you look at for example Twitter or even stack overflow if I open this page here what you will see is that the idea of a question I'm pretty sure it's very small and you can see but if you do it as well I go to a page of stack Overflow question you'll see that the ideal of the question is actually inside the URL so it's part of our path so can we do that in explorator as well for example if we would go not to the details but to the actual ID so for example one two three can we parse this string as the ID yes we can do that using Dynamic routes so if instead of a static string details for our file name if instead of that we provide a variable inside square bracket like ID then this one two three will be parsed as the ID of the screen of the page that we navigate to how do we aim yeah like on one hand we need to make sure that we navigate there so in the components question list item instead of redirecting to the details we need to redirect the question.id so let's wrap this basically let's I know we can do plus question dot ID or easier would be with template string slash and then that question dot ID like this so slash question ID whenever we redirect there okay but how do we get this ID inside our page to do that we have a hook called use search params and using this hook we get the ID using the name that we specified here in the file name so here is by D so we can get by D from use search params let's go ahead and render it on the screen just to double check if it's ID if it's correct now it's undefined but if I do it again it's still undefined why on the web does it work yeah on the web if it's one two three it's one two three and if it's hello here in the path it's going to be hello here so what's up with our oh because it's not question.id if you look in the dummy data the question has question ID so instead of using question dot question ID it should be question dot question underscore ID and now yes now it actually sends the idea there so that's perfect because using that ID in the next screen what we can do is we can basically in the next step when we will implement the API we're gonna query the API using that ID for now what we can do is probably get all the questions from our dummy data data questions and let's look for a question in that array by doing questions dot find and for every question we're gonna look if the question dot question underscore ID is equal to ID this is the double sign operator because if you put triple sign it's not going to work because this ID is a string but this ID is a integer so we need double equal sign to compare them without with strict rules around the types so having this question let's do if we didn't find the question make sure to stop here by returning something let's return a text question not found so undefined is not a function oh question the final questions dot items DOT fine because that's very okay but if it finds we can say here I don't know question dot title can run migrations if we have click on valver one it's exactly the one that we are clicking on so now based on the dynamic ID that we get from the path we get ready and we are finding this question in our array again if you get into this question not found make sure you have two equal signs here not three okay um now instead of actually developing all the UI for The Details page because if we look at the stack overflow I think we would be able to somehow reuse some of the components that we developed previously um and by adjusting just a little bit of styles maybe we can we can save some time so let's go ahead and let's duplicate the question list item component by copying it and pasting it and let's call it question a header header let's open the question header and make sure to rename the file to to the component to question header just not to be confusing it's still gonna work but it can be confusing and scroll down at the end where you export it as well rename it now that we have this question header let's go to the application id.js and instead of rendering this view here let's render that question header question header and let's send the actual question that we want to render make sure to import it here at the top from The Source components and now if I'm gonna press on this we see that it renders a question I think I'm gonna encapsulate it into a view because I want to make the come on if it's like this it needs brackets because I want to add some background color white just for the whole page to be white what's happening yeah this and also Flex one to make sure that the page expands all the way to the bottom okay so we have something there let's go ahead and adjust a bit the Styles here uh what I want to do is um I will change a bit the um I'll change a bit the word there of our title I want the title to come first inside before we start like this um the title will have some let me let me remember what we had to do here so we have a first title then the stats then what we have a separator yeah we added a separator between them between the studs and the actual body we added a separator so let's go ahead and add a view that closes automatically with a style Styles dot separator let's open up a page and for that separator we can specify that it has a border bottom with 0.5 and a border color light gray and virtual database border between the separator between the body and the the start and we can add margin vertical I don't know five or ten even to have a spacing perfect um on the details page the color of a title is not going to be blue but it's going to be what's going to be the title color it's this grayish freebie 4045 and also it's a much larger font size so let's increase it to 20. something like this uh okay so the title anything else yeah I think also font weight is kind of a bold so 500 will increase the font weight and maybe if you want to make sure that there is more space between the lines themselves you can increase the line height to a 28. yeah that will give more space to breathe some margin vertical we already have okay for the body uh first of all the body in this situation should not be a clipped so we should remove a number of lines from the body because we want to render the whole body like this at the moment it's not scrollable but don't worry because instead of making a scrollable now in The Next Step you're gonna see what we'll have to do and it will automatically become scrollable so let's just go ahead and in the body maybe remove a color dim gray or even change it to a different color remove a font the font size because we want it by default and but even the color like like this it should be okay and that's everything that we need there right yeah okay if we forgot something we can come back and add them later everything is still like looking weird because we still have to do some processing on the text we need to render the markdown but that's coming just in a bit do you still win in your Web projects yes I use Tailwind for our not just Dev project website uh and yeah I pretty much love it and have you tried native win for a native projects no I haven't tried native wind all right all right so this is our question header what we have to do next on the details page of a question what you're actually interested usually is not the question itself but the answers that you see below so let's go ahead and start rendering some of these answers so for that inside our Details page up underscore ID should I commit everything question detailed page yeah like this so as I was saying the next step is to start rendering our answers so let's go ahead and actually create our component for our answer component and we're going to start from scratch so new file answer dot ask for list item dot GS and here let's do a Rec native function export this is a plugin that I have for react native Snippets if you're interested that helps me just create a boilerplate component and having visa for the list item what we have to do is inside our application Details page we have to render these answers how we're gonna do that well we we have the data about answers in a Json file so again this is an object with items with multiple answers from stack overflow and we have to render them in a flat list so first of all let's import the answers from data answers and a flat list from rack native flat list um for a moment let's comment out this return statement just to focus on the answers here without having this question header so I'm gonna comment it out and Below let's go ahead and render uh flat list with data our answers come on and swears and with render item let's define a function bet for every answer for basically every item there will render a answer list item with this data answer equal item so now if we go here we don't see anything because again we have to access the data as answers.items it should be an array make sure it's an array so right away we see a list of answer list items for this item because that's what we are rendering here I will actually bring the view that provides tasks for our page back to this flat list encapsulated with that view like this and now the background is white okay um let's go ahead and implement the rendering logic of our answer list item first of all we will receive a date about our answer here in the props answer and we can access for example answer dot body markdown and it will render the actual answer here it's a lot of information for these answers but it will look much better and it will be much more readable when we actually parse this markdown I'm thinking should we actually implement this component or do you want us to get it from the website because we have here the this is what we have to render a component with two columns on the left we have some icons the score here we have them the information on below the answered Monday I think it if we implement it like together it's going to become a bit repetitive because again it's quite similar to how we render the question only difference like yeah like we have something on the left so I recommend just let's go ahead and grab this component from here and see basically how we can put everything together so let's copy the answer list item from our guide and let's bring it to our answer list item here so if I paste it let's hope that it will work yes it actually works and we saved quite a lot of time perfect now as you can see we have a list of answers so what's interesting here like we have the container and we have two columns the first one is the left column that contains the information about the score and some icons and the check mark if I ask for is accepted so we can understand which answer is actually accepted then the sibling is an overview that renders the body and the time and after that like Styles so you can look more in depth into what we have here okay so we have answers here let's go back to our Details page in our app id.js and let's put everything together like the question header and the flat list because at the moment if we go to The Details page we only see the answers we also want to save a question header so if we copy this component and render it before the flat list that's what you would expect to to do like first is the question header and after that is your flat list well that's not gonna happen because we're flat list like first of all the question header is going to be rendered and everything else is going to be left for the flat list but the problem is that there is no more space on the screen for that so instead of that what we want to actually do is then the question header to be part of a flat list and whenever we scroll the flat list the question header to also be scrollable so for that we can provide to the flat list at least header component and here it's going to be a function that renders our question header and in this situation the question header now is part of a flat list and when we scroll the question header it Scrolls basically the flat list of answers so if we scroll we get to these answers here uh I'll find maybe something with less code no everything is with a lot of code boy so yeah now we have implemented our Details page of our uh question that also renders answers so let's go ahead and do git add git commit answers flat list and we can move on to the next step oh and the next step will actually I was excited about this one because it will make our uh our UI look better at the moment as you can see like all of his body is not exactly how they come on it's not exactly how they look on stack Overflow if we look at stack Overflow like there are links their code Snippets they are maybe even block codes and so on so all of this data is actually marked down markdown format if you're not familiar with markdown that's basically the format that you would write the readme file for your project for example readme here this is markdown and that's like what you use for GitHub to add some styles to your text files so for example the if a line starts with one how is this symbol called Diaz for me it's Diaz yes sorry if it starts with a hashtag that will be transformed to a header to a header one if it starts with two that's going to be header two this is a link for us and so on so you don't need to actually understand like every piece of the markdown if you don't already because we are just going to use a library to help us parse all of this is asking are you guys part of a one percent subscribers gang or not make sure to hit the red button below pretty sure it's red for you and become part of a one percent let's see let's see the power of our community foreign are we going to use API or database we're going to use the stack Overflow API so yeah it's going to be fun it's going to be actually real data from stack overflow you're going to be able to use this application in day-to-day to to look and search for stack overflow what's the difference between a self-closing view and a normal one so basically if you need inside the view to have children for example if that view is kind of a container that contains like some text and so on that should be a normal view with a closing and opening tag and inside it you put like the children however if you're using a view only for rendering for example lab a DOT or a black Square basically it only needs for some styling purposes that you're gonna adjust like with Styles like giving it a width a height and so on but it doesn't have to have anything inside in that case you can use a self-closing view because yeah it doesn't need children but at the same time you can use a opening and closing one without anything inside that's also gonna work so that's why I use a self-closing tag for this divider thing because it's a view that only needs to um to render this border color it doesn't have to have any children inside it so that's why is it free to subscribe to the YouTube channel I don't know check it out if you are asking if it's free like the stack Overflow API yep it's public it's free and you don't even have to register like everything is just just Square it and that's it okay so as I was saying the next step for us is to parse markdown actually there is one very small step before that and here I'm talking about for example here what's going on here in this title it says some digits but it looks like a can't run migration with migration run through so the data of a text that we see here is HTML encoded so all them all the special characters like apostrophe like double quotes single quotes where less than and greater than symbol all of them will be encoded with a HTML encoder so to make it safe for the web but for us like our platform does not decode them automatically so what we have to do let's go ahead and install a library called HTML entities that will help us decode this text and actually render the normal text I'm sorry for that um so let's open the terminal clear let's do npm install it's called HTML entities and let's press enter HTML entities you can also get the command copy paste from the docs from the step-by-step guide okay everything is installed now what we have to do every time we are using these data basically if we look in the question where we are using the title where we're using the body mark down and the same is for the answer for the body markdown we have to decode it so that's going to be in the source let's start with on the home screen we have this question list item so let's start with here to decode it we're going to import decode from HTML entities and where we're rendering the title you can search here question.title just wrap it into the decode function and that should fix this problem here with can't run and now we see the apostrophe that can't run properly and the same for other parts as well okay and we can do the same with the body here body underscore markdown so we have questioned by the markdown let's decode this as well so two places in our question list items then moving on to the details page like when we press on this the title still shows with can't with these weird characters that's our question header and here we have to also import the code and for the title decode the title and also decode the body here by the markdown again two places to decode now the title is fixed can't run and the body is also uh not displaying those weird characters okay and the last step is in our answer list item here let's go ahead and import the code from HTML entities and we only have a body markdown in this file we only have to write it once and now the answers will also be decoded perfect so vento is the first step of parsing and working with this data that we receive from uh from stack Overflow the next one is going to be actually related to the markdown so I explained already what markdown is if you look at the answers for example or questions you see that this is actually marked down like I'm not sure question by the markdown is of markdown type so I was looking for some libraries for the rec native markdown and it's pretty depressing the situation is pretty depressing there I found this track native markdown display that has the most downloads it has 35k weekly downloads but the problem is that it's quite outdated in the last uh publish was three years ago I was looking for something else and I couldn't find a proper package like Rec native markdown package this one has less downloads it was published 10 months ago it's a bit more recent so you can maybe look into this one but yeah like what I'm gonna do is I'm gonna use this Rec native markdown display because it does its job like I was trying to adjust some of the stuff it was a bit buggy so if you find a better solution to parse markdown feel free to use that if not let's go ahead and install this package let's copy the install command and let's open the terminal and say npm install uh react native markdown display let's press enter I think it yeah it has some it depends on react version 16. now we are using drag version 18. so we have to just provide this Legacy slash Legacy pure dependencies depths to override it and just say like hey we trust that it's going to work and yeah now it's installed now let's go ahead and open our our what our question header because where we have to parse it on the home screen we don't have to parse this markdown I think it looks okay however on the details page here here is where we have to parse it to properly render them question body this one question body so let's have a look at the documentation if I have one I think we had one a couple of minutes ago I'm not sure where it disappeared but yeah we have to import the markdown yeah it's pretty simple actually so all we have to do is in question header let's import the markdown component from react native markdown display and forever text component that is rendering now the body markdown let's replace it with this markdown and make sure that closing tag is also replaced now it doesn't have a style and we can remove that from here and what we see is somewhat parsed and rendered markdown but I think it's pretty nice because it actually also has like for example it actually has the image it's a bit messed with them with a height and so on but there is something so that's how simple it was to render this markdown let's do the same for our answer so in the answer list item let's go ahead and import mark down from react native markdown display and where we're rendering the body mark down here let's replace it with markdown so this way we will also yeah we'll also parse the answers as markdown and as you can see there are some links which we can press and we are actually working we are redirecting properly so everything is working more or less okay I'm not saying it's perfect but it's it's okay it has something so yeah I'm gonna stop here I recommend you looking for the documentation maybe finding some other uh library for the markdown but if you're still continue using it there is the style prop that you can actually style the markdown for example you can style the text you can style the links you can style the code and so on but I will continue using the default styles that they provide okay so with that being said I can do git add git commit markdown first parser okay so what does that mean we have a couple of pages everything is parsed properly rendered correctly yes there is this um red warning red arrow if you're you if you're working on a iOS saying that phone family Courier is not a system font just because this library for the code is trying to use The Courier but for iOS version 15 and above uh we do not have like the system phone career anymore so what you can do like you can override the Styles and and change it but don't worry about that it's just it's just a error we can ignore it safely what the font you are using in vs code speaking about phones then to be honest I'm not sure you should definitely check the video that we have done with my visual studio setup where I show like the font all the setup all the uh extensions that I'm using the theme and so on okay so guys as I said we are pretty much finished with a user interface of this application the next step is to go ahead and work on the API we're going to integrate with um stack Overflow API but and in a moment we're gonna analyze a bitvc API but I don't really want to integrate with a rest API I really love working from a front-end perspective from an application I really like working with graphql apis because we can specify What fields we want we can run we can get all the data that we need for a screen using one query instead of having to query the API multiple times so for that reason we're gonna take one more step to transform the stack Overflow rest API into a graphql API and after that we're gonna integrate and query it from our application so that's going to be the plan um give me just one second I'm gonna be back and we can start or yeah let me grab like a coffee and I'm gonna be back foreign all right I'm back whether we say just joined the Stream So what we're doing today we are building a stack Overflow mobile application and so far we have finished two of the most important screens of stock overflow application the home page that renders a list of questions and The Details page that renders the question details it displaces a markdown and also answers below our next app is to integrate with a reel with actual stack Overflow API so that's what is our next task is there a difference for traditional rest apis versus setting up graphql it's a very like the answer to this question is once similar Advanced for to all questions it depends so with that tutorial what we are doing today there will be no difference the stack Overflow API is free and the steps and has a free plan that offers us quite a lot of of requests per month however if you have to build your own API and to to host it somewhere it really doesn't have a lot of difference if it's a rest API or a graphical API you're gonna have to pay for the servers so if you deploy it on AWS or on other services you're gonna have to pay something being it a rest or a graphql doesn't make a lot of a difference thank you very much I thought War for supporting okay guys so let's talk a little bit about the stack Overflow API um in the documentation step-by-step guide that you can find in the description below uh here I have I have left some of the most important links that we will need to understand how the stack Overflow API is working so the first one is their documentation so open it up here and it's actually not the stack Overflow API it's the stack exchange and if you know the stack is changed like they have like more websites not only stack cover flows Tech overflow is for developers there is also other stack exchanges and websites so we have a common API that helps us get data from all of these websites what we're gonna do now is we're gonna filter only and query only with data from stack overflow right okay so uh via API what do we need to know about their API yeah the responses are in Json um all their responses are compressed and this is an important detail for for us a bit later but yeah just remember that the API usage is there are a lot of public apis so if we scroll down here to see the actual endpoints a lot of them do not need their authentication some of them that are post requests like accepting or voting or commenting they actually do need uh authentication so for today we're gonna try to only use endpoints that do not need authentication basically a read only and yeah to get this we don't need any API keys but the usage is throttled and it works based on IP so it's advised like not to send a lot of requests at the same time like if we don't do anything crazy we're gonna be good to go everything is going to be perfect and later if you want to for some reason continue building this application you can actually register your application and your rate limit will be much more than it is for the public thing uh what else what else okay we're gonna we're gonna check with the recommendation of every single method that we're gonna have to work with for example uh on the home page what we will be interested in is in this list questions so you can open this documentation or you can open it here it's not as far as it's yeah let's let's actually open it from here open in a new tab and here is the documentation for getting all the questions as we if we scroll down here we can adjust a bit how we want everything to happen like what filtering do we want for this request uh what sorting for example if we want to sort by votes we can select that it automatically updates the URL and maybe you can also provide some tags for example I want only rack native tagged questions so if I basically run this command I'm gonna see information about our questions like tags owner and a lot of data that we actually don't need so another thing that you can do here with their API is where you can provide some filters and by providing filters like we limit the amount of data that we want to to receive for example for a question we actually will be interested in the body markdown you don't have to do anything right now I'm gonna give you the filter ID and most probably it will work but what we are interested here besides web default information is in the body markdown that's one thing that is missing from the current filter so you can select it press save and now if I'm gonna as you can see right now there is no body mark down here and if I'm gonna run it again I hope to see the body markdown body markdown is here yes all right uh what else what else um hey ankan thank you very much for the donation love is content also sometimes use typescript in builds yes we are using typescript in a lot of builds but this one was already so huge like we're doing both user interface and the backend so I decided to um to keep it simple with JavaScript okay so uh going back like here are all the rest of the useful links that we're gonna need like uh endpoint to get a question by D get all the answers for the question um filter to include and yeah here is some information about filters so as I was seeing the filters are specifying like what exactly what data do we want to to get back from the API uh you can read more about that on your own time but I have prepared here a couple of endpoints that we can copy from here we can paste in a new tab and this is going to um basically in my case I have a Chrome extension that parses and prettifies with Json in your case it might look like this so what you can do is simply copy everything and maybe put it in some Json pretty parser or something like that just to to be able to see like them the the Json in a normal format like this so as we can see this URL uh is querying the questions is word ring based on the votes uh querying only the questions with attack rack native from the stack Overflow side and it has a filter ID that I have prepared for you just for us like to get only the data that we actually need and with data that we actually need is actually also documented here on our website this is the data that we will need for our user interface so now that we are more or less familiar with the stack of overflow API and how it works you can continue playing around in your browser by sending like for example question by ID if we send this query it will render if it will give us a response with only one question uh and by D is part of a URL here pay attention at this quota remaining because if you reach 0 you're going to be throttle then you're not going to receive a response but it should refresh from time to time to back to 300. so as I was saying um querying this rest API like building rest apis on the back end is fine but whenever we're building client-side applications whenever we have to query the data from the back end it's really um not that user friendler developer friendly to work with a rest API it's fine but I really prefer working with graphql apis because of a lot of reasons I'm not sure if you are subscribed to our new slider yesterday I sent a newsletter about the benefits of graphql so um maybe I will leave a link somewhere in the description where we can actually make a separate video about that talking about it because there are a lot of benefits of graphql but in a couple of words a graphql API when you query it from the front end you can specify exactly the field that you want so for example if on home page you only need like the title and the body you can build a query with this data and if on the details page you also need the body and the tags and the details and the user who posted it you can build a much larger query and the server will just simply return only the data that you are requesting I think this is them the best thing that I love about graphql but it actually helps us with some other some other problems that rest apis have for example a rest API has this problem of overfetching basically of sending you more data than you need and this is consuming a lot of bandwidth or a much more worse problem is the under fetching when you are sending a query and you do not receive all the necessary data that you need and after that you have to send multiple queries more just to receive information so for example with a rest API on the home page we would have to send two queries one to get the details about the question and the second one to get all the answers and maybe if you need also details about the user like for every answer you have to query the user with graphql we simply Define like some relationship between our types we know we tell graphql like hey this is how we want to create this relationship based on these fields were based on this query and after that like from our front end we can simply create this complex query with nested objects that gives us the data that we actually need then everything is going to be happening from one request we're gonna see some of these benefits in today's build but before that how can we work with a graphql when what we have is a rest API so that's a good question for that what we're gonna use is we are going to use stepson and step then um I want to remind is the sponsor of today's video but uh yeah like I've been using them with other projects as well so it's really easy to con first of all convert like any kind of apis for example a rest API to a graphql API but this is only just one use case of of stab Zen so if you look in some of these diagrams like the rest API is only this small part that allows us to build a graphql API by integrating with one rest API with steps and you can also integrate with backends directly with databases or even with other graphql apis and where it plays a helpful role specifically for Enterprise Solutions is in situations where you have decentralized teams and a lot of them are working on different apis for example some of them are working on the orders API some of them are on the customers and Advance you have to somehow Federate you have to somehow merge everything into one single API that front-end developers can query so what you can do is as you can see in this diagram you can simply connect them together and let the teams be decentralized and not depending on each other and only a thin layer on top of them to to define the connection between it so let's go ahead and create a new account you can get to steps and by following the link in the description so creating a new account I think you can do it with GitHub as well so if you start for free yes just continue with GitHub and you're going to be good to go on the dashboard what do we need here let's go here so install and configure the CLI yeah after creating the account what we have to do is to install and configure the steps and API so let's open the docs from our guide if you are logged in um at this moment in the docs like you're just going to be able to copy paste everything so to install the steps and CLI all we have to do is to install with npm globally step then so let's go ahead back in our project I'm going to continue actually working here in this project I'm gonna let me open a new terminal and here let's do npm install minus G stabs in to install steps in CLI globally after that is done and you have a CLI supports on Windows Linux OS X after that is done yeah like at this point if you don't have already you can create one account and what we have to do is we need the admin key and the API key in order to configure and set up steps and CLI so go ahead and do steps and login in your CLI in your yeah like terminal login and here provide your account name and the API key actually it's right here in the documentation you don't even need to go to the dashboard but if you're interested you can go to the dashboard and from the dashboard you can find all of these keys there in the account there you will find your account name and then which one the admin key and the admin key the second one so just copy paste put them here and after that you can ask steps and who am I to double check if you are logged in yes I see that I am logged in perfect we are ready with setting up and logging in with stepson The Next Step would be to get started and initialize the steps and project nothing too complicated uh what we have to do is in a new folder call stabs and init we can create this backend as a separate package as a separate repository from our mobile application in case we want to keep them separate like I don't know if you also have a website maybe you want to have a API separate from your mobile application what I'm gonna do is to simplify everything and to have all the code in the same into the same place I'm going to create a new folder in my react native root folder called stepson and this is going to be our steps and configuration for the API now inside the terminal let's go ahead and go inside stabs in CD stepson and let's use step steps and you need to initialize the project there it will ask us what would you like our endpoint to be called you can leave a default one or you can say I don't know API stack over flow now if you look into the steps and there is this configuration file which specifies the endpoint stack overflow what we have to Define here is the index graphql file so let's go ahead and create this file index.graphql in the index.graphql what we have to to do is to specify what are our files that we have in our configuration so where is them this one come on so in the index graphql just copy this part with schema so it's basically schema web directive sdl where we will add all the files that we have in our uh for our API and we Define the query here that's everything that we need at this moment now um usually what you'd have to do and where steps and makes it so easy to create graphql apis from a rest API is if you check the documentation here from transform rest to graphql there is a command line command steps and import curl that automatically when you do it on an API it automatically analyzes the response and the data and the request and it will parse it and it will create the schema for you so everything is in that case is super super easy I'm thinking maybe to to try to show you how it happens yeah let me actually do that just for for you to understand like you don't have to do this just watch watch me do it for for a moment and I'm gonna say like what we have to do for us so I'm gonna do get and get uh commit minus M init steps in just because I will after that I will want to to delete it so as I say as I was saying it's super easy to transform a rest API to graphql API using steps and all we have to do is to do steps and import and using the method curl because it's a rest API we can also use a database or maybe another graphql and after that provide our API endpoint and if I open this one in a window this is a simple API endpoint that returns like address email and so on so yeah let's just press enter and see the magic happening successfully imported core data source into your graphql schema what we see that is inside our step Zen we have a new folder customers customers with index graphql that has all the types and also a query that we can we can execute and get our customers through a graphql API it understood all the types that we have there it understood all the fields that it returns so this way like yeah it's just one minute you import with curl and you have your graphql API and from here what you can do is uh steps and start to start your to deploy and startours tabs and which also happens very fast and we can open this dashboard link that we provide us and from here we can start executing queries for our API I'm gonna have to select it from here stack Overflow and as we can see we have a customer query where we can get email ID and orders and so on so it's a fully flashed graphql API that was built like in what one minute two minutes um why I showed you this with customers and um is because yeah let me first delete it revert this customer thing because we have to actually integrate where should I leave it there just for for us to have where to look back but I don't need it so I delete the customer folders and in the index.graphql where we specify the files I can delete this one from here as well because we deleted it yes that's everything that we needed to to handle it and by the way in order to see proper formatted graphql queries what you have to do is to install the graphql extension so make sure you have graph ql extension I'm not sure which one I have but I have something graphical syntax highlight maybe you can just choose the first one so it will look like this now what I wanted to say is that um the stack Overflow API is a bit special and it's special because it is compressed so because the stack Overflow is compressed it doesn't return Json automatic little returns compressed Json but we have to uncompress and then we we can parse with Json so that that step actually prevents us from using the automatic steps and import curl request that introspects with schema and automatically creates all the graphql schema so we cannot use that at this moment but I'm talking with a guys from steps and I'm pretty sure they will do it and in future you're going to be able to do it I'm pretty sure so the only thing what we have to do is to create and Define the schema ourself and it's not that complicated all we have to do is create a new file for our stack Overflow schema so in Step then let's create a new file stack over flow Dot graphql in our index graphql make sure to import it inside these files so let's specify a stack overflow Dot graphql stack Overflow craft ql and inside this Tech Overflow what we have to do why did I close it so instead we stack Overflow graphql what we have to do is we have to start with a queries so query let me just double check the syntax to make sure that we do it properly so yeah we start with a type query now you can actually start typing with me and I'm going to explain like how everything works and here inside the type query we Define what available queries we will have for example we might need a query to get all the questions okay let's define that questions is a query that will respond with with a type the type is going to be questions response because we Define it here we need to Define this type above to specify like okay what's the question response data will be what field it will have a response now with some magic directives graphql directives we can connect this query to a rest endpoint to do that all we have to do is do add rest and here we have to provide the endpoint that we want to query to get the questions in our graphql database so the endpoint it should be with double code the end point is actually if we look at the stack Overflow API here in our guide where is the API endpoint for the list questions so let's think this endpoint because this is the endpoint that returns our questions let's put it here and let's before we Implement anything let's execute this one here and see what do we receive well we receive the response that we get back is some Fields like has more Cota Max and quota remaining let me copy this from here because this has more and so one these are properties of our response so we have to Define them here in order to be able to query them so let me remove the codes from here and instead of values what we have to do is specify types so for example a Boolean a false is a Boolean Kota Max is an integer and code remaining is an integer if we want to make them required we can put the exclamation mark if we know that we require if there will always be send so just having this one we can go ahead and do again steps and start if you haven't already and this will start our API and let's check if we have our first API endpoint running there so let's open these dashboards tabs and in our browser make sure to select the name of your API here stack overflow and if you look at the Builder here there is also the documentation that shows like what queries do we have in our application and we see that at the moment we only have one query questions if we select Builder here we can right away create our queries so if we select the questions we see the free fields that we specified in our schema that has more the quota marks and quota remaining so if I send this query IC has more false Cota Max 300 and code remaining 244. 48. all right so that with that little schema we already have connected and created a graphql API that will connect with our rest API and get the data from there but now if in our application we only need the property has more we can delete everything else and specify exactly what fields we will need so let's go ahead let's go back and continue defining our types because the question response if we look at the API itself besides we have more in these fields has also this array of items and this is actually what we are interested in is in the array of items so that means that question response has n items with an array of this is the array with an array of questions or let's do it singular question now that means that we have to define a type question here where to specify What fields will one question have you can go ahead and see the fields here but what I recommend us doing is to take the type to copy the type from here in order to save some time not to write like all them all the types I have prepared that for you so let's take a type question from our schema and let's put it in our project here so now the question has question ID creation title markdown and so on without doing any uh anything the API step then is actually watching our files and restarting the server every time we do some changes so we can go back to our steps and dashboard click refresh here and we see that now besides the this field we can also query the fields of our questions for example the title and what with tags if I query that we see what is rack native end of attacks and so on so that means that we are correctly parsing the rest response to a graphql type and to double check if everything is working you can select everything and make sure that it's it's returning like it doesn't have any errors and I see that everything is returning perfect so querying the questions is done the next step is whenever we yeah basically uh when we will be on the details page of one question instead of sending a request to get all the questions what we want to do is send a request to get the details of a question by ID because we know the ID we just need the details about one question if we look at the rest API and if you look here there is this documentation for the question by ID and you can read it or you can right away get the endpoint from here from API endpoint for the question by ad and this is the link just copy it from here open it in a new tab and press enter what it does it has the same structure with items as an array but at this moment it only has one uh one question here and by deal this question is send through the URL here so knowing this information let's go ahead and Implement our graphql query that will give us a question for example question it's as I said it looks the same like if you put together like a question request for a question and request for all questions the structure is the same it has items and it has this properties so so I'm not gonna create a new type for question response because I'm gonna use the same one the only difference is the rest endpoint so for the rest endpoint go ahead and grab the one from our guide here so let's copy that no question by this one get it and put it here now without doing any changes uh we can go back to our steps and dashboard we can refresh and we see that in our queries if I close these questions we have a new query called question and this one if I'm gonna do title it's going to be the question specifically the one that we are querying there okay that's cool but how do we dynamically get the details of a question based on an idea because at the moment vid is hard coded in our endpoint this is by D well it's pretty simple to do that with steps and we can provide them uh the variables of our query here so let's say that we want the question ID or should it just be ID I don't know it's going to be an integer type and it's required and let's copy the name of this variable together with um dollar sign and simply in this endpoint replace the part of the endpoint that is the variable part replace it with our question ID so after the yeah basically these numbers replace it with question ID and this will become the variable that we send as a graphql so in this situation what we can do is I'm going to refresh and we're gonna see that these question should request a variable it doesn't need a dollar sign here yeah in the variables here it doesn't need the dollar sign but where we replace it in them endpoint it needs a dollar sign so let's go ahead and refresh right now and we see that the question a request now expects an ID so if I'm gonna take like I know you can go to directly to stack overflow or like stack Overflow come on stack Overflow search something like react native uh opens one of his questions and again by D from my URL and go back to our dashboard and paste it here and if I'm gonna take the title the title is what is the difference between using construct versus get initial State and if we look this is exactly the title from here and that's true like we can now choose another question with error running react native app from terminal get ready from the header put it here in our graphql query run the query and we see the title from that question that means that we can dynamically send variables to only query the things that we want and to adjust like basically what information we are requesting perfect um and what you can do is you can go ahead and actually add more parameters for example if you look in this endpoint there are some variables here that remains hard-coded for example how do we want to sort based on votes or based on activity so this thing can be for example let's let me actually show you because it's quite easy so what I want to do is let's say that I want them how to call it this is the sword so let's do sword will be a string for now now let's take this word but make it not required because I don't want or should it be required yeah let's do it required because otherwise it's not gonna it's not gonna work I'm not sure how to do default values so this word let's take it from there and replace our sort equal votes the votes part which is a value let's replace it with sort save now if I do refresh here not history but refresh our question query in the Builder now has also this sort field which we can say sort based on activity I will wait a second why I'm doing this on the get question because this one doesn't need any sorting I should have done it on the questions so I'm gonna um go back and add this variable actually on the question like sword is string and we'll replace here sword with so with dollar sign sword so now if I refresh and if I close this one but query the questions themselves I can get for example the what that the title and the score and if I if I sort based on activity you're gonna see that the score is one zero two and so on but if I score if I sort on votes then we see that it swerves by the vote so now we can from our graphql side we can specify how do we want to sort uh the response now to make it better because now anyone can put here anything like blah blah blah and that will end in a bad request because if you look into the API of our questions the sword can have activity vote creation hot week and month do I have them somewhere here yeah the sword accepts activity creation let's do only this four activity creation boats and hot so if we want to the sword value to only be one of these values we can provide an enum here you know if the name is going to be question or yeah sword question sort and it's going to be activity creation and this one now instead of string if we say that this is going to be a question sort and also required if let me check if we don't have any errors I don't I can go back to our dashboard refresh and we see that in the sort right now the value that we specified here is cannot represent non-inum value something something so I can do it based on hot for example can I no yes so it's even like a drop down here that we can specify for example if I do hot it's going to only give me um questions that are hot based on their own algorithm okay so that's a little bit about our variables um should I put someone on mute please stop spamming I'm gonna try to okay okay okay okay okay let me I see um um so vietos a little bit about the variables that we can use and send you can go ahead and add more for example the worder do we want descending or ascending uh and yeah that's it I don't think that we need any more variables here let's go ahead and Define the last endpoint but we're gonna need and this endpoint is going to be when point we will use to request answers so it's going to be us worse and for the answers uh we're gonna get answers for a question so we're gonna need the question ID as an integer and it's going to be answer's response us words response now let's define this answer's response very similar to how is our question response the only difference is and swears the only difference is the items will not be an array of questions but an array of answers answer let's do it singular now let's define that type answer here and what Fields will the answer have again I don't want to spend a lot of time finding all the fields so we can scroll down until we get this answer with all the defined fields we can copy it from here and paste it in our schema and the last step is to connect our query with the rest API by using this rest directive and specifying when point then Point again you can use from this documentation that I provided with API endpoints here is the answer is if you copy it you can open it in your tab to see the data that you receive so it's items with actual answers let's go ahead and put it here and we need to make sure to replace the variable question ID in this endpoint and the question ID as you can see is here part of a path questions slash ID slash answers so I'm going to replace this hard-coded number with the actual uh question ID make sure it's the same name as here so now if I go into the dashboard I can uh get the answers to a question which question let's take it from for this one it should be check out this link so let's provide the value and the items let's take the body so check out this link it works correctly and it gives us the answers to this specific question that we that we queried okay so so far we see one of the benefit of graphql being able to query only the data that we want for example like this but another benefit of graphql is actually as I said before is whenever you need data from basically different database or from about different entities into the same uh into the same screen basically in that case with a rest API you would have to do multiple queries for example on our Details page here we would have to send a one request to get the information about the question and a separate request to get the information about answers the benefit of graphql is that we can group together this and Define these relationships and get this data into the same query at the moment if we are for example querying the question by ID if I look at the fields that we have for our question I see only the fields that we Define there but nothing related to the answers of that question well that's because we haven't defined the relationship between a question and an answer and to do that what we can do is we can use the materializer directive first of all we have to define a field so the field is going to be answers right answers is going to be an array of actual answers the type that we Define here but at this moment graphql doesn't know like okay but how for one question how can we get the answers for it well we know that in a perf like how I would do it is whenever I would need the question the answers for one question we know the question ID and we can send a query hey get me all the answers for this question and that's going to be the array of answers that we need here that's exactly what we have to do is using my tier materializer did I write it correctly I can open the document the documentation of materializer uh it's here for connecting question and answers here is the documentation for stitching stitching different parts of API that can even believe like on different databases and apis and so on so it's called where is it materializer mighty realizer yes so this materializer needs some fields for example the query like what query should we run to get the answers for this question well the query is called answers so let's query the answers and what arguments or how do we want to send like if these answers were B sounds were requires a question ID so how do we send some data from here to the arguments of that query so in the arguments we can say it's an array of arguments where the name of argument that we have to send here question ID is going to be taken from the field question ID here so the name of a query to what field are we mapping here so that's it but we will see that query answers has a type answer response which cannot be assigned to answer so basically what it says is that this query uh source does not give us an answer does not give us an array of answer it actually gives us the answer's response like this and now I think it will work but the thing is that we can actually get them specifically an array of items by saying that we want to access a sub a subfield of the over response of this query so by specifying here that we only need the items from this response they will be mapped and we will get an array of answers and now it works and if we go to our the steps and dashboard and if I refresh not this one to this one if I refresh whenever we query the question I can query its data like title and I can also query the answers to that question in the same query body markdown and if I send we see error running direct native and the first answer is check out this link and there is another answer and there is another answer and all of them like if you check with the actual question from stack Overflow we are matching they are exactly what we are looking for so that at this point materializer helped us connect two models that are coming from the same API and that might be trivial but imagine the the benefit of steps and actually happens when you are working with multiple apis where your data is distributed so imagine some of the data is in database some of the data is in a rest API and maybe hour is into another graphql that you're you you're working inside your company so with materializer you can connect for example a database model with the model that is coming from a rest just by specifying like what query do you want to to run so it's really powerful to create these connections and it actually works pretty well with federations where different teams are working at different parts of application and without knowing about like what our team is doing with steps then you can connect their work together and have a a master schema that has all the data of your API and all the connections using the materializer okay so I think what we are ready to actually go ahead and start querying because we have all three queries that we have we can query all the questions we can query the question by ID we can also get its answers right away into the same query like this and if we need for some reason we can also query answers separately we will not need that one because we can take advantage of graphql being able to retrieve data in one request like from multiple parts of our API so yeah we're gonna only use this two queries oh that was uh that was exciting let's go ahead and do git add git commit um stack step then graphql yeah let's just have a look in the comments what are people doing take a small break and move on to the last part of this tutorial so far we have implemented the first two parts we have built a user interface we have converted the stack Overflow rest API to a graphql API and finally the third step is going to be to query our graphql API inside our application using urql so let me check yeah everything is perfect so guys what do you do you think about everything that we're building so far Ismail about notifications on YouTube I don't have it uh the notification will only cover it in our premium course so if you're interested in more advanced mobile development and if you are really serious and dedicated to learn and become a full Stack mobile developer then check out our course at academy.notjust.dev where we go much more in depth into the crucial features that you have to implement in um in when building full stack applications so that one is really in-depth and it also has the notifications the link you can find in the description below of course all right how to clear backstack in Expo when I move a screen when I want to remove all other screens in backstack in explore router or anyone in the chat do you mean you want to [Music] um um yeah Expo router give me just one second to look through the documentation so if I understand your question correctly what you're looking for is you want to navigate to a screen and prevent the user from going back basically delete all rubber screens so in this situation check out the guides authentication and here there is this router replaced so instead of pushing to a new screen you can do router replace and that will replace all the existing screens in your stack with them one that you provide here then you get the router using the user router is this over no no guys we have one more step we have to query our API and this is going to connect our backend with the front end and we're gonna have real data from stack Overflow inside our application so uh yeah let's I think let's get started uh let me probably close some of the tabs that we will not need I will uh Authentication I will leave only this dashboard of Homer API and we can move on to the next step the last part in this tutorial as I said is going to be to query our graphql API from react native there are a couple of solution a couple of libraries that you can do that you can use to query your API your graphql API the most popular one is the relay from Facebook but that one is quite opinionated and complex there is also a polo from graphql uh yeah like Apollo Apollo client from graphql uh I've been using that quite quite intensively that's actually what we are teaching in the in the course Apollo client but for the sake of this tutorial I said like I want to try something new a new library that is lightweight that um helps us query our API and is also extensible through different uh for different packages so um yeah it's something that I'm also learning together with you I checked it out I think it's pretty a pretty interesting library for graphql and that's what we're gonna use today I'm talking about where where is it urql I think people pronounce it differently but for the sake of making sure that they pronounce it at least somewhat correctly I'm gonna spell it by letters urql so with documentation you can find by following this link so what we have to do is let's go ahead and install the urq well library and also a graphql library so let's go ahead open a terminal uh make sure that you are in the root directory make sure you're not inside the steps and directory and now go ahead and do npm install let's install urql and graphql and also provide the Legacy pure dependencies because of some inconsistencies in why I'm having it like this yeah um we can continue initializing the client but we will get into a into a into an error and this error is actually not related to urql because we get this error also with amplify and it's because yeah like for some reason like in our environment like with Hermes we do not have access to this async iterator so what we have to do is to install this library and import it somewhere in our application so follow the link there and simply let's simply install this core.js in our project npm install core GS peer or Legacy Legacy Pier dabs and inside our index.js let's go ahead and import it here so let's import this symbol async iterator make sure that our libraries have access to visasync iterator so let's do that and forget about it okay moving on to the next step what we have to do is we have to initialize the urquel client that is going to connect with our graphql backend to do that let's go ahead and where do we want to initialize it usually um if you were using Rec native Iraq navigation before the place where we would set up these Global providers was app.js but as you can see we do not have any app.js with export router and the global providers now will will go into the underscore layout this is our root layout which will encapsulate all other screens from our application and this is a good place where we can provide Global providers so um should we yeah let's go ahead and actually separate a bit the concerns not to put everything here so what I want to do is in them Source let's create a new folder here for graph ql inside source graphql let's create a new file client.gs this client.js is where we will connect with our um with our backend so let's go ahead and import or let's actually take a take some code from the documentation of urql so here in the basic in the react bindings if we scroll down we see here the default way of how we can initialize the client let's take it from here let's put it here and let's export default client the URL is not localhost the URL we need to take the URL of our API if we go to the page where where we are running our API you can scroll up until you find the url or you can stop the API yeah stop API and start it again steps and start and this will um tell us the URL and the URL is this one here you can see you can test yeah so let's take the URL from here it should be the name of your API then it should end with graphql take it like this and let's put it in our client that way we say like how do we want to connect to our API if we're gonna try to do it to query it right now we're gonna fail because uh our graphql API requires the API key so as you can see here in the cool that specify how we can connect it also provides this authorization header so let's go ahead and say uh Hey client for every request that you are doing make sure to use a header so to do that there is these patch options that we can fetch options headers it's fetch options we can do it as a object and it has headers and these headers has what headers is an object where we have the authorization which is a string with API key space and here we need to provide the actual key to think it you can execute these command steps and who I am dash dash API key in a new terminal so steps and who I am a baking and grab it from here put it here and that's it and this way we set up our graphql client to always come on close it to always use this authorization API key whenever we are sending requests to our API okay perfect now we have set up a client we need a way to provide this client to the rest of our screens as I said to provide things we are doing this in the layout so here let's go ahead and import the client that we just created so client from graphql client and also the provider Provider from urql all we have to do is using the provider component we send the value our client and we encapsulate oh sorry it should be we should put it in the return statement and encapsulate our stack into this provider now all our screens from our application will have access to the client and will be able to send queries if we look in the documentation the way we send queries is using this use Query hook and we need the actual query that we have to send so let's define in our graphql let's define here a file called queries.js where we will keep all the queries that we have right now later one you can have like different files for all your queries but for now because we're going to have only two queries let's keep them here so what will be the queries the workflow that I usually do is I go to this to the dashboard of my API and I create the query based on what data do I need for example for the home page I will need the questions I will need I'm not sure if I need this has more code time remaining maybe you need but what I need is the items the items I will take as for count because we have to display it here body markdown Recreation date is displayed in basically everything but your user interface depends on is what data we need is answered I don't need it here maybe later we can add it link we also don't need it question ID yes let's use it as a as ID of our flat list core yes tags yes title yes and view count yes after you have have done this you can actually run the query to make sure that everything is okay and what you can do next is to Simply copy your query from here and let's bring it in our editor inside the queries let's create a new variable for gear for questions query which is equal to graphql string and this graphql tag we can import from urql we can Define this string and here we can paste our query make sure to also export this question query because we will need it in the next step to send a request and get this data so where do we send the request well on the home page which is our index.js inside our application at the moment we're taking the questions from dummy data what I want to do is to actually query them from our graphql API so what we need here is a use query Hook from urql we also need the query itself get versions or how do they call it questions query from Source graphql queries and let's put it together here in our body of our page and we're gonna get some response so the use Query hook expects an object with the query where we can specify what do we want to query this question query back from the use Query we're gonna receive a tuple basically an array of two values the first one is the response and the second one is um [Music] uh re-execute the query so it's a function that will help us re-execute the query I don't need it at the moment but what I'm interested in is in this response this response now has a couple of values for example it has a fetching value that will be true when we will wait for a response while their request is still loading so in that situation we can simply return an activity indicator so now if I'm gonna refresh my application but I need to actually run it so npm start and run it on iOS gettercon black for com component Circle must be a function received any fine what getter callback for component react native view config what's going on View configurator received and defined how to debug it let's debug it together where is it coming from I'm gonna start by commenting out this use Query and I already see where it's coming from from the use Query even commented it still works oh yeah I know the activity indicator was imported from react native web when it should be imported from react native and delete it from here so if response is fetching return activity indicator now if I'm gonna refresh you're gonna see that we have the loading indicator for a bit and then after it's not longer fetching it goes here but it still doesn't render the items from there so then if we look if we have a look at the response this response will have so the data for flat list will be response dot data then this data will have the information about their query itself so it's going to be questions and to access the array of those questions as you can see we need to access the items so we have to do one more dot items so in the end the data is going to be response data questions items so now if I'm gonna refresh we see getting type error with Xbox screen capture module when running and this is a different one when our dummy data and at this moment we can go ahead and remove the dummy data because we no longer need it we are fetching our API for the data and our common thing that you do is you check if a response has error in that case you also want to display something to the user for example in a text view I'm gonna say error and here let's display response dot error Dot message so if something goes wrong for example if a queries has count one two three we're gonna see the error cannot query field us work out one two three one type question did you mean answer count yes exactly that's what I mean so now it works so that's how simple it is to query our graphql API using urql well what we had to do is we have defined the client and specify how do we want to connect to our graphql API we added some headers for our authorization like the API key we provided this client to all our application through the root layout using the provider from urql and then from any screen what we can do is using the use Query hook we can get data from our backend from our graphql API now let's do the same for the for the details page so if I press here we're going to save a question not found because we no longer have this data in our dummy data so let's go ahead and first of all let's grab the query that I have prepared for you here for the get question query so this query has information about the items and the information about the answers so we're gonna get all of this in one query let's go ahead and open our source graphql queries and put it here make sure to also export it from here export cost get question query hmm double check like if it has all the fields that you need you can double check it using the your stabs and dashboard you can build it here actually and then what we have to do is inside the ID inside the details page which is this id.js file we have idea here we will have to import use Query hook from urql and the get question query from the queries now let's go ahead and get the response from our use Query and here what we have to do is we have to provide a query as the get questions query but the thing is that besides the query this uh besides the query itself we also have to send some variables the idea of a question that we want to query so what we have to do is in this options object of our use Query we can send variables as well so the variable with a Name ID is going to be this idea from the search params now we can remove this line that was looking through the dummy data we can remove the import of dummy datas and for answers as well and what we can do is let's check if response is fetching I'm going to return the activity indicator from react native make sure to import it from there if response is error let's return a text saying error and the text the arrow will be response dot error Dot message and lastly here what we have to do is we have to get there question from that result so it's going to be a response dot data dot as I said the next one is the name of a query question Dot and then what do we have it's the items which is an array it's items which is an array and we expect our question to be at position zero so let's exit position zero but leave this check because maybe it was not found so in that case we still will receive this question not found now uh for the flat list uh to get the answers how we're gonna do it simply by getting question dot answers and should be items or just answers interesting I don't know and for the header we just have a question so let's try to open the first one getting type error with Xbox screen screen capture if I send we see it here but we don't have any answers because that's actually like this question doesn't have answers but you know what let's go ahead and because when we are querying the questions we can specify the sword and the sort is a variable so let's sort not by activity by by the votes we can do that right from our application so inside our up index where we have this question query it shouldn't be question should be questions questions so besides the query let's also send some variables oh come on variables and I want to send this word which should be vote is it like this sword oh here is activity it's yeah the actual query does not have a variable because it hard-codes it at this level so back in our queries.js for my query we need to add here the variable sort that should be of type uh of which type if we have we have to look in our steps in stack Overflow and here we have this question sort now instead of hard coding the activity we can send this word here sort and it should be required and now we see that the first one is one with the most votes and it has a lot of answers and the cool thing about this is that now we can change here from sort votes to sort activity activity and it will now sort by activity and what you can do is you can have a a drop down where the user will select like how he wants to sort and you're gonna send this variable to your query based on a state variable for example so as I was saying I want based on vote and the first one here is for one with 45 answers and we see what is the difference between react native and react and the first ones were is the one that we were looking for amazing perfect perfecto the only thing that I'm not sure is this part is going off the screen and this is a common issue with flexbox so let's double check quickly the components answer list item this is the left I think this is the body container which is the right one so let's check in the body container it's Flex one it should work I don't know why it's not container maybe some padding 10. okay that one worked Hello Alex yes please do you want to say anything to our subscribers Alex is asking you to subscribe guys so if she said please subscribe like you gotta subscribe so what does that mean that means that we are querying all the data from our API both on our home screen from the questions query and on our details screen from our get question query by sending the variable ID and if I go on the different one waiting waiting waiting and we see the answer also like with images and so on perfect I go back go over to the first one back and as you can see if we're going back to a question that we already queried we do not see the activity indicator we do not see the question loading because urql in our client in our graphql client we have this cash exchange that is actually caching our requests so if this is not the first time we're sending the request it actually will read it from cache and will not even reach our backend and this way is going to be very efficient and very fast and only like for new questions it will load and wait a bit until the data receives until it receives the data so yeah that's perfect uh so cheers guys uh do you want to see maybe the search query how to implement the search functionality that would be some extra features because I'm we are mostly done with everything that we have planned for today so let's go ahead and actually do git add query uh query our graphql API using urql should we do a search query I think we should because that's the most important part of stack Overflow nobody is going to stack Overflow to look at the home page you always go there to look for something so this is going to be a very cool extra feature of this application but we can do on the Fly and we can together think and implement it both on our graphql API on our steps and side to to connect it with stack Overflow API and also on our application where we will be able to uh yeah basically search for new items um what I'm gonna do is let's start with some of the screens that we're gonna need I think I'm Gonna Leave a home screen as the home screen as it is right now not gonna touch it but I'm going to create a new file for our search so enough in our application let's create best search dot Js and here let's do Rec native functional export how do we get how will will we get to this screen one way I'm thinking is to in the layout to add on this home page a search icon to the right to do that what we can do is first of all let's find the Expo Vector icon for research surge for example this one looks okay let's import and design in our root layout and let's take the rendering part of and design and for our index where is a home besides the title let's also do header right and on header right let's render this icon 24 probably is too much so let's do 20. and maybe not black but dim Gray yeah I think that looks okay now if I press nothing happens but what we can do is we can wrap our end design inside the link and we can do href and web path as as I said before the path is the name of a file so it's slash search make sure to import link from Expo router and here wait wait a second and here now if I'm gonna press on this we're gonna go to the search screen and we can go back to home while we're still here I'm gonna cover one of one more stuff let's rename this screen from ID with a proper name to do that in your stack we have to specify them the title of our stack dot screen we target the screen but we want to configure using the name of a file so name equal the name of file is ID and their options our title is I don't know question like this now if I press it should be question on the top perfect o what's going on with our UI it's kind of broken for some reason there is one question that is kind of broken like this one no idea why but not a big game so moving on to the search page uh uh what will we need on this search page well on this search page we can should we add like a just a simple there are two options it's either working with a metal text input or working with a search box inside the search bar here so to do it inside the search bar I have a code here if you scroll up until we see something related to search inside the UI here search input inside header you can look at the documentation of react navigation and it specifies like how we can set the header search bar options and to configure like our search bar tool um to to have a to our header to have a search bar so let's go ahead and copy this use layout effect and maybe also the navigation and also the search term all of them and let's drop it inside our search page here so now let's go ahead and make sure to import the use date from react also the use navigation not use navigation but use layout effect and we use navigation should be imported from export router so export router use navigation and we have here a function search we should be const search let's do console Warren search and hear the search term so now if we are going to go to the search page we have this search bar at the top which we can write into and when we press enter we have a search here at the bottom so if you want to do it this way we can do it this way or if it it's not working the way you expect just simply create a text input here inside your view okay so now that we have a page the next step is going to be to whenever we press enter to actually do a request or graphql and to search for something well let's start from our end API from our stack Overflow API let's go ahead and open the documentation of stack Overflow API and scroll down until we see something about search so if I scroll down to [Music] what questions search for the site questions meeting certain criteria let's do search and here you can read some of the documentation but something interesting is that it has this property in title so if like that's how we're gonna search based on the property that is in title so if I'm looking for something like I don't know undefined is not a function let's try to run it and we have some questions with this um with this title it has the title why I'm getting any fine is not a function error and so on so we're gonna use this uh in LA in in title and what else what else search activity maybe not activity but maybe based on votes to find where one with the highest votes um and yeah that's it I think it's okay let's copy basically you can press on this URL it will open in a new tab and we can copy it from here and I'm gonna go ahead and actually put it in inside this document filter the filter part so so if you look at this query it doesn't have a filter it has a default filter what you are interested in is to this queries to add the where is it the this part the filter with ID of this filter to get exactly the data that we need like with a body and so on but I uh put it here so you're gonna be able to let's wait a couple of seconds it should refresh quite soon and yeah here it is so I put it here in the search so we can copy it from our documentation from our step-by-step guide if I put it here we see responses with title undefined is not a function perfect now let's go ahead and connect our steps in and Define a graphql endpoint for this query so in the steps then stack overflow graphql let's add inside the queries let's add a query search this search will have a term or like something that we want to search and it's going to be a string the answer I'm not sure yet was once were but we can have a look if I do it like this it's items has more and items are questions so we can reuse the questions response because back we're going to get the questions response an array of questions now let's define the rest part of how do we want to get this data and to do it just copy paste from API endpoint vs URL let's put it here and let's replace the hard-coded entitled field here inside this URL where is it that I said I Define is not a function make sure to replace it with dollar sign and the variable term so dollar sign where is it dollar sign term now if your steps and start is still running in your console you can check where you can restart it now we can go to the steps and dashboard we can refresh and we see that we have a search query and here we can search for what give me a error [Music] um I don't know react native View and if I'm gonna take the answers and maybe also have a quota remaining to see what's going on there and if I'm gonna look for the title of uh answers we see a react native View Auto wave react native view on press react native and Rec native and so on so that means that our query is working and what we have to do is let's grab a query from here inside our Source graphql queries let's go ahead and Define this const I mean export const export export const search query equal graphql and then string and here we paste the query the thing is that maybe we don't need to query recorder remain but the data about the question should be more than the title so what I'm gonna do is I'm gonna take all the information from here because we are going to reuse the same UI component as on the home screen so we need all of this data and I'm going to paste it inside the items this way every every question will have all of this data now let's go ahead and import this search query in our new page inside application search let's do but we think is that we do not need a query we need a lazy query so a query will fire as soon as our component basically re-renders in our case we don't want to do that because that would mean that every time we type something with every letter we're going to send request to to the API and there's going to be a lot of requests what we want to do is whenever we basically press enter in this field that's when we want to execute the query so when we want to execute a query on demand when user does something let's call The Lazy query so let's see if [Music] if you are ql you are ql has a lazy query which I'm pretty sure it does Matt G is saying learning a lot about graphql steps and stuff thank you Adam thank you very much I appreciate it it's really really powerful so query run a first query let's use Query that's variables there is a in some cases we want to re-executing queries is your cure like Apollo client yes it's like Apollo client but it's way more lightweight it's if you're looking at them it's I think more than twice as smaller than Apollo client so lazy okay UI patterns your lazy query it's often required to lazily start the query either at the later yes that's what we're this means that we don't start the query when a new component is mount in the middle parts of that automatically starts like use Query hook have a concept of pause option this option is used to prevent the hook from automatically starting a new query so I think it's going to work with pause we can unpause the hook to start fetching or like in the example call its return function to manually kick it off to call this fetch to kick it off yes I think that's what I pause through and when we call this fetch yes okay so in our search we have a search term we need to define the use Query use Query the query is going to be our search query but we have to import from graphql queries we Define it recently and as we saw we also have to say that we want to pause it we don't want to execute it before we write something then we get back the result and the fetch right something like that now inside the search what we want to do I think we can do variables here and term should be our search term we need to double check if our query actually has a variable no it has a hard-coded variable so let's make sure to send this variable here as term which is a string and we replace the hard-coded with this variable term now from our page we can send variable term from them state that the user writes and we fetch it when we call this search now we need to check if result fetching we need to show them activity indicator where it was imported from again from the web we need from react native uh if result error then we need to say text error and let's display the result dot error Dot message otherwise what we want to do is let's first of all render the search term so searched search term where is gonna be there I don't need it I just simply can render a flat list from Rec native with the questions that we got back so the data is going to come from result dot data then dot the name of a query which is search then items to get the array of items and for render item let's go ahead and for every question render a question list item this one the question list item also needs the question itself that we get it from the item and the last step is to add the view style background color white and flex one let's check it out if I go here cannot read property search of and Define and this is also going to be if result.data dot search is not defined then let's return a text I don't know um I don't know search for a question ah I'm so bad at this can't read property search if resolved data search if if result.data is undefined in that case we don't have data yet but if I'm gonna write here I know undefined undefined is not a function and I press enter we see cannot return null for question body markdown and you find is that a function what's going on with this body markdown if I open it's gonna answer if I open here steps in dashboard and if I select the body mark down in this one it says null cannot return null for non-normal field mark down it should be uh this is the filter but it doesn't have a body mark down why the filter is not applying here that's a bit weird I don't know if I'm gonna do some changes it filter and filter for us it's site and filter maybe I copied the filter incorrectly most probably I did because the filter is the one that specifies what data so it should end with KV it's the same here still has this owner hmm what's going on four questions here oh it shouldn't be this one oh I use two different filters it should be the one for the questions sorry guys it should be this one with zero actually I should have used the same filter but I created two separate filters one for questions and one for answers and this one has a body markdown so the only difference is that in our steps and here in the end point I have to update the filter to reflect to have a filter that we were using for the questions now if I'm gonna refresh my application if I do here undefined is not a function enter we see typer random fun is not a function and code Type error and Define is not a function and all they are sorted by by number of votes so the first ones would most probably tell you why that is happening so with that being said we have and I think we can also look for something else I don't know JavaScript versus typescript search recognative performance JavaScript versus typescript it's actually because we have here besides the term we have no we don't have not sure why it's only related to to react native no actually it works perfect now we also have search functionalities in our API so I'm gonna go ahead and do git add git commit minus M search and this is also working from front and back and so on and if we cancel we can go back to our home page how many of you saw the homepage of stack overflow all right guys so we are approaching the end of today's video I hope you really am I really hope you enjoyed this and you'll learn something new because it was really packed with value we covered a lot uh both from the front end building this application using react native using expo Expo router and parsing like markdown and working with quite complex data and also on the backhand Side by analyzing the rest API that stack Overflow is providing Us by creating a graphql layer on top of that API using stepson we we managed to to to do everything in just four hours I want to thank you again stabs and for sponsoring this video I really enjoy working with it it's really easy to create graphql apis and I wish to to include it in more projects you know in future for whenever we have to work with graphql apis uh because there are a lot of other things that there are that tabs and can do besides converting a rest API to a graphql API you can also build apis where you can connect with databases we can you can Federate multiple graphql apis and that's really powerful especially in Brownfield applications where you have existing apis out there so uh yeah hello Kathleen how are you doing we are closing it up today um it was a crazy build four hours uh pretty pretty exciting week like so much work and I'm so happy on Friday when everything is completely successfully I can relax for a bit and probably tomorrow get back to work so guys if you have any questions uh now is the time we can spend five minutes but I think I'm so tired they really want to to get into the weekend for this filter problem I just go to charge ubt I am still a new developer that's that's a good solution like go ahead I'm not sure like how but it should know like the stack Overflow API was public for a long time and I think charging Beauty should somehow be able to understand it the problem would be to to understand why why it's happening and how to ask a question properly Catalina so sweet like a like a real father did you read some um poverty see I'm done I'm finished yes where are you based I'm based in Spain at the moment hey buddy hello to become a prime rank native well you should check the academy at notjust.dev Academy dot not just the dev if you want to become a pro react native developer and build full Stack mobile applications both on front and back end connects them and build quite complex applications check it out it's the link is in the description below and thank you very much guys for watching till the end don't forget to subscribe to my channel become a part of a one percent club with people who are watching these tutorials and are subscribed we are only one percent so yeah um I'm gonna see you next week because we go live every single Friday and I'm super tired I don't I cannot think anymore alright guys so thank you bye bye have a nice weekend let's go

Channel: notJust․dev

Views: 4,558

Keywords: vadim savin, not just development, notjust.dev, react-native tutorial, react native ui design, react native live coding, live coding, javascript, react tutorial, react native tutorial, javascript tutorial, react native ui, react native for beginners, CodingTutorial, first app, App Building, App Clone, Step-by-Step Guide, User Interface, React Native, EC2, stackoverflow, stackoverflow clone, expo router, use expo router, graphQL api, API, Expo, public APIs, StepZen, REST API, query

Id: iwgp777Mi54

Length: 219min 15sec (13155 seconds)

Published: Sat Jun 03 2023