AWS Amplify Serverless GraphQL React workshop by Nader Dabit

okay let's start welcome to AWS and our react meetups so as you see AWS just moved here it's I think the third week that they have this room we sounded out some technical problems now we are still waiting for the registration and we brought some additional chairs so I think we're ready to go and I'm especially happy to have la-de-da Beach here so we met at react Europe and I invited it in here and I'm so happy that we could come yeah it's nice to be here and it's also great to have this when you here at AWS Marcus Kaiser is still at the entrance letting people in but thanks Marcus for opening the door for the participants and nada I hand it over to you yeah and we'll just kick it off and we probably won't have time for too many breaks now but I think every half an hour we'll have a break that we can get some some food or drinks yeah I think so yeah we'll take five minutes maybe five to ten-minute breaks where people can use the restroom and also I can maybe walk around the room and catch people up that way I don't have to stop as we're going so thank you for the intro my name is Nader dabit if you want to follow me on twitter that's the only requirement for this workshop so twitter.com slash table at 3 yeah so that's me right there and we're gonna be going over this workshop I've been working with AWS now for about a year and a half I'm a front-end developer I'm a mobile developer I don't consider myself a cloud developer up until a year and a half ago when I joined AWS I'd actually never used AWS when I started there I was more hard for their mobile team which now has become the amplifi team and our entire team does nothing but build tools for mobile and web developers so we're really all about javascript were all about native iOS react native all of these things we're only building tools that allow people to kind of get up and running with these full stack applications using their existing skill set so everything we're going to be covering too is really just JavaScript and everything that we build is focused towards front-end developers it's not focused towards cloud developers I think that makes our team very unique in AWS we don't really speak the AWS like lingo we have a different culture and everything so about me real quick I've written a book on react native called react native in action I'm also writing a second book right now that's available through a rolly called full stacks ever list full stacks Everest touches on some of the stuff we're going over today but also goes into depth around authentication protected routes storage a lot of more complex stuff that we're gonna cover today what we're covering today is mainly focused around graph QL we're going to also cover a little bit on authentication and authorization but it's really kind of a graph QL thing that we're gonna be focusing on today so yeah to get started we're gonna be just reading over this workshop all this is is a github readme all this really is a tutorial that I'm gonna be walking you through if you feel I'm going too slow you know feel free to go ahead and finish this thing in one hour if you if you can if you feel like I'm going too fast and you can't keep up you can actually take this home and work on over the next couple of days you can message me and ask me questions in the next couple of days if you have any questions while you're doing this I don't expect everyone to keep up I don't expect everyone to go as slow as I'm going just kind of go at your own pace and if you have any questions I'm gonna be taking little breaks in between and answering questions so yeah first of all thank you for coming and thanks for everyone that's helping hostess it's a pretty big crowd for a workshop I typically do workshops that are 20 to 30 people and this is much bigger workshops are a little bit more hands-on than a lot of the other things that I do conference talks so we end up having a lot of questions that need to be answered people run into roadblocks I ask of you if you have experience doing any of this stuff and your neighbor has a question and you feel like you can help them out I would appreciate that but if you can't answer the question I'm gonna again be taking little stops throughout this and helping you get get started one cool thing that we added with amplify that we're going to be doing today that I've never done before in a workshop is using on our local testing environment we've built one of the first local graph QL testing tools that I know of for several us graph QL API is I don't think one else has that and it's really nice because you can actually play around with a bunch of different graph QL schema and schemas you can change things like adding authorization and authentication parameters and protecting fields you can do connections you can create different keys on your database and all this stuff locally without having to create anything in your account so the only thing that you're going to be required to do today that's going to be actually creating the service in your account is going to be when you initialize the amplifi project it's going to create an s3 bucket in your account when you run amplify delete after this it's going to delete that so that's going to be gone the only other thing other than that is we're gonna be adding authentication which creates a kognito authentication service in your AWS account kognito is something like all to zero or Aqsa have you ever used one of those and every time you create a new group of users it's called a kognito user pool that's for an application you get up to 50,000 users for free so you don't have to worry about that cost you any money but again if you run amplify delete at the end of this it'll tear that down but think about if you're prototyping and you want to create a bunch of different versions of your app every time you create a new pool of users every time you create a new authentication service essentially you have 50,000 free users so it's really hard to get past that limit and actually get a charge get charged for anything there unless your app has over 50,000 users which is a really good thing anyway so let's go ahead and get started what we're gonna be doing is first step is creating a react app which I'm sure everyone here is familiar with and second we're going to be installing amplify libraries locally and whatever other local dependencies we're going to need third of all we're gonna be then in creating and installing amplify as a global in our CLI I think a lot of the people that got here early have they already done that and been able to configure their CLI if you haven't I am going to walk through that so after we installed the amplify CLI we're gonna configure it and then we're going to run newly amplified project within the react app once we're done with that we can actually then start creating services so for anyone else coming in yeah I think we have some extra chairs over here and for anyone else that didn't already hear this and that is coming in late everyone here is going to be given $15 credit for the AWS account and also some stickers if you didn't get any stickers because you came in late come find me whenever we're done or just come during one of the breaks I'll give you some all right so I'm gonna be going along with you on this workshop and really if you get lost you can literally just copy and paste everything from here step-by-step and you should have a working project I just tested this thing out a few hours ago everything seems to be working so you can create a new react app by using create react up having the global installed using this stuff here or you can use MPX I'm gonna use MPX I'm just going to copy this LAN here and create a new react up using MPX the app that we're going to be building today is a confidence app and we're going to be starting with adding a way to add or like a meetup app you could think of something like that where you have talks each talk has like a speaker and a name of a talk and things like that we're then going to add a way to add authentication to that to that app we're then gonna add a way to have comments that way you can comment on the talks and then we're gonna add authorizations so not only not everyone logged in can actually create a new talk you have to be an admin so we're gonna add different security rules and stuff around it and that's about it I think we might also have time to go into where we create lambda function resolvers for our graph QL API and that way you can actually do a bunch of other stuff but the thing that we're gonna go over is how to interact with a REST API from graph QL which is really cool it's a really good technique for putting over REST API so graph QL so after we create the react up I'm just going to go ahead and change into this and we're gonna go ahead and install all the dependencies we need the dependencies that we're going to be working with or AWS amplify AWS amplify react in UUID you can just paste one of those commands using either yarn or NPM so the three libraries we installed you might have views UUID it does what you think of it it does it just creates a unique ID you've probably used it before you've seen it AWS amplifies the core JavaScript library by hiding behind amplify you can use amplify to do everything just using this one javascript library we also add an additional optional library called AWS amplify react this library adds different components that you can use that are platform specific we support react react native view angular ionic hopefully spelt soon and spelt fans in here there we go but right now we don't but it's coming we just talked about today so we're gonna be using the AWS amplify react library only one time today that's to scaffold out a authentication flow so after those components after all all that stuff has been installed we're going to now install and configure the amplify CLI after that we're gonna initialize a new amplify project and then after that we're gonna take a little break because I think that's going to be a part where some people might run into some issues so to install the CLI we run in p.m. installed - G at AWS amplify seoi so I'll go ahead and copy this and I'm gonna go ahead and run it this should put you on version 3.0 which was released a couple of days ago maybe a week ago any questions while my CLI is installing already had this installed and just running it again to make sure I'm on pace home home pace with everyone here all right so I think a lot of people may already have this installed anyway if you didn't then that stuff should have maybe kind of been finished by now I'm gonna keep on going if you get behind again we're gonna be taking a break just in a second and you should be able to catch up but after we installed the CLI we're going to now configure the COI what this does is it sets a user that you can then create AWS servers services on behalf of I already have a bunch of different users configured with my CLI but I'm gonna go ahead and create another one for this workshop to kind of walk you through how to do that every time you want to amplify configure you add a new user you'll then just have another user to choose from typically what people do is they'll have different users for different regions or different users with different permissions so amplify configure will go ahead and run that this should walk us through these steps here and you should have already you know signed into your AWS account if you haven't it will open your AWS page for you to go ahead and sign in so you need to be signed in after this step here and then you go back to the CLI so you run amplify configure it opens the AWS console and you can jump back to the COI here we're gonna now specify the region I'm gonna go ahead and choose EU central one you can choose whatever region this is probably the best one for here I think this is Frankfort then we're gonna go ahead and set a username this is going to be the username that we're gonna create this user in the AWS account so for this step here I'm gonna go ahead and choose this exact user that I have listed here so we can all be on the same page amplify workshop user this could be whatever you'd like it to be really so this should go ahead and open up the I am which is the identity and access management dashboard in AWS you can just accept everything just click next next next whatever I'm gonna walk through this real quick though this is just populating the username filled with what we filled out in our COI there's two types of users that you can either or or and you can either do programmatic access which allows access from different SDKs you can do the console access which means the person that you're creating this user can actually login as a person on the AWS website and create stuff in the console or you can allow both I would recommend just leaving it as is with programmatic for this user next you have the option to update the different policies that are associated with this user the permissions policies for amplify we end up doing a bunch of different things so we end up using admin access which allows a CL out to create all these different services that we're going to be using we click Next and then we just click Next review and then create user and this will go ahead and give us our access key ID in our secret access key which we're going to need in just a moment what we do is then copy this access key ID over to the command line like this and we paste that there and when you hit enter they'll then prompt you for the secret access key so I'll go ahead and do that and then now we're going to give this a profile name for the local reference to this user the username that we used earlier is the username that's going to be in your AWS account this is going to be the user referencing that account or that user from your local machine I recommend using the same name that way you know what is what I'll just copy to copy this over and then this will set up a new user where is that user live well if you go to AWS you should now ticket stub AWS yeah yeah if you go to dot AWS you should now see a config and a credentials file credentials has the access key ID in the secret access key with the name and then config has the reason in the name and then they're associated from there so if you're wondering like where that stuff is stored if you want to delete it later that's where it is and if you've ever used the AWS CLI you might already be there so so now we're done with that we can now go back to the workshop and we have everything we need now to amplify amplify on it so we're gonna run amplify a net this creates a new amplified project wherever you are willing meeting to work with this typically you'll do this at the root of your mobile app or your web app or whatever you're working with and that's what we're doing here so we're we're gonna run this in the root of our react up so amplify that this is just gonna walk us through a few different steps we're gonna give the project a name I'm gonna go ahead and copy everything from that workshop but you can do whatever you want amplify react up the name for the environment we support multiple environments so we're kind of creating a base environment if you want to then create some new functionality but you don't want to affect your main environment you can then amplify check out env env check out a new environment based on this base environment so I'm gonna go ahead and give this environment a name of dev you can go ahead and choose your Visual Studio code or whatever you're using for your for your text editor and then now the CLI should recognize that you're in a react app and then everything else should be auto-generated if you're in a view app or an angular app or a native iOS or Android app so it should automatically say we're in a react JavaScript with react as the framework should detect the source to build directories and all of these other scripts so you can kind of just hit enter in there in there all the way through and then now it's going to take us to using the AWS profile that we just created a second so we need to now use an AWS profile or choose no and run through those other steps again I would recommend just choosing yes since we already have one and this will prompt you with the list of all the profiles that you have in your machine so I'm gonna go ahead and choose the amplifi workshop user and then this will initialize the amplifi project which will allow us to then go and start creating services so this is going to be our first break so because this is usually a step that kind of for some reason because a lot of times people have different issues with NPM or node or maybe this is their first time using AWS we might run into some issues so we're gonna take a 10-minute break here so we're gonna start back at 10 minutes after the hour and if you feel like going ahead and doing that that's fine if you want to wait that's fine too so I'll go ahead and walk around and answer any questions yeah all right so we are gonna go ahead and move on to the next step and what we're going to do now is we're gonna create a new feature which is basically going to be the API so to do that we're going to need to go ahead and first configure our react project to recognize the amplifi project that we just created so if we go into our project we're going to now see that we have a amplify folder and in this amplify folder is going to be a back-end folder and this back-end folder is where we're going to be writing code in the future that will be our graph QL schema and if we end up adding like lambda functions and stuff like that that's going to go in that back-end folder but for now we don't really have to touch it or anything like that it's just good to know that it's there the current cloud back-end folder is a copy of the backend folder but it's the current representation of what's been deployed from the point of the last time you ran a push command which is something we're gonna look at just a second the push command takes the back-end folder and deploys anything that we've changed up to the NWS account and then at that point after you run amplified the backend folder in the current cloud back in will be in sync if you then make changes to back-end then they'll be out of sync until you run amplify push then they'll come back in sync it's just a way for us to have a representation of what's currently been deployed for deaths you'll also see in the source folder that we have a new file called a double US exports Jas and if we open this file we'll see that right now we only have a object with a single property called AWS underscore project underscore region this is the region based on the user that we use when we ran amplify in it so we see that it should be the same region that we created that user and then this this file is nothing we have to actually touch or change this will be updated by the CLI as we add different features and and things like that so we're going to be adding graph QL API just a moment after you ride the graph QL API and run amplify push will see that this file has been updated when we add authentication we'll see that this file has been updated again and so on and so forth we don't actually write to this file but we do reference it and you're gonna see in this next step we're gonna need to now reference this file to configure the project based on with that what's in that file so we can now go ahead and open up source slash index J s and underneath the last import we can now add these three new lines of code we're going to import the amplifi library we're gonna import that configuration file and then we're just going to call amplified configure we're doing in this at the root level source slash index dodge is once this is done we can now start using everything that is in our amplify project that we're going to be then creating and just the next step I'll go ahead and open this up in my text editor and I'm just going to paste these three lines here and that's all we have to do now so after we've done that we're kind of good to go we can continue on to the next step so we just pasted the import amplify amplify import config and amplify back configure and end XJS under the last import alright so now that we have our react up ready to go we're going to now add the first service that we want to add so we want to add an API we want to add a graph to LAPI so to do that we can run amplify add API the way that we add features is we run amplify ad and the category of the feature what's different about amplify from other AWS tools and services is that we don't need to know all of the stuff about the service backing it at this moment you can go ahead and create things based on what it's about to do for you so for instance we don't say we want to add a kognito user pool we said we want authentication we don't say that we want to add a lambda function and API gateway and all of the code and all this that goes along with that we just say we won't amplify add API that way we can kind of extract away a lot of the verbose the verbosity of what AWS comment is so when you add an API you have the option of adding three three different types of API you can add a graphic UL API which is a p-- sync app sync is what we're going to be using today it's a managed graph two hours of service something like firebase but for graph QL you could also add two different varieties of lambda function with API gateway when you create a lambda function a simplest function you have to have a way to invoke it AWS or lambda in general is kind of part of an event-based architecture typically and the way that you can invoke a lambda function can be a variety of different ways the most popular and what people use when they talk about it a lot of times in our world the fronton world is invoking this lambda function from an HTTP request and you can do that by using something called API gateway but again since we don't really want to know or care about all that stuff we can run the amplifi out API it'll actually just wire up the HTTP endpoint with the lambda function we can then just write the function code and invoke that given the URL that's generated for us so but again we're not going to be really going over creating api's with lambda today we're only focusing on graph QL so let's go ahead and run this and see all the steps that we are taking through so we're gonna run amplify ad API this will go ahead and prompt this we want to use graph QL as the type we're now asked for the name and I'm just going to call this conference API we can now choose either API key or Amazon cogito user pool for now we're just going to choose API key and we're going to update this later when we add authentication the API key just means anyone with a the API key sitting in the header can access this API do we have an annotated graph QL schema if we did have a schema learner to use we could just say yes and reference that location of the file but since we don't we're gonna choose no and then we have the option of a guided schema creation this is a essentially just a set of blueprints or a boilerplates graph QL schemas that you can start with so let's go ahead and choose yes so we can kind of see what's available since we don't have authentication enabled we only have two if you have authentication enabled you also have an example with authentication and fine grained access control authorization so we can either do a single object with fields or one-to-many relationships it really doesn't matter at this point because we're gonna be overriding this anyway but we'll go ahead and choose one or the other and then we can choose yes to go ahead and edit the schema and when we do that they should go ahead and open up the graph QL schema in our text editor and it shows the path of where the schema is gonna live here so if it did it doesn't open for you for whatever reason it should but if it doesn't this location is where that schema lives and what we are started with is a really basic graphic UL schema with just a single type with three fields but we want to do a conference app and this is the type that we're gonna start our app with it's gonna have a an ID field it's going to have a client ID fill this way when we create something from our client we can know who created what we're also going to have a name for the talk a description of the talk the speaker's name and the speaker's bhaiyya so we're going to copy that and paste it here one thing you'll notice it's a little different from from a typical graph to LAPI is that we have this at model directive at model is part of the amplified see lis graph QL transform library which has seven different directives at model is one of those seven directives at model we'll take a base type and generate an entire graph QL API based on a bunch of best practices and assumptions so you can assume when you're creating an API that you won't the crud and list operations that you would need for most api's so you will you want a way to create a talk update delete all those things we create all the schema all the operations for you when you use this ad model we also assume that you want to have subscriptions based on in the events so anytime you create update or delete a talk you might want to have a subscription for that we go ahead and create the subscriptions for you as well we also assume that you need a data source so when you use that model we create a no sequel database for you and then we also create the resolvers that map between all those operations so whenever you create a graph QL API you typically have to write the resolver for creating something the resolver for updating and deleting we make all these assumptions because it's just a lot of boilerplate that you don't have to write you can then go and modify that with any business logic that you'd like or you can continue modifying your schema based on these other directives that we have that we're going to go over later we also have what we're going to go over today is at model I'm sorry at off at auth allowed you to add alter ization rules and we also have at connection which allows you to model relationships sing one-to-many and many-to-many relationships between items but for now we're just going to go with that model and we'll go ahead and save this and we'll go back to the command line and we'll hit enter so if your schema is modeled correctly it should compile successfully you should get this message so what you could do if you wanted to deploy this is run amplified push but we don't want to do that yet you could do that if you want to but we might want to test this thing out and make sure that we we like it before we deploy it and have to do anything different so what we can do now this is a feature that we added just a couple of months ago is we can actually mock all this locally and this will run a graphical editor locally it'll mock the server and it'll also allow us to use a in-memory database sequel Lite so what we can do is basically have the graphical editor up and create mutations subscriptions all these different things queries without having to create anything in our account which is really nice so let's go ahead and run amplify mock API and we'll go ahead and test this thing out this amplifier mock API is going to now look and introspect our schema and walk us through a few different steps so what it's going to ask us if we would like cogeneration for our local project because all of the operations that we need to use if you're using those from the client you need to have a definition for those so we can either generate these in typescript flow or JavaScript I'm gonna go ahead and choose JavaScript we can choose the name and the location of the files that we're about to generate I'm gonna go ahead and choose the default because that's exactly where I want them to live we already have this SRC directory so we're now gonna have a new directory called graph QL and we're going to now have a slash mutation slops subscription slash queries dot drop graph QL I guess files there so we have that now we can choose how deep we want these operations to go I think to actually it's going to ask us if we want everything created well go ahead and choose yes and then how deeply nested is what we want we'll go ahead and choose the default for that which is tooth so that's going to go ahead and mock the API and we should now be given an endpoint that we can test locally so I'm going to go ahead and open that in point and we see that we have a graphical editor here and something that's cool that we implemented if you've ever used one graph one graph is a really really nice graph QL service that allows you to kind of implement graph QL api's on top of traditionally rest ap is so they have all of these different ways to do things like Twilio and all this other stuff we worked with one graph to actually use there they have some really nice developer experience built in and over here we can see that we can add different operations without actually having to write them out ourselves so what we want to do is we want to go ahead and first create a mutation because we want to query for things in just a moment but in order for the query for those things we need to have something there so I've already written out a few mutations you can use these or you can write your own for the sake of time I'm just gonna go ahead and copy these and use them here so I'm gonna go ahead and create our first mutation I want to go ahead and create a talk so I've been pasted out there it just has some information about the talk and we go ahead and click that and now we see that the mutation is successful because we returned an ID a name a description speaker name and speaker bio you might wonder where this ID came from considering we didn't pass that in as an argument the resolvers that we automatically generate detect whether or not an ID has been passed in if there is an ID passed in we use that ID if there isn't when we automatically generate one for you on the server that way you know you don't have to pass women if you don't want to I'll go ahead and create one more talk so now we have one talk about react to one talk about graph QL so we created those two talk let's go ahead and query for these talks so I'm gonna go ahead and actually instead of pasting on I'm gonna go ahead and use the editor over here on the left so I'm gonna click add new query I'll go ahead and click list talks I want to get the items array back I want to return the description the ID the name the speaker bio and the speaker name so as I'm selecting these you know we see that the fields get populated so I can go ahead and run my query and we now see that we have those items come back for a for us so we're we're actually referencing those items from our local database and they are there the next thing we might want to do is have some type of search capability for this list so we might want to only search for talks that have a certain speaker or a certain topic so we can actually pass in a filter and the filter can be on any of the fields and any of the fields filters can be one of about a dozen different types so you can do operators on contains begins with greater than equal to a lot of mathematical stuff so it's pretty nice for different data access patterns on your graph QL API because begins with allows you to do something that's pretty interesting in the no sequel world where you can have these composite keys is what they call them where you add different fields onto a key so you can have different query ability on a single field in your database basically compounding that query as you go it's kind of hard to to show without actually going into it but it's a really powerful you know thing so what I'm going to do is I'm going to go ahead and create a new query called list talks with filter and maybe I only want to see the talks about graph QL and it looks like I've graphed you all on both of these so let's go with react so we see that when we run the list talks with filter we only get the react talks back but if we run the query the regular query get everything back so the filter is working and all that stuff is good to go and now we might want to use this new API in our react app so since we have this mock server already running we can actually talk to this server just like if it was a LOF server we can actually talk to this thing from our react app so what I'm gonna do is I'm gonna go to our project that we have here and I'm gonna go ahead and open up our aw s exports file and what you're going to notice is that while this mock server is running we actually have that HTTP endpoint reference in this file when we stop that server this file gets updated so whenever we're running the server we can actually basically be referencing that from here just something to note so let's go ahead and go to the next step which is going to be interacting with the API from our client app so what we want to do is since we have a couple of talks already there let's go ahead and query for those talks and have those listed in our app and we're going to be working with hooks and in here and if this is your first time working with hooks then that's great but even if you've used it before we're gonna be going over some basic stuff with hooks and also some advanced stuff when I say advanced I'm really talking about reducers so here who here is already using hooks okay cool so that's perfect a lot of people have using it a lot of them aren't using it so the good thing about this is you can literally just copy and paste this code it's gonna work you're not gonna get too too lost but I will try to go over exactly what's going on real quick the three hooks we're going to be using or use affect use state and use reducer the first one we're going to be going over is using the query and here we're only going to be needing use effects and you state you state is just using state you know just like it sounds instead of using set state and update all this stuff we're going to be using a way using you state and use effect is essentially component did mount and use use effect essentially just runs on the component mounting and then it also will optionally run on update so it could be a replacement for should component update so we import those hooks and we import react ok and I'm going to walk through this code before I copy it just so you actually know what's going on we then import our query from graph QL if you remember when we created this API locally we told our CLI we wanted to have that graph QL code generated locally so you'll now see that we have this graph QL folder here and you'll see that we have all these different operations created for us so we don't have to write any of this code it's all there for us so now we can just import it so that's pretty nice so we're importing the code that's already there we then import two operations from AWS amplify or to API is I guess the one of the API is is called API so that's that's one of them API can be used to talk to API gateway or apps Inc so you can call different types of methods on this API API so I hate saying that anyway so you can call API dot get API that put post delete you can also call API that graph QL so that's we're going to be doing if you've ever used Apollo you might have used graph QL tag or you might have used something like graticule type which basically takes a graph QL operation and turns it into ast and that's what we're doing here also we have something called graph QL operation which allows us to take this query and wrap it in a function and then it just worked we don't have to do a lot of you know extra work so that's the those are the imports before we render we're going to be running through these three these three things here we're first gonna create a empty array in our state called talks so talks is going to be in equal to this empty array we do that by calling you state and you state returns a piece of data and then it also returns a function that can change that data so the function that we're gonna be returning is we're gonna we're gonna call this update talk so you can call this whatever you want we're gonna be returning the talks array which is empty and then update talks to update that empty array use effect or component did mount will be triggered when this renders and what we do is we call a function called get data and this is going to be when we're interacting with the graph QL API this is the get data function it's an asynchronous function so we have trycatch and these three lines is what's going on actually really two lines the first thing we do is we call API graph QL so I mentioned you can call get put post delete or graph QL we're calling API to graph QL we're then passing in the graph QL operation and the actual graph QL operation so we're actually passing in that graph QL operation helper in the query so this is a sync so once it's returned we'll have a variable that I'm calling talk data and this talk data has a few different properties on it so we can do pagination so we have the data list talks you can either call dot next token to get the new item in the in the pagination for the next key or if you just want the array of data you can call items so that's what I'm doing here I'm getting that items array and I'm calling update tox updating this array with that array of the array of talks in fact there's no data in your database they'll just come back as an empty array and then we're doing something pretty simple here we're just mapping over all the talks passing in the speaker name the name of the talk in the description so what I'm gonna do is just copy all this I'm gonna go into apt is and I'm gonna just save that it's the code we just looked at and now we need to run an NPM start does it by another shortcut for this Fork area to me for the terminal I'll just do this control or well so let's go ahead and run this NPM start so we now have two servers running we have our graph QL server we have our react app server notice I'll leave out any styling at all because if we add it styling it would just be a lot of extra code and we don't want all that stuff so we'll see that the same data that we query for here these two talks Kent comes back here so that's working if we look at the data that comes back from our API log to the console here we'll see that we have a list talks array or list talks object and then the next token the next token is null because there's nothing left in our database we only have two items so queries are working the next thing we want to do is look at some mutations so what we're gonna do is we're gonna add mutations and we're gonna then take like another 10-minute break or so so what we're going to do now is refactor our youth state into something called use reducer and use reducer is very similar to redux if you've ever used Redux what you end up having is a reducer and the reducer is structured exactly like a Redux reducer you didn't you basically have an action and you have some state you switch on the action type and you update the state so let's walk through all this real quick starting back at the top of the file we're going to now import user reducer and the reason i'm actually using use reducer it's not just to be fun and fancy it's actually because we're using we're basically creating a WebSocket connection in the next what we're doing a subscription and we have a closure that's not going to work with you state if you've ever done something like a set timeout and inside of you state you might have run into this issue before and it's like probably the biggest complaint about hooks it doesn't work with it doesn't work at all you have to we have to take that state and move it into a reducer for it to actually work so that's why we're starting with the reducer on this step so it doesn't get super complex in the next step so instead of importing you state we're importing user this sir we keep the same imports from amplify we have API and graph QL operation we're now importing a new component from UUID and we want to create a unique identifier to identify the person creating the operation because we need a way to identify who that user is we don't have any authentication information we want to have a representation of this client we do that because when we create subscriptions in the next step we don't want to subscribe to our own data changes we want to be able to discard duplicate data the only way to do that is to know who is the one that created the data and one way to do that is by using something like this and we attach this ID whenever we create a mutation we then have another import for our mutation so we're now importing our query and our mutation the mutation that we want to create talked we then create a client ID using that UUID libraries that's a constant we then take our state our talks array that we had earlier right here we move that into a state object that we're calling the initial state and we need a way to set State on a form and we also need a way to reference those talks and actually you know when you get with this much state it's not a bad idea to get used to using user history anyway because you end up having just less code and stuff like that I guess polluting the main the main function so we need a way to keep up with the name of the talk the description of the talk the speaker name the speaker bio so we pretty much just set all of those two empty strings and we create this talks array so that's going to be our initial state we have now three actions that we're going to be working with and reducer we need a way to set the tox when the data comes back from the API so in the last step we called API to graph QL and then we updated the local state by using that update tox function here we're instead returning a new a new state using the existing state and then we're just resetting the tox array to the new data that's going to be passed in from the action so this action that talks is going to be the API that graph QL response where we called talk data that talks that list list talks that items I mean so so when we set the tox we're basically just setting the tox array we also want a way to set the user input as as they type the way that we do that is we have a set input action we return the existing state again and we have also the key and the value so we're going to have a form the form is going to be passing in something like description value of the input speaker by a value of the input so that's kind of what's going on here we're setting we're setting this form data here that's happening right here and then the last thing we want to do is have a way to just clear everything because when we create a new talk we want to just clear out the input the one way to do that is to just return all that initial state which would be these four empty values here and then just taking the talks array and leading that as is so this is kind of a concise way to reset the state so that's what's going on in the reducer now to use that reducer we're gonna call use reducer passing in the reducer function and the initial state the reducer is the first argument the initial state is the second argument and that gives us the state of this component that we can store in whatever variable we'd like to call I'm just calling that state and then you can and then we have a function that allows us to update the state that I'm calling dispatch any time we call dispatch or whatever you call this you can whatever you'd like to you we're gonna be passing in an object with an action property and whatever other properties so you notice that we're switching on this action when we call dispatch we're basically just saying the calling the dispatch function and passing in that object the object is going to have a type and then we're gonna pass in whatever other information we want as the other values so we also have the same use effect as we did in the last the last section where we basically just have a component in mount where we're gonna then call the API and get data we call API digraph ql just like we did before and then here instead of calling update talks we now just dispatch these set talks action and then we set the talks set to the data coming back from the API so this is a pretty pretty lot a lot going on in your gonna I've compared to the last step the last thing we want to look at is how can we now create the talk using the new create talk mutation what what is essentially going on here we can kind of jump to this line right here we're calling API graph QL with the graph QL operation and we're passing in the create talk you know mutation and here instead of just passing in one argument we're passing in two arguments so in the mutation we need to actually pass in an input containing all the information about the talk and what we do is we create a talk variable using all of the information off of that state so we d-struct your name description speaker bio and speak our name off of the state we check to make sure that none of these values are empty we then create a new variable called talk that contains all of that other state along with a client ID we do an optimistic response where we basically create a new variable called talks because we don't want to wait for that API call to return we want to go ahead and update the local the local UI for us to to do that so we then dispatch to actions before we called the API we first set the new tox array and then we clear the input and then only after that is when we actually call the API and what you would typically do in a real-world app would be in this catch block you might have a notification that lets the user know that that action didn't work and then you might even take that talk back out of that array and reset the dead local state and then that's really about it the only thing that we might go over other than here this is just some basic form stuff is the own change handler when we're calling set input if you remember in the reducer we have action key and action value here and the own change channel over pat we're passing in the key as the name of the input and the value as the value of the input and here you see we have a name attached that gets passed in as a target name and we have the value passed in that's not the value actually the value is coming in from the user typing that's going to be this property here so again we should be able to go ahead and copy this probably gonna run this server here instead so now we have a beautiful form here so let's go ahead and see if this works so we want to go ahead and create a new talk oh wait this is the name of the dog alright so now we go ahead and create talk we see that the the input fields clear out we see the local state is updated it's go and refresh to make sure that that's there and it is indeed and now if we go back to our graph QL server and we run the list talks we should now see that we have our new mutation there so the mutations are working the queries are working and the last thing we want to touch on our subscriptions and then we'll start getting into some more complex stuff around authentication and authorization so I think now is a good time we'll take a 10-minute break who does that sound like any of you think ten minutes yeah okay I know I was going kind of fast there but I was really just talking over the code again it's all copy and paste if you want to follow along so we'll take a ten minute break and we'll be back at five minutes before the hour has anyone hit the air that says max retries hit for starting dynamo DB emulator are you doing at that Java version or something did you do that work um if anyone doesn't get it does get that air and they want to follow along they can just run amplify push which will also create the services in your account and then at the end you can just want to implicate to delete everything that's one one workaround for now yeah or you can update the jus version of Java I think someone had an answer for mocking API err did someone have they that have a fix for that what was the fix do you mind telling everyone here so for the API monk error it's brew cask installed Java it works it's his I think the Java version just might be out of date because I'm pretty sure most people already have Java ok so I think we're gonna continue on and we're gonna try to get out of here within the next hour so at the 10 o'clock we should be done with what I intended to get done we're not gonna finish the entire workshop but I think we're gonna stop it right before we get into lambda function resolvers which is kind of more advanced feature that we weren't really intending on covering but it is all covered here so you know if you end up leading early or if you end up leaving and you want to continue on you know feel free to continue on but the thing we want to add now is subscriptions and subscriptions or you know the real-time aspect of graph QL the really cool part about what appsync does is it allows you to set up some of this more complex stuff that you might have had to spend a lot of time on your own managing and dealing with we kind of do that for you and before we continue on let's take a look at some of the code that was generated because a lot of the stuff we're doing now if you're new to amplify it probably seems kind of like magic so let's jump into the amplify folder and look at the backend folder and kind of get a more a better idea of what's going on so in this back-end folder we're gonna have a list of all the different features that we've been able Daz we start adding those right now the only thing that we've added to this project is a graph QL API so you'll have an API folder with all the different api's in that folder that we've created right now we only have a single API so you see that in the backend API folder we only have this one API if we added additional API as you would see a list of different API so now we want to go into this API itself and see what what's there the main thing that we're going to be working with is the schema so here's the graph QL schema we're gonna be updating and modifying this as we go once we're ready to deploy this and we're unamplified push you're going to see or if we're running a mock you're gonna see that the build folder is populated as well with our resolvers that were automatically written for us and additional things that we can modify as we get more advanced but essentially you know in the API conference API grah schema dygraf ql this is how you can continue to kind of update your schema and modify it as your app progresses so whenever you want to deploy this would run amplify push whenever you wanted to modify a field or add a new type or delete a type you would then remove that from this schema and then run amplify push again and that would then update your back-end so we're not gonna be touching this right here right now but we are on the next step I figured I'll just go over it but we want to do now is run our graph QL subscriptions so we're gonna go ahead and do that and we need to do three main things to make our app have real time the first thing we need to do is import the subscription definition and that is located at graph QL sub slash subscriptions and we're going to import the own create talk so we can subscribe to own create own delete or own update the only thing that we're worried about so far is own create we want to subscribe when someone creates a talk we then want to add a new case to our reducer the only thing that's changed in this reducer versus the old reducer as the these two lives here we add a new case for adding a new talk and what we want to do as we want to take the existing state we want to then take the existing stalks and spread those into a new array so we're just saying we want to take the old stalks drop those in the new array and then add the new talk coming in that from the subscription and to that array and we're using this in the reducer because we're doing a we're basically going to have a closure here when we run the subscription so we just do the ad talk and our reducer and then we have to go ahead and create the subscription and we do that and use effect and you can actually just copy this into the existing user effect hook that you already have and what we're going to do is create a variable called subscription and here we're going to call API graph QL just like we've done in the past earlier we did API graph QL passing in a query a mutation now we're passing in a subscription the main difference is when you're passing in a subscription it's not going to be in a synchronous or a promise it's not going to be an asynchronous operation instead we're gonna then change this dot SUBSCRIBE function to it dot SUBSCRIBE allows us to specify a next function which fires anytime this subscription is triggered so we're gonna say when someone creates a talk we want to call this next function the next function gets the talk data passed in as an argument and then it's kind of on us to handle that new data as it comes through so say a hundred people have this at this app open someone creates a new talk we're subscribed to it this next function will fire and all the other clients listening will then take this data and we need to update our local state in some way the way that we do that is we call the add talk we've dispatched the add talk type and we pass in the talk that we retrieve off of this event data and then that populates the array where does that data come from or that talk come from well event data has a value property which has a data property and then from the data property we want the own create talk which is going to just be that single representation of the talk she's going to be that object that contains the client ID the ID and all that other information we then check to see if the client ID is equal to the talk client ID because we want to make sure that if we were the one that created this talk we don't update that array again because we created an optimistic response and the last step where we went ahead and assumed that this operation wasn't going to succeed we populate the array and we set state if we created this talk we're going to discard that talk we're actually just going to return from the function we're just not going to go to this next step if we were not the one that created this talk then we will update the array so let's go ahead and test this out I'm going to go ahead and copy well let me start by just copying these one at a time so I'm gonna go ahead and copy the subscriptions definition for the subscriptions import and I'm going to go to the area where we've created the imports for the other mutation and queries so I'll go ahead and paste that there next I'm going to take this new case and add it to our reducer and then the last step is going to be taking this subscription and then setting it up in our use affect took so I'm going to go to use effects the load get data and just paste this in and then if we want to have something like component dead or will unmount we can then return a function to clean up whatever listeners that we have in this case we have a subscription so we're going to say to subscription not unsubscribe this is essentially what component will unmount does ok so we say that we should now have our subscriptions enabled so to test that out there's a couple of ways you can do it I guess one way would be to trigger a new mutation from the graphical editor I haven't tried this yet but I'm assuming it should work so I'm going to go ahead and go to create a new talk here if this doesn't work I'm just gonna create a new window and and test it out so I'm gonna say jello and we're gonna create a new table alright works so you'll see that as we create that new talk we don't have to update the UI on the Left automatically gets updated so let's go ahead and let's go ahead and now delete a couple of talks because now we have a lot going on so I'm gonna go ahead gene mutation and I'm gonna go ahead and list all the talks and we're gonna go ahead and do the delete talk mutation all right so I've deleted all the talks now if i refresh should see that there are no talks you go ahead and add a new one again so we can test out and look at the subscription happening again for anyone I missed it egg crate talk we see that it gets updated there so the subscriptions are working the next thing we'll do is we'll look at how to add authentication now to our API because right now anyone can access this it's just an open API because anyone with an API key can hit it and it's not very secure so what we're going to start with is a very basic form of authorization it's just going to be generic authorization meaning if someone hasn't signed in it can't access this API at all we're gonna then go into fine-grain access control saying that certain fields or certain people that haven't created a field or a type cannot access it and then we're gonna look at group authorization saying if someone is like not an admin they can't do these different operations kind of covering all the different use cases around authorization and we're going to do that using those graph QL directives that we looked at earlier like at model we're gonna be using the app pause so to add authentication we first need to have some type of authentication service or authentication provider and again if you've ever use something like octa or all-zero you you're you familiar with the idea of authorization as a service we have something called kognito and that's what is working under the hood with the amplifier so to add authentication we can just try to amplify ad off and I'm going to go ahead and keep all my stuff open and just add this in the new window so amplify that off and I'm going to show a version of this we're gonna go I'm getting ahead of myself but someone created something pretty cool today I'm going to show you all so amplified off we're gonna go with the default configuration you can do a bunch of different stuff at this point to configure your authorization to be how you like it I guess you can do things like set password security you can set the MFA messages you can set different roles around the passwords you can ask for more metadata from the user by doing the manual configuration but we want the default configuration since it's a workshop or kind of you know trying to go fast make it easy but the default configuration is actually shipped in a lot of production apps even from in our enterprise customers and what it does is it kind of starts with a smart set of defaults so it gives you multi-factor authentication on sign up and then username and password on sign and so we're gonna choose default we can choose how we want the user to sign in I'm just going to choose username it's pretty intuitive and then we can continue on with more advanced settings or we can just choose no I'm going to choose no and take what we have here which is a pretty nice set up so now we have this authentication service configured locally in just a moment we're going to need to deploy this and we can either run amplify push to deploy everything but we don't really want to deploy our graphic you API yet so we'll look at how to just deploy the authentication so to implement the authentication in our react app that's kind of the next step we're going to need to now use the width Authenticator hardware component which is something we're about to kind of take a look at now and there's a couple of different ways to use this authentication service so we've created the authentication service we're gonna go ahead and now look at how we can actually interact with it we can use the raw authentication api's from amplifi which has 30 something different methods for calling methods like auth dot sign-in all that sign up all that forgot password all that normal authorization stuff that you would want we also have a few components that we cap late a lot of this stuff for you to kind of get up and running quickly and that's what we're going to use today the with authenticator higher-order component from a profile react so I'm just going to copy that and go to app GS and we're going to go ahead and just go to the top and under our last import from amplify we'll just now import this with Authenticator and this comes from amplify react not amplify because this is a react specific component we then want to change our default export to be the width Authenticator higher order component passing in the app as the first argument and we have a configuration object as a second argument the configuration we're going to be passing in for right now is only a single property called include greetings this gives us a greeting with our username and a sign out button that's kind of an easy way to add a sign out button you can also configure the styling and what is inside of this component within this configuration but for now we don't want to do too much we're just going to go to the bottom and change the default export to be this with Authenticator so I'm gonna go ahead and save that and go back to the app and what you're going to see once you save the app is that you now have this sign-in flow in front of your account but before we can use that we need to go ahead and mock the API again because we need to actually be able to use that authentication service and earlier we ran amplify mock API if we're gonna mop the mock the entire project we can just run amplify mock and this is going to mock not only the authentication but also the API is anything else that we have like lambda functions for us to mock the API we actually I mean the authentication service we actually have to create this and I think I mentioned at the beginning of this we're going to be creating one service that's this authentication service so that's happening now so it's going to ask us are we sure we want to continue we'll choose yes and this is going to go ahead and create the authentication service and while that's running I wanted to quickly show you someone tweeted out or messaged me earlier with something pretty cool they took this with authenticator complainant can be stopped and looked however you like it someone made it look pretty sweet this is an example of it so they took the width Authenticator added I think it's like five or six different styles and made it look like this which is pretty tired so with two lines of code you get the structure of this and I think with another 20 or 30 lines of code you made it look like this which is the full user name and password flow which is pretty pretty nice and I think you tweeted out the code below this yeah this is the code that made it work so yeah if you're interested in that you can check that out yeah so this is going to take a couple seconds I'm gonna grab some more water while that's running [Applause] [Applause] all right so after the after the authorization or authentication service is created then the new Mach endpoints go ahead and be opened up and ready for you to use before we look at that and while people are maybe still waiting for their stuff to compile how do you actually see the services that you're creating in your AWS account because now we're just all local we haven't even opened our AWS console since we created the IEM user if you ever want to go in there and look at anything you can run amplify console and then the name of the feature so we only have authentication created so I'm going to run the amplify console all this we'll go ahead and open up our authentication service and you know the exact place that needs to be so you can actually look at stuff the user pool is really what we're worried about this has all the users and stuff so if you want to look at that you just run amplify console off this will take you here and once you sign users in and stuff you'll see all their information here but anyway so let's go back now we want to go back and look at our mock endpoint start off with the clean you know editor and we want to go ahead and now use this authentication service and we want to be able to now show how the endpoint is going to be authenticated in the next step so let's go ahead and first create a new account [Applause] all right so this is gonna go ahead and create an account and we should now have an MFA code sent to us via email to whatever email address you use so you can enter the code here and we should now be able to sign in [Applause] okay that's great our authentication is up and running but our graph QL API is still set to API key because we haven't actually changed that part we've prayed the authentication service how can we like why are the two together also you'll notice that we have this sign out button this is from that second argument we passed two with Authenticator what we want to do is we want to reconfigure the graph QL API so we can run the amplifi configure API and wow that's before I keep going I just want to jump to the documentation to show that all of the stuff that I'm going over is in this documentation I'm not really jumping ahead I am skipping over a couple of steps because of time but if you want to access the currently logged in users data after they're signed in you can run this code here which is under access and user data in between the amplifi mock and the stuff that I'm going over now the step that I'm going over now is adding authorization to the graph QL API amplify configure API I ran that here and now we can now choose API we want to configure and we can choose the authorization type that we want to set so we already own API key I'm going to now change that to Amazon kognito user pool so our graph QL schema has now recompile we've been running amplifying mock now we want to now test out can we still access this endpoint if we're not signed in because we should not be able to write it's not set to API key anymore it's now set to cognitive user pools so if i refresh the data is there plus sign out and I go back to our app Jes and I update the default explore could just be the app and I refresh we should now see that no data comes back if we inspect we should now see an error letting us know while we can't we can access the API there's no current user that means we can't access it so if I go back and refresh that again you sign in you should notice that the data it does come back so the data is there but when we sign out we try to access it again then we get in there so our end point is now authenticated that means that it's not open anymore for anyone they have to be signed in so so that's that step so now that our API is authenticated how can we start adding authorization rules around the person that's currently signed in and that's we're gonna look at next so what we're going to be using is the auth directed the the off directive is really really powerful it's the second most powerful and my opinion most interesting directive that you can use you can decorate a field or a type with off and then with auth you can pass in different roles based on what you want to be off the authorial Thora's about that field or that type so one of the most basic things that you can do is just pass in rules and then allow owner which means the person that created the field or the type is the only person that can read rights update or delete or anything for that field so typically what you see a lot of people doing for using this allow owner role is either doing the full thing just leaving it as is because you need a field or a type to only be accessed by the user that created it or in a case of something like a blog where you want the Dana readable about the person that created it but also everyone else you can actually pass in another argument that sets different upper graft well operations to not have any authorization rules so we're going to start with just allowing the owner to access a single field and we're going to kind of like take that and make it a little more advanced so the first thing we want to change is we want to add a new field called speaker phone number and we want to maybe collect this information because we want to be able to communicate with the speaker because we're like running this conference but we don't want this private information available to all of the people that are accessing the app and maybe we want to only allow the person that created this to have that for now and have them the ability to also update it and things like that so we're going to have this new field called speaker phone so we'll go to our graph QL schema and we'll add this new field and we'll save you should see that you have the server re updated with a live update and we should now be able to go and look at our graph graphical Explorer and we should be able to now try to query the phone number from an old API we should get from one of the old pieces of data and we should get errors because we're not the person that created that so let's go ahead and just see what that actually looks like so what I'm gonna do is I guess I'll go ahead and write this by hand we'll go ahead and create a new mutation call create talk and then we'll list the talks and try to get the phone number of the user so now that we're authorized you know we're mocking making basically authorization through the graphical editor there's now going to be an off button here and all it allows you to set a currently login simulated user so right now it's set to user 1 and some basic email address I'm gonna go ahead and maybe change back to dabit 3 and just came up with some email address it doesn't really matter and this we could click generate token they'll just generate the new token so I want to go ahead and create a new a new talk I want to include my phone number or the phone number and I'm going to return you know all this data back and I'm gonna start by we're not not returning the phone number and this this should work [Applause] all right so mutation now we're gonna add our query we're gonna call list talks we're going to just get maybe a few fields we see that everything comes back fine now let's try to access the phone numbers for everyone there you'll notice that we have we have an error and anywhere that a speaker phone number or should have been is null and we're just let there just we're just letting the user know that we're gonna authorize to access that field because we were out the one that created it up let's now try to make a mutation to that that field yes this is for us we created this one so you're able to access what you created but you're just not able to access what other people created basically so since we are the owner we're able to access it and we're gonna look at next like in practice you would have two roles usually around something like this we'd have an admin role or a group role and you would have an owner role because you want maybe an admin like I am the conference organiser I want to be able to see this also but the user that created it maybe wanna will they want to have access it to it to update their phone number if it changes or something like that so you end up having an admin role and then you have an user role for the person I created it well actually I'm gonna I'm gonna Jenna I'm gonna demonstrate the updating when we actually get to a type authorization which makes a little more sense anyway so field based authorization we're basically just setting these alter rules on a field now let's look at moral tools and also how to kind of change those all tools the next thing we want to do is how can we add authorization rolls around an entire type what we want to do next is we want to be able to have a way for people to comment on each talk during the conference and we want to scope that comment to a talk in just a moment but we also want to have a way for everyone to be able to read the comment but the person that created the comment only they can delete or modify a comment right because that makes sense in the context of most comments mechanisms you want to be able to have other people read the comments but you don't want to have people that didn't create that comment update or delete so what we're going to do is we're going to take that all tool where we set allow Luna and we're gonna add a couple of new fields to it we want to add a queries declaration or basically setting the authorization rules to know own queries which means anyone can now access all the comments and then we want to set who the owner or what the owner field is set to you and since we have a created by field we want to go ahead and set the created by field is the owner field which essentially means we don't have to actually explicitly pass there the owner into the argument it's going to be read off of the claims set in the JWT that's passed over the wire so it's a very secure way to that's basically sets ownership because we don't want to have someone be able to create a comment for someone else we want to make sure that the logged in user is the actual one set creating that comment and setting that created about field so we're reading the created by off of the JWT for the sign and user essentially so let's go ahead and copy this schema and add it to our existing schema and for for right now I might just go ahead and remove this speakerphone or you can leave it the only thing if you say that now it's gonna cause an error for the current data that you're reading in your react up because we are querying for all of the data including the phone number so I'm gonna go ahead and save that and we should now see that the server updates and now let's go ahead and try that out so I'm going to go ahead and read all of the talks and I'm gonna go ahead and move the phone so here I think this is it I just do this speaker phone that's what it is all right so we have two talks let's now create a comment on one of the talks well actually for now we're not even worried about that let's just create a regular comment so let's go ahead and go to mutations will do it's gonna refresh this we're going to go ahead and create a new talk so we got to create I'm sorry a crate comment and we'll add a ID and a message actually we'll just add a message and we'll return the created by the ID of the message so the only argument we're passing into the create talk is the message we'll call this great talk now I'll go ahead and create that mutation so that's our first comment I want to now sign out and sign in as a new user so I'm going to change the JWT to be debit for and now I'm gonna say yeah awesome talk so I'm creating two mutations now we want to go ahead and list all of the - all the comments so I'm gonna do a query for list comments and I want to return all the information so we're able to read all of the talks now let's try to update the talk for the person that we are not so I want to update the comment for dabit 3 so what I'm going to do is get a mutation I'm gonna go to update comments and I'm gonna return ID message and created by so the ID is that I might add a message that says something weird like this talk sucks and if we run mutation now we're trying to update someone else's comment and when we do that we see that we have an error that says the condition will request failed this is basically saying that we are not the owner of that so let's go ahead and run another query and update the talk or the comment that we created so we'll change that field to be the ID of one of the comments that we created and when we run that we see that that actually succeeds so now if we list all the talks that talk that we updated you know what's our the comment that we updated was updated but not the comment that we didn't update so what that basically did is it allows only the owner to update delete or change and it allows anyone to query and it sets the owner field to be the perks and that's currently logged in and if you see that we have dabit 3 we never passed that in and it was kind of just read off from betoken the next thing we want to look at is how to now take the talks in the comments and have those relationships built in we want to be able to say we want to create a comment for a talk and then we want to run a query that lists all of the comments and the talk and all of its comments essentially so the way that we do that is we add a new field on talk call it comments this way we can query you for the talk and the comments for the talk and then we take a new directive called at connection and we set a name that references the talk property that we're going to be kind of associating with the comment so we add two new properties really well actually we yeah we have two new properties we have this comments field on talked we had the talk field on comment and we're setting the add connection to be referenced as the same on each one so now when we save that we go back to our graph QL schema and we say that we're going to now delete the old database the old data that we have locally because what we're essentially doing here is we're adding a a secondary index to the comment database and it's not going to work with our old data so I'll go ahead and run this command here and all the mock data is in the amplifi folder under this mock data folder and anytime you want to clean it out you can just run you can just delete that folder so we deleted that now let's go ahead and run the mock command again this will generate a new database a new database with all of that stuff for us and I'm gonna go ahead and copy these operations and we're gonna kind of just paste those in to help us get faster so I want to do is create a talk create a comment and then list all the talks so I'm just going to paste all this stuff in and walk through it creating the talk is the same thing that we had done before we're now being able to create a comment on a individual talk by taking the ID of the talk and passing that in as the argument for the comment and here we have a field call a comment Talk ID and that allows us to create a comment for that talk and now we can list all the comments from a single talk by listing by calling the list talks query and we now have a new new field on own the items array called comments and then here we can get all of the messages for that talk so I can go ahead and create another message another comment and when we list the talks we now see that we have two comments so we now have an association between the talk and the comments the last thing we want to look at is group authorization and this is like the combination of group authorization and fine-grained access control is really the sweet spot for most applications what you typically want is a way for some type of administrative access so how can we add that well since the authorization rules is an array you can kind of add more than one rule to each all type so what we're doing right now is just setting a single rule but if you wanted to allow the owner and allow admins you could do that or if you just want to let admins do this in the case of a conference out this is what makes the most sense is we only want an admin to add a talk right we don't want any logged in user to be able to do that but we do want any logged in user to be able to create a comment so that's what this schema allows us to do it allows only people that are in the admin group to be able to do anything as far as the creation is concerned but it allows everyone to read so instead of the same allow owner we're saying allow groups we then set an array of groups this groups array can either be set here or it can be referenced from a field coming from the database so if this groups array is dynamic and you have it stored in your database you can instead set that here and then read it from here the last thing we want to do is make sure that all the talks are readable by anyone so we set queries to null and then we are ready to go so we set this comment type that has the same as what we had before so we should be able to go ahead and copy this new schema and update it and we should be able to go ahead and refresh and what I want to do is go back to yeah try to create a new talk and if you look here I am not an admin so when I try to create a talk I get unauthorized I'm not allowed to do that I want to now turn myself into an admin so I can go ahead and set the group here by just setting the group name I would like to be a part of I generated a new token and then now you should be able to create a new group when if there's something going on I think I need a remark hmm the baby one I didn't need to remove that again no I think I'm relieved it already let's let's try that again I guess I do I think that might be what I need to do hold on I wouldn't make sense bow me try that nice he seems to be able to what stir in Java again yeah there we go yeah it must have been something in that old data so I'm allowed to create one now let's go ahead and remove the admin and make sure that this is all working right so I should oh I think I know what it was I created one with this ID already and I was trying to write to the same ID because I wasn't I wasn't using a dynamic ID which is what I should have okay so now I should be able to not create another talk and authorize I'll go back and make myself an admin again then I'm able to so I'm the the other I think the air for sure was I was basically trying to write over an idea where we already had the ID so I guess we if we want to keep going I know we're going kind of fast and some a lot of people haven't been kept you know going along but the last thing maybe we since we have another 15 minutes or so we'll go Orlando resolvers and essentially what we're able to do here is instead of a what's happening right now is our resolver is talking directly to Don about unique to a database what a lot of times people are doing is having a third party API or you want to do something in a function and you don't want to be tied to a specific data source and I'm going to do a lot more there we can set a lambda function as the resolver and that's kind of what we're gonna do do here so we're gonna add a new lambda function we're gonna then write the function code and then we're gonna then test it out and then we we should be kind of there on time so what I'm going to do is go to my project and run the amplifi add function and here we're going to be walk through what we want to do I'm going to be creating a cryptocurrency API using a existing REST API so we're gonna basically have this graph you all query run with some arguments maybe hit a REST API and then return the data back to three graph QL I'll call the same thing as the name of the lambda function is local reference to it we can then choose a template similar to our graph QL schema we could start whatever we'd like we're just going to start off with the hello world function and we can access other resources using this function so for instance if you had some other services enabled dynamodb you could reference those but we don't so I'm going to choose no and then I'm gonna go ahead and choose yes to edit the function and this is going to open up the function in our editor and what we're going to basically be doing is we're gonna be calling the coin law API and what we're gonna do is basically have a API call to that coin lo API and we're just gonna return the results we're then going to also have the option to pass in a start and a limit because this is just going to be getting a list of cryptocurrency data and returning that array but if we want to have a certain part where we want to start in that sequence so we don't want to start with the first most popular with everyone it's all on the fifth of the temp we can do that and then we can also pass in a limit the limit is default ten we can pass in one hundred or one or whatever pretty basic stuff going on here if you actually look at the code so we'll go ahead and save that this is our lambda function you'll notice that we're using Axios and by default Axios is not available in the global scope of a lambda function so we end up having to install that in the function and to do that I'm just going to go ahead and copy this command we're basically going to change into the folder where the source code lives do that again we're gonna go ahead and add exes and then we're just going to change back up to the top alright so now we've installed Axios into our lambda function we're gonna now update our schema we're gonna have a query called get coins and the data returned from the coins is going to be a type of coin there's a bunch of data that comes back from coin law but the only thing that really we really want is the ID that could the coin the name the symbol and the price and US dollars you'll notice that the response that we're getting has a couple of different properties on it we're only returning the data property there's a bunch of other things that you can respond returned with the data property is an array and we're gonna be basically saying we want this array to be uptight coin that's why you have this array property year to make this actually work with the lambda function we're passing the add function directive and we're setting the name of the function as currency function because if you remember earlier when we created this function we call it currency function and then we're able to pass in a dynamic environment because a lot of times what you're doing is you're working with multiple environments and you want to be able to test this out and not have to set a hard-coded environment so we're basically a reading out environment variable by passing in the - dollar signing in B so I'll go to our schema and add the new type of coin in this new query that's about it so we'll go ahead and mock this again I think it should work without me having to must have turned this over all all right so now what we're doing is we're mocking the limbo function and we're mocking the gruffalo API so the query that we want to run come I have a list of out here we'll call the list coins query here's it mean get claims actually it's a good points right here for now we're not going to pass into anything we'll just return the ID the name the price and symbol you see that we have this data this is coming back from you know the real coin lower API which is cool the next thing we might want to pass in as a limit so right now we're getting 10 coins back because that's the default that we said let's say we only want to get two coins back you get two let's just say we want to get 100 to get a hundred right now when we get the ten back we'll notice that it starts with Bitcoin let's say we wanted to jump to like the tenth coin we could also pass in a start of like ten and we'll notice that we're now jumped to Monterey so that start and that limit was sets again right here in our lambda function pretty basically them to function all we're set all we're doing is saying Axios get passing in the coin lo API we're working with a separate outward facing API the last thing we want might want to do is just deploy this if you want to you run amplify push and then you're able to have your API you know deployed in your account and you're able to interact with it I'm not gonna do that step because it's really kind of unnecessary nothing is going to change as far as like you know what we've looked at today so the only thing that you might be interested in is like where this actually absent API would live once you deployed it if you did deploy it you can just run the amplifi console API there's a graphical editor there you can play around with it when you're done with all this stuff we can run amplify delete and this will delete everything it will delete you know the CloudFormation stack it delete your databases and deletes pretty much everything everything yeah and I think that's really about it on the workshop I appreciate you all you know staying a little later than we thought and being patient and if you have any questions you know reach out to me online and I'll also be hanging around here for the next 15 or 20 minutes or so so that's it thank you well I guess I'll take a few questions real quick if anyone has any questions yes all Flon support is actually so there's something I really should have covered and I didn't cover we have to graph QL clients the client that we use is amplify we also have a kind of like a fork or a same API is Apollo and a different different client so what we use is the amplify client there's also something that we made specifically for graph called the AWS apps eat client it works perfectly well with all the stuff we just just did it just has the Apollo API and in that in that client we have offline support built in and we also have caching built in so basically and we're working on adding whole font support to amplify so that's going to be pretty badass when it finishes but we're still working on it but for now if you want offline support you like or okay with Apollo then you can use the AWS app C JavaScript SDK [Applause]

Channel: Web Tech Talks

Views: 34,781

Keywords: GraphQL, serverless, AWS, Amazon Web Services, React, ReactJS, React.js, Thomas Tränkler, Nader Dabit, Markus Kaiser, AppSync

Id: HZUlQ7Z2xHQ

Length: 107min 46sec (6466 seconds)

Published: Mon Nov 04 2019