How to Query your GraphQL API with AppSync - Serverless SaaS Build Series 2.2

do you want to learn how you can set up custom queries on your database using appsync well in this video that is exactly what i'm going to be teaching you how to do [Music] hi guys my name is sam with complete coding where our aim is to make you into the best aws and serverless developers that you can be in this video we're going to be having a look at our appsync setup that we've built as part of this project and what we've done since the last video we're going to be talking through how to set up data sources how to set up queries and then how to create custom vtl templates to query our dynamodb tables directly from appsync this is a really cool way of doing things as it means you don't have to invoke lambdas or other things to query the data for you saving you a bit of money which is always nice and also making sure your code is nice and simple also make sure you stay around till the end as i'll be announcing something really cool which will be coming up in the future so let's jump into our code and see what's happened since last week so in the code i've made a couple of changes and the first one of those is actually setting up cognito that's because i want a secure way of authenticating all of my endpoints and cognito is a really nice service to use so i've created a cognito resources file and i'm importing that into our main serverless.ts and if we scroll down to the bottom of this we can see that i'm adding those resources to unsurprisingly the resources object if we actually want to look at the cognito resources we can see that we have a user pool which has a type of user pool and then we say that we need to verify the email address and then we have a password policy which is just the default one that i want to use so eight characters and it doesn't currently require lowercase numbers uppercase or symbols not super secure but for now that'll do and i can update this in the future if we scroll down we can also see that we have the username set to equal the email address and i like to do this because it's easier to remember i hate having to remember a different username to the email address i signed up with so why would i make my customers do the same thing the last thing is we also want to gather their name this is so that we can address them correctly and i've set it so that it is not necessarily required but is also editable in the future if they want to say update that setup so once that's been imported the next thing we want to do is look at our appsync api dot ts and this is where the next set of big changes have been made so i've set up appsync with the authentication type of the cognito user pool and in the user pool configuration i've actually said this references the user pool that we just looked at and that is a nice clean way of referencing between separate files the next thing i did if we scroll down to the bottom is define the data sources so for each of the dynamo db tables we created in the previous video i've created a separate data source this is because with appsync we can do some really cool things where instead of having to call a lambda you can directly query the data in a dynamo table from appsync so for the users table companies relationships posts published posts groups and schedules they all are added as a data source into my system so if we scroll up the next thing we really want to talk about is why we're using appsync and one of the benefits of doing so so as i just mentioned you can actually query your dynamo tables directly from appsync which is really really cool as it means you don't have to call a lambda if you want to call lambda there are lambda resolvers for the appsync endpoints and there are also loads of other different kinds of resolvers but for this i'm going to start with the dynamodb ones and probably add some other ones in the future to actually query our dynamodb we need to add something called mapping templates and this is just telling appsync when you get a query how do i resolve that so the first thing i should probably look at is if we find our schema.api dot graphql and open that up i've added a couple of queries here so we obviously have like get my user which will return a user we can get a company we can get an array of companies for a given user id and then there's getting posts getting a list of posts for a company getting a list of posts for a group similar requests for the published posts and then we can get our groups as well and our schedules based on either a company or a group or just by the schedule id so these are the queries we've got so we actually need to define how we want appsync to resolve each of these i'm going to start with a nice simple one which is get company and if we go across to our serverless and our appsync.api.ts we've said that our mapping templates are in the location of serverless mapping templates which is just if i scroll down serverless mapping templates and if i move that up and we open that up you can see i've been quite busy and i've actually created a lot of different resolvers but to start off with and show you what these are all about i'm going to show you some of the easier ones so if we have a look at get company so this is what it looks like and it is a dot vtl file and for each query you need to have a request and a response file so in appsync if we open up our mapping templates and look for this one so here we're saying that we're going to be doing a query of get company we're using the data source of companies table which we defined earlier right at the bottom of the file in our data sources once we've got this we can actually define a very specific set of mapping templates but by default it's going to use type dot field which is what we see here query.getcompany.request.vtl and these are some basically boilerplates basically saying we're doing a get item and then you need to pass the id that you're getting on so that is the key of the field and then we need to say that we're going to be passing in the argument of company id we need to wrap this in this util db to json because dynamodb stores things in about behind the scenes in a very strange way so we need to change it slightly so that the query works but for us we can just think of it as a string so that's how we are querying our data or in this case getting an item from the data so if we have a look at the response all we're doing is turning the response or context.result into json and returning that that all sounds relatively simple so if we head over to our actual console we can have a look at our queries so if i just move myself onto the other side then we can see that here are a list of all of the queries that we have so one of them is get company which we've just defined before inside here we need to pass in a company id and to do this i actually went into dynamo and just manually made some data so in here i have a company with some random test data in there so when we want to query that we need to pass in the id of the company and we can select which fields we'd like to have back so we could have back just the company name but i'm going to say i want the logo and maybe the access token as well as the id of whoever owns this so if i now hit run this will actually query appsync with this exact query it will use that template to query the company's table with that id and then it will return us just the fields that we have asked for so as we can see when we run that query we are actually using a logged in user that i've had to create in our user pool with that user i'm able to query on company and get back the company name a company logo url of null because in our schema we said it can be null and i haven't populated it in the database we have an access token of an empty string and then the owner id so that's the first query that we've set up so if we head over back to our code we can look at some other common use cases such as query dot get my user and if we find that in our list on the left get my user dot request we can see it looks very similar to the previous request syntax we're doing a get item this time on the user id but there's something slightly different in thing that we're passing in instead of passing in an attribute we're passing in identity dot username so this will actually take the id or the username from cognito and it'll pass it into this object this request as the user id so as long as our user id in our cognito database is the same as in our dynamo table then we should be able to get back this user id if i head back to the set of queries and in here i can find get my user and in here i want to select just my name and my user id if i run this query it's got my name of samspam imports and my user id these two use cases are relatively straightforward and yeah very common use cases another use case if we go back to our appsync.ts is if we want to get a list of something so in for example if we want to get a list of posts for our company we can do something like this we can have our get posts for company we're querying on the posts table this time so not the user or company table and if we find this so get posts for company there's a little bit extra to this so at the top what i've done is added a little if statement saying that if the argument.limit so if they've passed in how many records they want and that argument is greater or equal to 25 then that's fine but if it's more than 25 we say the max limit is 25 and that will return as an error if we then scroll down this is actually the bulk of the query so obviously this time we're using a query operation and if you've worked dynamo before this might look quite similar where we're querying saying company id which is the key has a value of colon company id this then gets dynamically substituted in for this value here and what we've done here is said that it's going to be dynamodb to jason and then context arguments company id so that's going to say anytime the field of company id equals the company id we're passing in then return it because this isn't actually on the root index we're actually going to query this on a index called by company group date where the company id is the partition key which is why we need to use an equals we can also have next token so if they've got the first 20 and they need the next 20 they can pass in a token which will say i already have these set please get me the next set and also this is our limit saying this is how many argument how many files i want to return and here i'm using a little bit of extra logic so i'm saying util dot default if null or blank saying which basically means as it kind of says check this variable and if it is null or blank use the other one this just means you don't have to pass in and a limit but if you do then it will be used as long as it's past the test of being less than 25 the last two fields are just saying that we don't want to scan forwards and consistent read we don't necessarily need and finally the select we want all of the attributes as we don't know what attributes the end user is going to select or the consumer of the api so that is what we are going to use once we've queried it we then also need to make the response.vtl and in here we have defined by our schema that it's going to have a set of posts and it's also going to have a next token so this happens and this next token happens if a query runs and it knows there are more results that could have been returned but didn't in this case it's going to generate result context.result.next token and in that case we want to give it back to the user so that they can do that thing we described earlier where they pass that in into the next request to get the next set of results we're using this default if not or blank again because if there were only eight records and they asked for 10 there is no next token as all of the records that were queryable have been returned so if we go and have a look at our query for this inside our console what we're going to do is we're going to go and find get posts for company i'm going to pass in the id of the company i want to query for and then here i want to say that uh i don't want to put a limit or a next token i want to get the next token if they do return it so on the actual post themselves we want to get context dot text but also might want say the group and the post id for this post based on that if i now hit run we can see that we have an array of posts this first post has context of text this is a post a group id and a post we then have one and two and that is how two more of our posts that are connected to this company so that is how we are going to query on something where we have an id which returns a list of values or in our case a page of posts so if we go back to our code again we can look at a slightly different kind of query which is the get posts for group and if we look in here and find the request for get post for group we can see that at the top we have the same test again and this is something i'm going to use quite a lot which just means that if someone requests and says i want a thousand posts we're not going to be serving those all up in one go because that's going to really impact our performance of our database or at least cost us lots of money so here we have a another query but this time we have slightly more attributes again we're querying on the company group date and in this one the sort key it's called sort key two and this is kind of a hybrid key this sk2 will contain the group id plus the date and this just allows you to do things such as querying on just a group or querying on the group but authoring it so that you could say get me all of the posts for this group between the date of here and here and you can do that with some clever ways of querying on that source key because we're just getting by group what we can do is we can say that the sort key begins with group id and then here we're passing in the company id and the group id and that is what our query is going to run against most of the rest of this is exactly the same and if we find our response response vtl this is exactly what we saw previously so if we head over to our inspector and into our console instead of getting posts for company we can get posts for group so here we can paste in our company id and the post the group sorry i'm gonna go with group dash one as that is one of the groups i know exists from some mock data i've created we also want to get the posts and this time i just want the text because i just want to display a list of all of the texts that are queued up for this group if i now hit query we get back a list of posts so here we have context.txt for two separate posts this is very similar to the previous one in the response but the query is more limited and as you can see we're querying on the group one and we could just change that to group two and this time we get a different set of posts in this video we've covered quite a few things that we've done since our video last week we've set up all of our data sources to connect our dynamo tables to our appsync and we've then created a set of high-level queries to be able to query all of those tables we've done simple queries like guessing by id we've done getting more advanced things such as getting a list of posts this is great for being able to get the first layer of data but in the next video we're going to be looking at how you can get the nested things for example on my user it has my user dot companies which allows us to get the list of companies that i have the ability to work on we also have things like if i want to look at a group i actually want to see the list of posts for that group all of these things are vital to the way that appsync and more importantly graphql works so next week's video is going to be a really really important video and it's going to be super useful for anyone that wants to work with appsync in the future as i mentioned at the start of this video i've got something quite important to announce in this build series i'm giving quite a high introductory level to the things i'm doing to build this sas product but some of you might want more help you might want to know exactly how i'm designing each of these queries how i design the schema or more detail and more information about how these querying templates work well once i've completed this series i'm going to be making a full in-depth tutorial series teaching you exactly what you need to know to be able to do everything in this sas product yourselves this will cover everything from the querying templates to setting up your account and your infrastructure and if you're interested in that obviously it's not yet ready but in the description below is a link to a form where you can sign up and i'll let you know when it's ready so that you guys can be the first people to get enrolled on that course i'm really excited for it and i hope you guys are too but anyway i'll see you in next week's video where we'll be looking at that extra level of graphql querying so thank you and i'll see you in that video

Channel: Complete Coding

Views: 542

Keywords: AWS, serverless, Serverless Framework, NodeJS

Id: JZJY0x2cuLg

Length: 27min 1sec (1621 seconds)

Published: Thu May 13 2021