How to Connect React to AWS AppSync API - Serverless SaaS Build Series 2.7

do you want to learn how you can hook up your react front end with your ab sync apis and cognito in this video that is exactly what i'm going to teach you how to do [Music] hi guys my name is sam with complete coding but our aim is to make you into the best possible aws and serverless developers that you can be in this video we'll be looking at how we can connect our react app up to appsync and get it all working we'll also be looking at react context and how we can share the data through different layers of our components without having to pass everything around so react context is actually quite an advanced topic and it's very complicated to explain i've given a very brief overview in this video but if you want to learn how to do it yourselves i'd recommend finding a tutorial specifically for this there are loads of really good youtube videos as well as written articles that can help you understand this process so let's jump into the code and we can see the progress that we've made in the last week in our app we're going to start by having a look at our login process so if we scroll down to our return statement inside app.tsx we find the not logged in check and if they're not logged in then they get to this set of routes so if the route is forward slash we send them to home and if it is forward slash sign in we send them to a sign-in component if we open up this sign-in component we have some states some error messages and then we have a sign in function and this sign-in function calls auth.sign-in where auth is a set of functions provided by amplify where we can just pass the email and password and that will actually work with cognito and tell us if that user is valid validate the password and if that all works it's then going to give us back a user so if they call a sign in and it all works we're going to use history to push a forward slash into the history and what this is going to do is it's going to reroute the user to the url of forward slash this is because when they log in we don't want them to stay on the sign-in page that they're currently on and after that we call the on sign in function which is passed into this component and we'll have a look at that in just a second before we do that let's have a look at the actual react code so here we have a grid with the normal use color mode value to allow our color mode switching between light and dark mode we have our color mode switcher and the login heading then if there's an error message we're going to show it here below that we've then got a input for email address as well as password but as well as in this password input we've used an input group and inside we've also put an input element right which is going to show up an extra part of the input box on the right hand side and what we're going to do on there is we're going to either show or hide the password we'll see that in just a second and at the bottom we have a button saying next with the sign in function that we are going to call when this is clicked which we looked at just before and finally a button saying i need to register which links to register this just saves them having to go back to the home page to then go in to register if they've accidentally clicked on sign in so this on sign in if we go back to our dot tsx we see here that we are passing in the function of assessed logged in state and if we have a look at that all that does is checks if there is a current authenticated user and either sets the logged in state to true or sets it to false this will then change the logged in value which will back in our sternery statement here instead of setting this group of routing it will now use this group of routing so that's how we are separating logged in and lot not logged in users so let's have a look at how this all looks so inside our app obviously have the home page and the color switching if we click on log in we now get to the login page with the two inputs and a next button if i was to enter a gibberish password and i want to see that password i can click this show icon just here and when i do that it changes to hide and i can now read the password this is useful when you're having people sign up but by default you should always hide the password whenever possible i'm just going to now delete this password and i've got a saved set of user credentials which is the ones i manually set up to test all of the apis and then i hit next what you can see is we have now logged in and you can get a bit of a preview of the actual app so let's look back into our code and see what has happened now so now that we've logged in we are getting this set of deter routes because we forced the app to go to forward slash it goes to this route which then actually redirects them straight to posts that's because the posts page is where i want the users to start their experience when they are logged in and that means they end up looking at the posts view if we go in here we can see that we have some states with posts and and a company now we'll talk about this company context in a little while but for now all we need to know is that when you log in there is a selected company and we use this effect so that whenever that selected company is passed in we get the post page this get post page is going to take the selected company and if there isn't a company selected it's just going to do an early return that's because we really need that selected company to pass into this request and here is our first ever api request so again we're using api from the amplify tech suite i'm doing api dot graphql and this is a function which takes a query and some variables so the query that i'm using here is going to be the get posts for company and the variables are going to be a company id which is selected company dot company id and the next token that's because if i've already loaded one page and i want to get the second page say i've scrolled to the bottom of the posts that i want to view this can be used to get the second page based on this we get a response data and we then get the new posts from get post for company dot posts and we basically append that onto the end of the original posts array and set that also if there is a next token we pass that into set next token so that if we carry on scrolling we will get the third page after that so that is our logic for getting data from the api and after this i'll talk about the get posts for company and how i've populated that if we look at the actual code the top section will look pretty much the same as before where we have a grid a color mode switcher container with a heading of posts and then the actual posts themselves in this view are very simple it's just a vertical stack where we map over each post and pass that as a new component if we have a look at the post component so this is a single post and i'll actually show you this first so this is the whole posts page from the top of the nav all the way up to the top and a single post is just this one single white section we've got this circle with the name of the group and the colour followed by either the title or the date of the post so for example this one has a title and then whether it is a scheduled post or a group schedule is stored here at the moment all of these posts are group schedule but there is extra actually logic to show the date there if it is a scheduled post one other thing is to make this more like linkedin i've said that this text area here is limited to a certain number of lines as it is when you scroll through linkedin and i've added this see more button here which is almost the same as this layout in linkedin not quite perfect but if you click that it now expands so you can see the full text message so now that we know what it looks like let's have a look at how we've done that inside our code so here where i said it can either be a group schedule a scheduled post where we want to show the date it could also be a draft so here we're using the value of info for that position defaulting it to get ship to group schedule and if there's a ttl on the post we want to set it to be the local string of that ttl date and if it is a draft then we need to set it to b draft as well as that we then go down to our container here we have a horizontal stack where we have the avatar this avatar is going to be the circle that has the name of the group in it and here we set the background to be post.group dot color or black we always at the moment set the color of the text to be white but in the future i want to add some extra logic so that we know there's enough contrast between the group color and the text color and then in here we need to get the initials here's some relatively complex logic all this is doing is trying to make sure that the name inside this circle actually fits if it's too long so for example if you've got more than 10 characters in the name then it needs to be wrapped onto two separate lines and that is what is happening with this logic after that it gets pretty simple you have a title and info which is the title and the info whether it's group schedule or the date it is scheduled for and then if we go down we see we have the text now now we have two options for this we have the text here which contains the text but with this text component you can set a maximum number of lines so here if it's not expanded we set that to undefined so it shows all of the lines but if it's not expanded we set it to five that's what i showed earlier where there was the dot dot dot at the bottom of the post which showed that there was more text in there and this show more is going to allow us to click that button and that will set expanded to be true which will remove this number of lines requirement and it'll also get rid of that show more button so that is basically the post so now that we've looked at the components that we were using we want to go back to our posts view and talk about the two things that i said i would talk about those two things are the get post for company query and where does that come from as well as this company context i'll start with the query so if we go into our source i've added a new set of code in graphql with queries and mutations if we have a look at this queries.ts in here we have a set of functions and that function equals query getmyuser or query get company and these will align exactly with the queries and mutations that we've added to our graphql the way that i know that is i didn't actually write all of these queries and mutations as you can see on the right hand side this is actually quite a large file so it's what 300 lines for the queries and for the mutations it's or 260. so i didn't actually write all of that what i did is i went into my api and to my graphql schema and i used the amplify tool called generate code and what that did is that actually generated that file with all of those methods this is really useful because writing them manually is a bit of a pain but with this tool and i'll link the exact code in the description below you can generate as much boilerplate as you want there were a couple of things i needed to do so by default you have to pass in a depth to which you want to query and it will actually query that and get every single possible value all back for you so for example in get my user it had two layers deep so it got the user id email and companies and then it had companies but it didn't actually get any values from each of the companies this was a bit weird but that's because it was set to two layers deep so i had explicitly say i wanted the company id name and logo url whenever i do a get user another example if i scroll down to get post for company in here we have a set of posts and because again i set it to having a default depth of two posts and post id company id group id group date title context is draft and ttl were all included but anything nested further than that wasn't one thing that i did want was the group so i had to add these extra fields as more nested values that i wanted to get and one of the weird ones i didn't expect was it brought back context but not context dot text even though that is technically part of the same object in dynamo this was treated as a separate layer so obviously i want the text of the post so i had to add that in so that is how i've got all of the graphql queries and mutations and from the boilerplate i'm able to just slightly modify add or remove some of the fields but having somewhere good to start is a lot easier than starting from scratch and the next thing i want to talk about is if we look in our posts is this use context process and i have used company context but i also have a user context and i think i'm going to start with user context so i've created a folder called context and in there i have a user context file and what i need to do is first create some context using react dot create context and i then need a way of providing that context so here we have state with a user and the ability to set the user whenever this provider is is called or used i use a use effect and i call graphql with get my user this works in exactly the same way as get posts for company and that returns my user and then i set that user with all of the data i need with that you can then get the provider component from the context and you return the provider with the value that you want to share to all of the children in this case it is the user that i'm sharing to all of the children which is stored in my state and that now means that any of the children i pass into the user provider will have access to the user see how this actually works inside app.tsx i actually use it just like this if they are logged in i then wrap all of the routing inside the user provider this means that any component in here could use the context of user context and then access basically any of the user data that they want to the way i've actually done that is inside the company context i do something similar where i have the details of the currently selected company and also a function that can be called from anywhere in the app called set selected company which can change the company that the user is working with again this is just using react state and then this exports the provider with selected company and select set selected company this then has all of the children so whenever this is used it passes all of those children the ability to see the selected company and also change the selected company if needed and that's exactly what we've seen inside our posts here we use context taking the company context and access the selected company this is really powerful because i've not had to manually pass the selected company into this posts object component and i could use this selected company anywhere in the app where let me go back to app.tsx anywhere in the app that is inside any of these components no matter how far nested it is i'll still be able to use that context and access that both the selected company the user and the ability to change the selected company in this video we've done quite a lot over the last week we have added the login for our app and used the amplify apis to allow us to both login using the auth methods as well as then actually access our own apis using again the api methods from amplify this has allowed us to get our own user as well as get our posts for the company that we are working with we've also looked at adding context to the app to be able to share certain bits of data such as the user and the company that is currently selected around basically the whole app this is much easier than passing the actual data into props on every single component as you can access it wherever you want no matter how nested it may be in the next video what we're going to be doing is setting up our registration process this will involve creating a new registration screen but also working with linkedin to allow a user to enter their username and password for linkedin and verify that the post planning guru app is allowed to do posts on their behalf this is a fundamental part of the whole application so it's gonna be really interesting to get that all working so thank you for watching this video and i'll see you in next week's video

Channel: Complete Coding

Views: 346

Keywords: AWS, serverless, Serverless Framework, NodeJS

Id: xpeJ7bURbpw

Length: 25min 18sec (1518 seconds)

Published: Thu Jun 24 2021