AWS AppSync Tutorial - GraphQL APIs with AppSync, Amplify and Angular

hey guys welcome this video is about AWS app sync which is a managed craft QL offering from AWS and today we are going to create a simple angular application that talks to a graph QL server which is built on AWS app sync and we are going to use amplified library to send request and receive response from the graph QL endpoint as you guys may know amplify is a front-end library that makes our life easy to talk to AWS back in resources so let's get started now before I move on I want to give a quick introduction to rough QL API now graph QL API is quite fast and flexible comparing to REST API because unlike rest in graph QL it's the client who decides know what data it needs from the server for example let's say there's a web page that needs to populate with some data so the client or the browser decides ok these are the data that I have to populate in this page so server please queue this data to me so it requests the data in terms of query from the server and server will fetch the corresponding data and send it back to the client so it can easily populate the page and graph QL of course it operates over HTTP and unlike rest guys we can use fewer HTTP requests to get our job done because the client has the handle know what data needs and what query creates to get the data so the client doesn't need to send bunch of HTTP requests to get whatever the data it needs for the most part it will get it in one go with a 1 request and in graph QL the queries are quite flexible so it's less code to maintain as well so let's take exsample now this is a graph QL query so in this query we are basically asking from the graph QL server a graph cue server give me this particular users name and the email address and also all the blog posts that he has created so when you send this query to a graph QL server you will get a response like this one so this is JSON response can you see the return data is exactly matching the attributes that the client has requested for example is the user and is the user object and here's the and the email and the post since the user has multiple post so it is returned as an array so inside this array you have objects so each objects content title and with the body so how come graph QL is faster than rest for example if it is rest we may have to get the user's name and the email and the ID first using a one HTTP call to the server and then we may have to send the users ID to a different API endpoint to fish all the post of that user so it could be like couple of requests in order to like formulate this type of a data object but in graph QL for the most part we have only one API endpoint for that KPI endpoint we send the query that we need so the browser or the client makes this query and the server will make sure get whatever the corresponding data from different data sources different tables for in this case it might have you know queries these two fields from the user table and these post from the post table and aggregate it and thin the response back to the user in terms of a JSON object which can be easily populated on the client so that's the power of graph giver and it is quite fast and there are three main operations we already talked about query so that is basically fetching the data from the graph QL API which corresponds to a get request in pressed and then we have mutation mutation is nothing but changing the data by creating updating deleting a record in the database in rest we use post put delete requests but in graph key well within a mutation and then we have a subscription so which is basically you know watching over the changes of particular data for example let's say you do a mutation let's say you create a new post in the post table and the clients can always listen on to the post creation mutation so whenever a new post is added the changes will passed on to the client in time so this is happening through WebSocket in graph QL so basically client is opening up a WebSocket connection to the server and whenever mutation is happening and if the client has a subscription on to that mutation then it will receive the real-time data okay so that's a quick introduction to graph QL so let's go to our demo I'm opening up a terminal and navigate to desktop and create a new directory called appsync and I will go into app sink directory and I will open it in we should studio code by typing code space period so let's create our angular application first so I'm going to use angular CLI so I open up an integrated terminal here and I have installed angular CLI so I can type in J new my app and I'm going to enable routing as well so I have latest angular CLI and I will choose the styles as a CSS then start creating my application okay we are going to create a very simple to do application so that a user can log into the application and then create he saw her to do so in our application I need two components let's see the into my app folder the first component is auth so I will use ng g GC or the CLI generator to come and generate the component and its name is auth so this earth component it will comprised of my login screen and I'm going to use amplify earth UI component to integrate login signup and all those screens very simply so the next component is to do so this is the component which contains my to dos okay what the components are created and if I open my my app folder and into the source folder into the app folder you should see those two components so I'm going to set the routing as well so I will go to a protein module and let's set two paths but to do that could render the to-do component and another default path that rendered a o'the component so let's see if everything is working I will type in G so so when I open the application it should render the default route and you can see the earth works here and these are the default content which we are going to delete it right now so here's the default can don't and I will delete it so I will have only the router component and save it and here you go so our default is earth route and it works and if I go to to do the to do works as well so now we are going to add amplified CLI and the amplify library so we can add a logging scream instead of this earthworks ok so let's stop the server and type NPM install - T at AWS amplify the CLI and hit enter so this will install the amplifies here like globally Sierra is installed so now we can create resources in AWS like app sync service now let's install AWS amplified and AWS amplify angular so these two libraries will allow us to talk to back in resources via the API so in order to get this to libraries working we have to do a small changes in our angular application the first one is adding a polyfill so go to polyfill a dot TS and on top at this line of script Windows has any global window so this will provide a shim for the global object and in index dot HTML inside the header tag you need to add a script tag and inside the script tag at this line of code if global is undefined set the global to window and now go to TS config dot F dot JSON file is this file and under types array at node because amplify will use node behind the same so we have to add the node type here okay now let's use amplify see a light to spin up resources so let me clear the screen so first we need to create a login screen we are going to create a cognate or user pool to hold our users and then allow them to access upon successful authentication so let's enable authentication with amplified by typing amplify and first type hell so you will see all the commands now first of all let's initialize the project even before adding the earth functionality so I will type amplify hope you guys can see it if not amplify in it hit enter so this will initialize amplify project in AWS so choose the default editor in my case we show studio code and I'm going to build a JavaScript application which is an angular and our source directory is SRC because our directory name is SRC hit enter and distribution directory is dist slash my app which is the name of my app and built command hit enter and accept the default start come on ng sir so now it asks whether or not I want to use an AWS profile now here I say yes and I'm going to pick my youtube profile so if you guys have not configured an IM profile in your machine use amplify configure and at your access key and secret access key with the name of profile k now the project is initialized so let's add all so here's the category oath so in order to add that let's type amplify at or select the default configuration now this is the default configuration of the user pool ok decided now before you pushing those changes to an AWS I'm going to add API as well so I will type amplify add API and hit enter so this time we are going to choose graph QL API so select graph QL not crash and provide the API name I will save my app and authorization type choose Amazon cognate or usable since we have already created a user pool we can use authorization from that user pool so I must incognito user pool and then it will ask do you have an annotated graph QL schema in my case I do not have anything so I will say no and hit enter do you want a guided schema creation it yes and then it will ask some information about your project though is it a one-to-many relationship like blogs and post or single object with fails like a to-do application which exactly what we are building so let's select single object with fields and now it will ask do I need to edit my schema right now I will say yes and hit enter it's going to open my schema Road graph key well this is my graph QL schema so I'm going to change this attributes a little bit for my to do so ID is fine for to do name is fine instead of description I will type body and also I will have another attribute called completed and that's the type of boolean I will save it and come back to my editor and hit enter okay it is created locally now when I type amplify publish or push so what happens is amplify will create my graph QL API so it will look at my schema definition so this one graph QL schema and we will create an app sync service and it will create a dynamo DB table with these fields and also it will link that dynamo DB table with the app sync service and also at the necessary configuration to create read delete update records in that table as well that's very convenient for us as a developer so let's type amplify push and it will ask these other things or the resources that is going to configure in cloud the earth the cognate are usable and for the API my ap my yep yep sync API so I will agree by typing yes and hit enter so then it's going to ask me do you want to generate code for the newly created graph QL API I will say yes because I need the cord for my angular application and then it will ask me okay your path pattern to store all the queries mutation and subscription I will accept the default because it's going to create this graph QL fold inside my source directory and then at all those dos graph QL files so then it further suggest me ok now do you want to like create all those example operations like queries mutations and subscriptions as well of course I want I need that now it's going to ask for a file to generate that code I will accept the default so that will create API dot service dot ts file and now it's updating the resource now while it is updating I want to do attention on this particular directive so this the graph QL schema and it has this particular directive call at model so there are multiple directives in amplifier so at model is one of them so in this directory what it does is as soon as its source ok this type with this directive it's going to create a dynamo DB table with these attributes and as I previously mentioned it will do all this linking part with the app sync service together with all the operation so that's very cool all right it's created you can see it has given me the graph QL endpoint as well so as you can see it has created a lot of files here here the log says generated prophec y operation successfully saved that sauce graph QL fold so let's see this our sauce fold and this is the graph QL folder and inside the graph QL you should see all the queries and see we have get to do query get all the to do like list to do is query and then we have mutations like creating a to-do update and delete to do mutation and also subscriptions as well so we can subscribe to like one create to-do as soon as a to do is created we can just listen for that and get the content so apart from that you should see there's this AWS - export - chase file and it has all the configuration that amplifi has provision in my AWS account so it has kognito user pool information and also the graph QL information etc now we need to do one thing so let's just take a copy of this file and paste it in the source directory again and instead of dot J's file I'm going to rename it as a double US exports or TS file now we can import this file into our angular components now let me show you one other thing if you go to amplify folder here and into the backend into this API folder and inside app folder you should see the build folder go inside that then you should see this folder called resolvers now open it out when you open it up you should see there are multiple resolvers for creating to dos and delete introduce updating getting and list introduce for each resolver there's a require request template this is the request template for create to-do and this is the response template for creating to dos and here's the same and here's the request and response template forget to do now what is this guys in graph QL when the browser sends a query to the API let's say it's asking to you know get a particular to do write then we have to write a resolver in order to do that operation so if we want to get that to Do's we have to query the dynamo DB table and get that corresponding to do matching with the to do ID right so we can do that in different ways in graph QL we can have resolvers either by using the data source for example in this case it is the dynamo DB so we can use the dynamo DB getitem operation so you can see the operation is get item and the key this is the hash key or the primary key so that is corresponding to the ID of the to do so this is the one of the options that you can write that three solvers or else you can write a lambda function and hook that as a resolver and inside that lambda function you can talk to the dynamo DB and get the result and send it back to the client so there are multiple ways that you can attach three solvers so the request template is basically you are requesting the data from the data source in this case dynamo DB and the return data you can like modify that return data back into a graph QL response so you can like restructure it as a graph QL response but if you want to do like further filtering before sending the response you can add this here so that's about getting to do so about creating to do so that's a mutation so when using that notation you can again use dynamo DB operation put item operation and then for this new key and you know add those attributes that is coming alone through the mutation and create a new to-do item and here also instead of using this velocity template then using the dynamo DB put item operation you can use a lambda function to talk to remedy be using the animal DB SDKs and do that operation as well okay so now let's set the amplifi login to our application so in order to use amplify we have to do a little bit of configuration so let's go to source folder and into our FN into AB dot module dot TS and we have to import some libraries so what library do I have to import I'm going to import amplify service and amplify angular module from AWS amplified angular library and I will add the module inside the imports here and the amplify service as the provider so now that we have the amplify Angelo module imported we can use the UI component provided from the AWS amplified angular for authentication so let's go to our odd component and go to and go to add component or HTML file and here instead of both works we delete it and I will paste in the amplifi Authenticator directive this will add all the UI components for login logout forget password sign up etc but in order to do some styling let's import amplify styles into our Styles dots a CSS file so I will go to style Stata CSS file and Here I am going to import AWS amplify angular slash theme dot a CSS now let's see how our application looks by typing ng sir and when we go to localhost 4200 yes I should see this nice UI so now let's add some code to do component as well I will remove this to do works template and I will paste in this chord so that's this do the wrapper do around so inside that I have two buttons first one is to create a to-do and the other one is to get all the to do so create to do is linked with a create to-do function get to do is link with get to those function and then we have another do this you will iterate over all the two dues and print out the to do name and the body and whether or not it is completed I will upload this code into t-top and link it so you guys can see it as well okay guys so let me change this get to do two lists to do this because you are listing all the tools here and now let's create those function go to our TS file and first one is create to-do list to do now in order to create to do I'm not going to use any like input boxes and get the actual to-do content from the user but instead I am going to like generate a couple of to dos when someone hit this button so let me paste in this Court so constant new to do and I have given the to do name as to do and then random value between 1 200 and sample description and this is the completed status which is false and now we have to use create to-do mutation so for that let's use amplify API now before actually use amplify we haven't configured it properly we go to do a small thing so let's go to a main dot TS file is our main angular file that get both trapped and there we need to import amplify from AWS amplify library like this import template file from AWS - amplify and then we have to import that AWS export file if you can remember guys the amplify generated this AWS export is file and we created this TS file of course we can like use a script to do this conversion but will like copy paste for now so we are importing that particularly export file as well then we are using amplify dot configure and passing that particular export file so that's it so once you do this amplify configure amplify know okay these are the resources that it can talks to and these are the metadata that it can use for example EPS Inc URL let's do another thing if you can remember amplify has created this API dot service file so this has all the mutations queries and subscription of fab sync so we need to import this API service if you want you can put it to the app module as a provider so you can use it throughout your components but in my case I will only use in the to do component so how can we use it I think order to do component and on top let me import that one directory of an API service and I think that is called API service yeah so let's import our service as well and here in the constructor let's create a private variable call it api of api service so now we can use this API private variable in order to talk to our app sync endpoint so let's go into our method which is create to do so we have this new to do and in order to call this mutation we have to use our API this dot API dot and it is create to do and it will take the input test that we do input which is nothing but our new to do may just copy it and paste it in okay now this function is a synchronous function so we need to await for that and let's take the result into a variable called result why not and since we are using a wait we have to like create this function as a async function alright and let me just put a debug point here just as topic at this point and inspect the result felice to deuce what do we need let's create another variable called fall to deuce then that is what we have referenced in our loop yes it is all to do and it's called our API again API dot list to deuce I don't have to pass any parameters here again you have to make this function async and rather we'll define this all to dos on top and here let's call it this dot all todos and on ng own in it so this is the function that called when this component is initialized so let's call the same thing here so when we refresh the page it will always like call this function and here also let's do another change so once you have successfully created it let's push that to do into our all to do list this dot or to do start push result okay let's see if it is compiling it alright yes I think so and I will go to localhost 4200 nothing let's inspect it process is not defined I think that's another problem in angular 6 where we need to use another shim for that so let's go to a polyfill dot J's so in the polyfill dot J's if you can remember we had a polyfill for the global object and also we need to have a polyfill for the process object this is a workaround that I found on internet so let's set this one window as any process this script and save it and now let's do a refresh there you go now it works now we are at localized 4200 you know this is our login page since you guys don't have any account created you click create account and sign up for a new account with a username password and email and those stuff and afterwards you will receive an email to your email address with the confirmation code at that in and then you are good to sign in I have already created a user so let me log in with him MJ so and click sign in yeah you should see the inspect element the network tab all the calls that it does for the backend so it's calling the cognitive API and once you are successfully signed you Cognito will send you all the tokens ID token access token and a refresh token and they will be stored in the local storage so you can see it has grabbed my name hello I'm Jason and let's go to to do endpoint now that we are signed in you can see our two buttons okay we got an error so let's see yeah we need to define this as an away alt reduce and then here let's take this into a variable let result and assign this dot all to dues as results but items because just this items attribute that this to do so will be Bobby later okay and here also the same thing let me just copy these two lines and when you click list to deuce it will show that as well okay I think now it looks good let's see there you go now I have all this to do so created so I got nine sixty eight eighteen and seventy-eight that's great another one eighty eight and if i refresh it I should get all those things right and if you go to inspect element and into the network tab let's inspect what happens when you click create reduce it's calling the graph QL API and it's calling the create to-do mutation so it is passing the body completed or not all that right okay so this is one of the ways that we can work with AB sync and point with amplify graph QL client but this amplify graph QL client does not support offline functionality so if you want offline functionalities and those complex features you have to use Epson SDK but this graph gillip sync client is really great for you know handling mutations queries and subscription quite easily alright guys so this video is about modeling relationship in graph QL when you are using app sync and amplify library I will give you an example on how do you model one-to-one relationship one to many relationship and many to many relationship in your applications so throughout this video I'm going to use one of this example to demonstrate this relationship so this is one of the very core one example so let's say you have these three entities you have a department and you have employees and also you have projects so let's see what are the relationship between departments employees and projects so one of the relationship that we are going to map is a department has a manager let's see this one so department has a manager so that manager is also included in the employees right so of course a manatee is also an employee so a department has a manager so what type of relationship is that it's a one-to-one mapping because one department has only a one manager right and also the second relationship we are going to do is a department has many employees of course a department has many employees so one department has many employees so what type of relationship is that it's a one-to-many relationship or we denote s 1 : mo 1 : n right and finally we are going to look at what a many-to-many relationship as well so that is nothing but a project has many employees let's say a project so we have a project entity a project has many employees let's say many employees are assigned to one particular project and on the other hand a single employee can be in multiple pet accessor so one project has many employees and one employee can be assigned to many projects so what type of relationship is that that's a many-to-many relationship alright guys so let's see how do we map this relationship quite easily with amplify library all right so hero to amplify library website so at this particular link now I saw in the previous video we talked about amplify librarian graph QL introduction so if you guys won't watch it I will put a link up here and once you are in the documentation you should see how to install the amplify library so it's basically a simple npm install and then you can use amplify in it to initialize a project in AWS cloud so let's take a terminal and create a new directory called relationships CD into relationships and inside this folder let's create an angular application ng new my well you can use angular react view or any other front-end forever but in my case I use angular yes I want to add routing and I'm going to use a CSS so once you have this graded go into the folder and open it you know called editor I'm using Visual Studio code here alright now I open up an integrated terminal and let's initialize a new amplify project by typing amplify in it okay the editor I'm using is visual studio code and it's a JavaScript application it's angular application so if you guys like spin up a react application use react or view in my case angular and the source directory its SRC folder and my build file resides in dis my app Maya piss the name of my app and hit enter will come on is this one ng serve alright and now it's using CloudFormation to initialize the project so do I want to use AWS profile yes because I have this particular profile for my YouTube alright so now project is now successfully initiated in the cloud so now I can add API so let's set our graph QL API by typing amplify add API and hit enter choose graph QL and hit enter give an API name I will just choose the default name Maya and the authorization type well I'm going to choose kognito user cool and then it asked me ok do I need to add the default configuration to the cognitive you support I will just select default configuration if you want like you can go through the setup and customize the configuration now it asks do I have a graph QL schema in my case I do not so I will type in and hit enter do you want a guided schema creation yes then it will seduce me like three types of schemas no single object will its fields one-to-many relationship and fine grained access so in this case I will choose one-to-many relationship that will give me a blogpost Keima and do you want with it edit the schema now I will hit yes and now it's going to open up the schema file so minimize the integrated terminal and so this is the created blog post kima so in our case we don't need this one because we have a department employees and projects so I will delete it so let's start building our schema so first type is Department so what field as the department has it has an ID of ID so capital ID is a common type that we denote ID in graph QL and Department has a name of string yeah that should be it so our department has an ID and it's name and now I'm going to use a directive from amplify library called at model so this at model directive will create a dynamo DB table for Department and also it's going to create all the graph QL mutation queries and subscription for Department a model or department type so what is the next entity so let's create our employee and let's use the same directive here because we want to create a table for employee sesor so our employees also has an ID and a name and let's add HSL so now let's add our first relationship so what is our first relationship the department has a manager so in the departments let's add another field called manager and that manager is again employee right now before that let me just take out this s and keep it single sorry about that so this manager is again an employee so manager is type of employee so we are referencing this type when it comes to manager so this is ID and string as call a type in graph QL but when you are referencing another type these are called none scholar type so in order to make this a one-to-one relationship let's add another directive called connection so we are making a connection on manager to this particular employee type now here's what happens when amplify compiles this schema with these directives it's going to create this department table in the dynamo dB and it's going to create ID attribute name attribute it's going to create another reference for the manager by adding attribute called manager ID so department table then has a reference to the manager's ID so let's see this in action so I am going to open up the integral tourmalet game and hit enter and then I will type amplify push so now amplify is going to compile the cord and create a CloudFormation template and then it creates all the resources so answer as to all these questions alright so it has given me the graph QL endpoint and let me go to AWS console and see the resources that it created and if I go to app sync I should see my new API my app and go into that if you go to the schema you should see the full schema that it has created you see it has added all these input types and mutations subscriptions etc so let's go to dynamo DB as well because it should create a table for department and employees so these are my two table and also let me go to AWS kognito because we are using cognitive authorization so if I open it in a new tab I should see my new kognito usable so here's my usable so in the absence ole let's try to create a query let's try to create a department now I first have to log in with the user pool because that's how the authorization happen so in order to do that I need to provide the client ID and username and password of a particular user so let's create a user here in the user pool I will click create user and okay mono Jeff is fine and I don't need to send in a notation at a temporary password guys and just untick this one mono jack test come and create the user user is created and now go to app clients because we need to just copy the client ID and make sure you are not using the one with the secret key but without the one this one so just copy in the client ID in the app sync console client ID paste that in and your password and the username in now I am logged in as Manoj okay now if you click Doc's here you should see your schema and let's see what are the mutation that I have if I click mutation link here I have this create Department mutation right so let's try to create that one will type mutation create Department and the field name is create Department input so what are the input types so if you to create department you should see the input type is of this particular create department input type just click that should see what other required field and I should give the name and let's call it G nearing Department and Department manage ID since I don't have a user created other employee created I can't give it yet so let's leave it blank and later on we'll update the department and the create departments outputs are departments so in the department I can just print out the ID and the name right so now let's run this mutation click this button there you go it's created so let's make a note of the department ID and I will just copy this and I will put it in a notepad okay so this is the department ID then guys let's create an employer as well let's create employee you can just name this one any name but when you're choosing the field type make sure to pick the right one okay an input type colon and open braces if I go to mutation always use the documentation it's quite easy and create employee you should see the input type is create employee input and it accepts name and age right so name let's say John Doe and [Music] h1 and the mutation returns an employee C so employee has the name and the ID I will just print out the name and the ID okay let's close this out and click this one and select create employee ok John Doe is created let me just note down these two as well John Doe ID is this one let's create two more employees Jane Doe of age 28 and create the employee and just note the ID as well here and also another employee Manoj Fernando create employee like a note so now that is created so let's see if it is real like updated in our database right so if I go to dynamo DB and if I go to department table and into the items I should see my first department is create see Department enjoined Department can you see I still don't have that manager ID so let's add a manager to our department so I will go to app sync and this time I'm going to use the update mutation mutation let's call update manager so the mutation name let's see what is that name update department okay update department and as for the input type okay update department input if I go into that I can individually update these attributes so in this gate I need department manager ID so let's add John Doe as our internal department manager department managers ID so let me quickly copy john doe's ID here paste it in here department ID that will return me the name okay I can just return whatever the values here and let me just run the update manager mutation oh we were an error because we have to like give the ID of the department as well so department ID that we are going to change is this one so this is the engineering department sorry about that so of course you have to add the department ID that we are going to update so make sure to add the department ID here and the department manager ID which is our jaundice ID all right and then run again alright so it is updated so let's see if it is updated i will click refresh and open this up you see the department manager ID so this is how we create one-to-one relationship now let's add the other relationships as well so let's add this one a department has many employees I will go to my schema now department has a manager one to one relationship and department has many employees so let's add another attribute here it's called it employ is M that is an array of employee type so its employees are array of employees so arrays is denoted risk brackets so we are referencing the employee type in an array because it's a list of employees right and let's add another connection here nervous when you add this connection it works so when you create one-to-many relationship so in this case Department has many employees when you're creating an employee in the employee table it should have an attribute called Department ID say department ID yeah something like that so this will reference the department so every time you create an employee we should have that particularly now there's a small issue when you just add employees it just works but this particular attribute name we get it as Department employees ID so it's basically get the type names Department and the employee and the ID right use if you can remember our manager it was called department manage ID similarly it will infer attribute name called Department employees ID right this doesn't make any sense so in order to have an attribute that makes sense let's create a named connection now these unnamed connections so named connection is quite easy just add a brackets and type name and then you can just add any name here this basically a label guy is some reference so it can be anything so let me here just call it department employees and once you are adding a named connection you have to have another field in the corresponding table so this is referencing the type employee so in our employee type let's add another reference to the department as well so let's call it department department and it's the type of department and let's add the same name connection here as well so we have to do this by directional mapping on in order to get this thing working right so when you add that guys this name could be anything what changes is the attribute name so earlier if we weren't using named connection that tribute name could be department employees ID now it will take the name as employee department ID so that makes sense right because employee belongs to departments or employee department ID make sense all right so now let's compile scheme again so how can we compile it take your integrated terminal and type this command amplify API jaql - compile so this will recompile our schema and update our CloudFormation stack now let me reiterate again of course you can like take this out and only keep the unnamed connection right because Department has many employees this just works without any doubt right but the attribute name is a weird attribute name so in order to have a meaningful name something like employee Department ID we need to have a named connection okay it's successfully compiled now let's push our changes amplify push so once it is completed let's go back to our AWS console to AB sync console maybe you have to just log out and login back now if you take the docs and go to the mutations let's see when you create an employee what are the input types you see just the new input type called employee Department ID you see now the name matches quite fine those employees has a department ID so let's update our three employees with their corresponding Department shall we so I will go back to the scheme and let's use this update employee mutation update employee and the input type is off let's say always use the reference the ID of the employee is let's start with John Doe ID and employee department ID so let's add the department Incheon department ID this is this one and you can just get the name if you want and then I will update the employee all right it's successfully updated similarly let's update the other two employees as well Jane Doe just change the employee ID here don't change this one because you are adding it to the same engineering department so that is the department ID and run the update employee again Jane Doe is updated and finally manage employee ID change it and run the mutation update employee ok now it is updated now let's try to query your department and see so if the department has this employees get deep month what is the query so this time it's not a mutation it's a query click query and get Dept query it Department and ID so we have to provide the ID of our department and that gives me and department click on the return type here Department and you get all this information right so let's print out the department name and the manager so manager again system type of employee you see when it's another type of employee if you go into that you can just print out the manager's name and go back here so what else do we have we have employees as well so employees and employees are a type of employee connection it's a type of connection and it has these items array because employees are a list of employees the night terms are list of employees click into the employee and everyone has a name and let's print out their age as well why not so now let's execute this query I will hit play button and click get department there you go so we got the data back so our department name is engineering department our manager is John Doe and these are the employees employees employee one two three Manoj Jane Doe and John Doe nice now I want to show you one other thing if we go to dynamo DB table and do a refresh on this and if you go to employees table first note that you have the employee department ID attribute and secondly if you go to indexes you should see it has created a global secondary index on employee department ID key so DynamoDB has internally created this index on the employee department ID so that it can query using the employee department ID efficiently so so now let's set the many to many relationship so what is our main main relationship it's basically a project has many employees an employee can be assigned to many projects so let's go to our schema now we need to have another type called project and it's also a model we need to have a dynamodb table and all the mutations and queries and it has project ID and let's say is a project name as well that should be enough so what should be the relationship a project has many employees yeah so we can simply add employees of type employee array make sense so employees it's an array of employee right and we can just make this as a connection right if you won't like we can create this a name connection as well and how about the other side employee can be assigned to many projects so employees also can have multiple projects right so if you just type projects and it's a list of project we can just make this as a connection as well right so we have both the relationship employee has multiple projects and project has multiple employees but guys when you are mapping meant to many relationships and if you only use in two tables when there are a lot of data the relationships get quite messy because you see the employee table has the relationship to the projects and the project has relationship to the employees and one employee could be in multiple projects and one project has multiple employee so you have to like have so many number of records in these two tables it gets quite messy quite fast so one of the ways that we can like model it in a different manner is using a third table we can create a third table and create two one-to-many relationship and then achieve this many-to-many relationship confusing let me just show you so let's create another table called or type called let's say employee projects right so when we are naming this table it could be like employee projects or project employees whichever makes more sense right so in this case both seems fine employee projects or project employees so let's create a model here and this particular table also has an ID attribute and I am going to take out these two early records this one and this one okay so we can start with a clean slate so what are we going to do we are going to create this particular table employees projects table and create two one-to-many relationship M floette able to employ a project stable and another one to many relationship from project able to employ project stable so let's create that shall we so employee has multiple projects and that is the type of employee project not employ a type but employee project and it has a connection and we'll call that connection employee projects remember you can name this anything and once you create one record here you have to have a reference record here as well so it's call it employee because this is the type of employee and the employee type and let's have the same connection name here so we created one of the one-to-many relationships as we have created one-to-many relationship in department and employees see this one similarly we created another one-to-many relationship between employee table and employee projects table right so we'll do the second one to many relationship from projects to employee projects so project has many employees and that is an array of employee project let's add a connection with the name project employees so let's create the reference attribute here so that is project because we are referencing the project type and that is of project type and have the same named connection here also so now let's recompile this amplify API gql - compile we got no errors and one other thing guys this particular employee projects model and when we add this particular at model directive it's going to create all the queries mutation subscription and everything right but we are only like adding the records or creating this employee and project reference in this table we are not going to query anything from this one so in order to tell amplify don't create query types we can pass additional information with parentheses let's say queries null so it's not going to create any queries but only the mutations all right and let's do another compilation okay it's compiled successfully let's do amplify push to push all the changes and like update our resources in AWS okay guys it's updated so let's go to our AWS Epson console and let me log out again and login and now if you look at this schema and if you go to mutation you should see create project and update project that means it has created project type as well so let's create a project guys so I will type mutation create project and let's use create project field and input so what is the input click here so basically ID sort or generator you just have to give it a name let's call it project X and then let's get the ID and the name okay execute it create project there you go it's created and let me take a reference on the project ID project X IDs this one and now let's add Manoj and Jane to this particular project X so those are the two employees assigned to project X right and how do we do that we are going to create an entry in our employee projects third table so let's use create employee projects mutation so I'm going to use nutation add employee to project and we are going to use create employee projects and as for the inputs we have to provide let's see what are the inputs here employee ID and the project ID so employee projects project ID so what's the project ID so we are going to associate him with our project X so let's get this project ID and who are we going to associate the employee ID of Jane alright so let's get the idea out so this will assign Jane to our project X so let's add employ to that project okay so it's added and let's add Manoj also so let's get the Manoj ID and I'm to add Manos to the same project and let's add the employ to that project okay great so let's now query that project and see if these two employees are actually added right so let's go to Doc's again query get project by ID get project get project and ID so what is the ID project excited here okay and the gate project returns a project so inside the project what do you have you have name and employees you see one to manipulation ship their name and employees now take a look at the type guys this employees are type of employee project connection yeah so if you go into this should see I will get a list of employees so I can just query that items and these items of type employee projects so employee project we have employee and the project so let's get the employee again and I will take the name employee so it will give me the name of this employee hope it's clear so let me just query the project get project here we have it so our project project X it has these two employees so one project can have many employees so let's see the other side that means one employee can have multiple projects so let's add Manoj to another project shall we so first let me just create a new project I will use the previous notation I will call this as project Y and let's run this one create project so is the one so I created it so this is my project Y copy the ID here project Y now let's associate Manoj to that project Y so project Y ID I already copied it so let me just quickly paste it here so this is the ID of project Y and the employee ID of Manoj so that is this one all right and I'm to execute and embellish the project great now if we query Manoj then we should see all the associated projects let's query that yet employee query name let's get employed okay get employee and basically you need to give the IB of the employee which is manoj ID and now look at the return type so this is the get employee and you will get an employee type out so in this employee type there are a bunch of things right first we can get the name and you can get the edge and the department or we'll just omit department for now because you are concerned about the projects so I will type projects and the project is type of project connection and go into that you get items that means list of projects and each of these are our third table type which is employee projects and inside it we can simply get the project and project age type of a game project and just get the name nice so let's run this query and it should return both project X&Y ideally let's see get the employee there you go so Manoj is part of Project X and project Y great so now we have completed all these relationships this video is about real-time updates with graph QL subscriptions with AWS appsync so we have been building upon this particular to-do application or rather automated to-do application where we can like click create to do button and generate list of to dos into this particular list so currently we have to do 52 to 33 and if I click create to do again I should see to do 36 all right so when you click create to do button it will call upon a graph QL notation and create that particular to do in a dynamodb table see if i refresh it i should see three item now let's delete like two of these and now if i click get to do spurton here this will call up on a graph QL qre so in that last video we look at how to implement both mutations and queries so as our server we used AWS app sync so absently cell graph cure server which is a managed graph QL server and in order to like work with this particular server we used amplify library now here's our app sync server so this is the schema now in order to work with this server we use JavaScript amplify library the amplify provides two ways to communicate with graph QL first by using amplify graphical client let me see this one and also using AWS app sync SDK this one we used amplified graph growth client to simply create queries and notations and now today we are going to use that to create subscriptions as well so what really is a subscription base subscriptions are basically watching over changes in graph QL for example you can watch over particular mutation let's say a create to do so in one of the client creates it to do so that change or that new to do will be distributed to all other connected clients now let me show you this one now if I take a new browser window and go to localhost 4200 to do same angular application we can simulate another client okay so in the first client or the first browser window if I click create to do I will get the to do 41 but my other client will not see that change right in order to see that change is like refresh it or like click our gate to do is query there you go but with subscription we can transmit all these changes in real time to all those connected clients so let's see how to do that so I'm going into my court so this is how to do component HTML that creates this particular page I'm going to do a one particular change instead of clicking this button and generate this automatic to do let's actually allow the user to type something and then click the to do and then at that custom name as the title of our tour shall we so this is the HTML so I'm going to take out this list to do buttons and add an input box here of type text so this will be the place that clients are typing that to do name and lets a label to do name so we can pass the to do name to our create to-do function so let's do that to do name and let's change the to do function as well i will go to to do component or TS and this is how create to-do function now you will receive that to do name as well here so instead of this random to do name let me just add the actual to-do name that is passing from the client so these two attributes let's keep it as it is now before I pass that name let's check whether it's not empty if you have a particular length on the to do so that means just something in there to do and I will put that in the if block so now what happens is we will formulate the two two and then we are going to call upon this create to-do mutation right since this is a synchronous function we are waiting for that and once the result is received we are pushing that to do into our all to do sarey then in the template we are looping over that all to do errors and printing out this to do name body and to do completed right now let me change this to us well I will take it out body and completed because these are hard-coded values I will just keep the to do name let's see if that looks nice on the browser nice now we can like type something that file a click create to do yeah this is small error instead of just to do name you have to reference the value yes all right so to do named what value will give the name of the to do so now let's try that there you go now it works let's clear this input box as well to do name dot value equal null you wake up at fire and click the to do now it's getting cleared okay so how do you attach the subscription here or how do we push these changes to all the connected clients now guys when you create a schema amplifi has already created all these mutations queries and including subscriptions as well so if you can remember in the last time we have been referencing our service API service which is generated automatically by amplified so this API service also has our subscription code as well now this is our API service dot T is can you see this this subscriptions called on create subscription and we have an update subscription on delete subscriptions so from our client we can like subscribe to this subscription for example let's say on create subscription and once we do that we will receive any newly created - dues from other clients in real time so let's try that so I'm going to reference this on create subscription so this is actually the type and if I just search again you can see on create to do listener returns and observable where we can subscribe to write so let's use that I go to my to-do component and here in my create to-do method instead of pushing this new to-do into our all to dos so I will let the subscription to add that particular new to-do into our all to do sorry so let's come in this one out I will just remove it I will take this variable out as well so we are now just a waiting for create to-do to happen and I will take out this debugger point as well now you know in G only need lifecycle method let's subscribe for that particular subscription so how can we do that this got API so we are referring our API and here one create to-do listener we are going to subscribe to this particular listener and there it will send me the new to do as the function parameter to our next method so we are subscribing to this on create to-do listener and in the next function it will send me the new to do that is being created by another client so this happened in real time guys well a graphical subscription creates a WebSocket connection with all the connected clients and send this information right so the server sends this in real time so now let's add this to do to our to-do array let's get this new to-do into a variable that is inside to do dot value dot data dot create to do so like go into this particular object we are going to push this to do into our all to lose array never to do so let's see if this works now again we are subscribed into this on create to do listener at the on ng on init method so whenever the component is loaded it was subscribed to this event and once it is subscribed it will receive all the new to do that is created by other clients in real time so once a new to do is received we are like adding it to overall - deucer a let me a test to do test create to do well I get an error it says cannot read the property of push of undefined that means this dot - deuce is undefined so let's say yeah hey guys let's use the arrow function instead of the normal function so it will correctly reference this with the arrow function okay so let's try now hello create to do now it's get at it okay let me just clear out all these items in the DynamoDB table and let's test this in different clients so I will take two clients here so this is my first client and this is the other client so let's test this out I will type - to wake up at 5 a.m. and create to do there you go it get added here and in the other client also it was visible now let's take another client I will take a safari go to the same localhost 4200 to do so this is Safari and this is Chrome this also Chrome let me add another one it breakfast there you go so you see now all these connected clients they will receive this newly added to do through that subscription in real-time and they will render their template today we are going to demonstrate the offline capabilities of EPS Inc there are two ways of working with appsync basically you can use the amplifier off cue client which is a very lightweight client where you can easily interact with your app sink back-end but it does not support advanced features like offline etc so if you need advanced features we have another way that is using AWS appsync SDK so today our main focus is using AWS appsync SDK and build a small offline application and I'm going to use angular framework today because there are a lot of resources for react but very few resources for angular and there are some gorgeous we have to be aware of so let's get started so I will take a terminal and I am in my desktop let's create a directory offline CD into offline and I will create a new angular application and J new my app at route English you say CC yes and let it create okay CD into my app and open it in Visual Studio code or any editor you use I will take an integrated terminal here and now we have to install couple of libraries there are four libraries that you had installed first one is the amplifi CLR you have to install it globally so write npm install - t at AWS amplify CLI and then you have to install AWS amplify locally and amplify angular and also AWS app sync these subs in case TK and graph QL tech like brain so let me just copy the first one install that I will return that let me show the version that I have so I have zero point one point 45 and lets you install the other libraries npm install AWS amplify locally amplify angular app sync hdk and graph QL tag alright it's done now if I go to the package or chase and have a look at the versions that I have installed now before building our application we have to do a bit of initial configuration to avoid some compile time errors when compiling angular with amplify and AB sync so first thing is you need to go to SRC and find your index.html at the script tag so basically it's a reference to the window object which is referred as global so we need this one okay and don't worry guys I will add a link to the DTaP repository so you guys can easily copy paste the code okay first thing is done and secondly you need to go to TS config dot app dot JSON file and under the compile options under types add node so this is required when compiling application with amplify and now you need to go to polyfill dot TS thought of this file on top of the file we have to add two things first one is our reference to the global object there is referencing window and another reference for the process so these two are required all right and also we have to do another configuration in TS conflict or JSON this particular file here you need to set the attribute called skip Lib check to true otherwise you will get some errors when you add the absent SDK so make sure to add these two I think these are the main configuration we need so now let's initialize an amplify project so I will take the integrated terminal and clear the console I will type amplify in it hit enter editor we escort JavaScript angular SRC is our source directory and built file will be in this slash my app just the name of our folder and will come and accept the default it tend to start ng serve alright now it's asking whether we want to use the AWS profile in my case I will hide yes I have multiple profiles will choose YouTube you guys can choose default or if you have a profile configured for AWS you start one so it's creating the stack I will fast forward okay done now we need to add some Epsom features so let's clear this out and I will add the o'the first because we need a login and let's use use Apple authentication for a small to-do application and I will use the default configurations let's add ap is film amplify at API to scruff QL provide API name my F is fine and here use Amazon cognate or user pool do you have an undirected graph QL schema no yes I need a graded creation single object which fails to do do you want to edit yes and she will open it up anyway guys I will just take out the description as well just want the name of the to do let's say so I will save it and hit enter okay now we need to do amplify push to update the resources in the AWS select yes so it will update both or ten API and now take this up a little bit so you guys can see do you want to generate code for your newly created graph given API say yes then choose the code generation language now here guys you can use typescript because you have to create those mutations and subscription separately where you can easily import it so you start script accept the defaults say yes I want to generate or okay where should be the file it should be in source API dot T yes it enter now it's creating the resources let's give it few mates okay it's created now if you go to amplify fold and into the backend API in my app and into the build folder you can see the graph QL schema that it's generated so you have all the queries and mutations and subscriptions all that right and also if you go to your source folder you should see a new folder created craft QL inside that you should see the mutations queries and subscriptions as well right now we can easily import them into our components so let's create our components so how many compounds do I need I need say cook opponents mg/g see first one let's say oath that will include our login screen and I will create another one in GGC to do that will include our to-do application you know so I will create a service file in Gigi yes of sync so let's create a service called AB sync as well so that is created so let's see the generated files both component to do component and here our AB sync service first and foremost guys we need to register amplify angular module and also our service app sync service so let's import it in the app dot module dot ES file so this our main module file here let's import the amplifi angular module and amplify service from AWS amplified angular library so the module put it inside the imports and amplify service put it inside the provider now we need to import the app sync service as well so this new service that we just created so let's import that app sync service from up sync service should be simple s here and at this to our providers Lister sir now when we push our web sync services it has created this AWS export ts5 rather J's file you can find it in your source folder here AWS export or chase so it has all the reference to your back-end resources like where you use a pool use Apple ID and Epson craft QL endpoint etc so we need to reference this in our application and initialize at start so go to main dot PS file here and let's import this AWS export file I input it as amplifier input amplify from dot slash AWS export and also import the amplifi library itself input amplify from AWS amplify now let's configure amplify amplify it or configure configure with our exported configuration okay now it will be initialized successfully but we have to do one other thing as you can see our AWS export he said or chase file how to convert it to TS we can do it using a script provided in the documentation of amplify for that you go to package dot JSON and you have to replace the start and will command with a script so if you go to amplify documentation at this link and you go to angular an ionic menu and if you scroll down a little bit you should see the script here just copy these two lines so that is basically converting your JS file to TS on the fly just replace start and build nice okay now let's at the login screen let me go to earth component taught HTML so this will have our login screen clear out the content let's use the built in directive for amplify Authenticator so this will easily render our login screen so import this directive amplify - authenticate India all that component or HTML now for styling this component you should add the styles as well just search your sty stored a CSS file which is here inside the source directory here and import amplify angular theme you can find this also in the documentation so let's see if the things are working fine so I will type ng serve so that will start the application locally let's see if there are any compilation errors it seems to be working fine we forgot to add one thing that is our outs so go to your app folder and in there up - routing dot module tortillas so currently we don't have any routes so let's add some route I'm going to add two routes here first one nice to do so if someone navigate to stash to do which should load up the to do component so let's import the to do component up here we'll come on from to do to do component and also the default route is our earth component that will render our login screen so I'm not going to add any route card so anything as such where you guys can use it if you want what component from out slash auth component okay and let's navigate to state TTP localhost 4200 and I should say my login screen and I say let's remove this default content now we'll go to a component dot HTML and let's remove all this default content save that come back here it will reload the page and here's our login screen so make sure you don't have any errors in the network tab in the inspect element now let's add a very basic UI to our to do component as well so inside out to do component to do HTML I'm going to replace it with this bit of HTML so this is basically rendering an input type or an input box and in a button to click so in the input box you will type the to do name and when you click the button it will fire this create to do event and it will pass the to do name along with that and under it we are going to render all the to dos in Eric called all to dos so basically when you click the create to do we will add that to do into this all too loose array and that will show it in the screen so in the JavaScript side case let's import our service first so I am importing app sync service from our app sync service file and let's inject this into our constructor let's create a private variable called AB sync of type AB sync service so now we can use this app sync service which itself is single turn throughout our components to talk with our back-end services through the app sync SDK right but before that let's add some configuration or the code to our web sync service so I will go to source app and app sync service here currently we don't have anything first I'm going to import tap sync SDK from aww except sync and then we need AWS export file as well because we are going to use the graph QL in from this file when configuring a web sync SDK finally we have to import oath an oath type from data place amplify and AB sync both link because these are necessary for sending out the credentials of the user when requesting the information so let's see how to use this I'm going to paste some code into the constructor let's go through that first I create a variable called client so this is basically AWS app sync client that we have exported up here so as for the configuration we have to pass few attributes first one is the obscene craftwell endpoint URL that we get from AWS export file because inside it a big export file we have this particular endpoint let me quickly show you here so that's the URL and the region so again in the same export file you can get the region as well now we have the earth attributes so type is basically it's a type of Amazon cognate or you suppose because we have initializer user pool you can here use the API key if you want but use cognate or usable because that is the standard when it comes to enterprise applications so you got to pass the ID token along with your request so that's why we are extracting the ID token from current user session so we are getting the ID token and said send it in attribute called a double T token so that's our client basically and we need to export this client will have a variable up here let's say it's C and at the bottom of constructor let's assign underscore HC variable to our client and let's have another function called fitzy so what does this IC mean anyways guys so it's a is basically hydrated plant donate the arrow function here so here we are returning this dot underscore HC hydrated okay a quick word about aw sep sync client so this is basically using Apollo client so Apollo client is graph QL implementation that has offline features as well so a doubly sep sync has created a wrapper or another implementation from Apple Oakland and that's what we are using today so in and we can cash all the queries in the local storage or any other storage medium and here it will wait until the cache is populated so then only it will return the client or the appsync client so let's see how to use this lapsing service i will go to to do component we already imported the app sync service here and in our HTML we have create to-do function that will fire when the button is clicked so let's have that function implemented so I will create an async function for that so it will pass the to do name here as the parameter and let's check if to do name and some value and if so let's create app sync client so I created a constant called client and I'm awaiting this dot eps Inc dot HC so these two types Inc is our service here and it sees the function that returns the hydrated client right so we are waiting for the client and afterwards we have to create our mutation so what is the mutation is basically creating this to do in the database right so let's look at our mutations so if you can remember inside our graph QL folder we have mutations so here's our create to do mutation so we need to export or the import this mutation into our to do component so let's do that I will import create to do mutation from graph QL mutations and also I'm going to import graph given tag library as well import gql from graph QL tag and let's import other tools as well like the queries and the subscription because we have mutations so we may need the queries and subscriptions or at least queries so I am importing the list to do queries from this queries ts file here inside the graph QL and I have created a mutation as well so how do we make this mutation guys so basically now that we have the up sync client we can simply use a client or mutate right and at the mutation together with the passing to do value so that is fine but are we using the offline features yet no right so in order to use offline functionality we have make sure that if there's no network cache whatever the mutation in the local storage or whatever the storage medium that we are using for a front-end application and thanks to Apollo client it will maintain a map or queue of all the mutation that is been added during the offline so it will maintain this queue so this key will have all the mutations let's say you added three to do so it will first add to do one into this queue offline queue and when you add the second to do it will push this to the queue that one as well so similarly it will like populate this queue in your local storage at the front end right so whenever the network is back so when you online so it will start executing this qy term from the order that they were received so it will start from the first element of the first item and it will go to the last element that was added so now to call this functionality there are two ways first one is either you can use an update function that will be called when offline as well as when it is back online or you can use the build you tation help from appsync sdk which is the recommended method so let's use build mutation for that I need to import build mutation up here first import build mutation from AWS EPS Inc and here let's get the result of the mutation into a variable called result su LT okay and I'm going to copy/paste some code here okay now let's go through this code so I created this constant call result and I am awaiting the client again on method called mutate so this is basically the function that called the mutation from the app sync SDK so client dot mutate and so inside the parentheses we have to pass our me a build mutation function so the build mutation function so as we have imported up here so we see it's built mutation and inside that build notation it accepts parameters here's the first parameter so it is the first parameter is the client our Pro client right I've seen client rather and then we have to past the mutation so which mutation are we going to call it's the create to do mutation right so created a mutation we have imported up here and I'm going to grab that mutation using graph QL tag library so gql so this'll add proper graph QL tags to our create to do a mutation and then the third one we have to pass the input type so we have not yet imported our create to do input so let's do that at once so we need to import the inputs as well so currently we don't have any inputs associated here so I will create a new file called inputs dot T yes and here I'm exporting the create to do inputs let me paste that so from where did I get this so I'll show you so it's basically this text that I copied from our graph QL schema so if you can remember our graph given schema is available inside of amplify folder in the current backlog API in the build graph QL and here you have create to do input just copy this and come back here and paste it in here so simply add to backticks and export it now we can import it from here so in our to do component or TS file so i'm going to import that create to do imports from graph QL inputs nice so now our error is gone so we are decorating in that again with graph QL tags and variables so variables is basically the inputs that we are providing it right so as you have already seen it is expecting and named the to do name and that is a mandatory field right so you know appsync back-end we are generating this ID automatically so we just have to pass the name here so I saw variable we are passing to do name dot value so we have to pass this as an object so let me just take it out I will add object literals here name has to be to do name dot value nice so then we are passing another query list to do is query as you have imported it up here so we have imported list to do squarish as well so why do we actually need this guys so in built mutation so what basically happens is if it is offline if there's no network what upload plant does is it will use one of the queries that has cached earlier in the local storage so here it used the list to deuce query so it will read all the to do's or the list of to dos that it has cached earlier so it reads from the cache and at this newly created value into the cache or the list to deuce array so it will read the cache and write the new item into the cache as well so finally we have to pass the to do type so that is also required so when the network is back it will play all the mutation that is recorded inside the cache and this another concept called optimistic UI update so that is basically when there's no network obviously result is not going into the database right and it is stayed in the cache but we will update the UI even though it is not persisted in the database so that it will give a better user experience for whoever the user using the application so how to do that optimistic UI update so once we have built the mutation and it returns the results here let's push into the array that we are referencing in the UI so that is all to do's and I'm going to push the result that is returned here so that is all to do's and I think we have not references up yes so let's add that variable up here all to deuce of any type and down here let's push that item in the cache in this this dot all to do store push and it is inside the result variable result dot data dot create to do and let's empty our to do name Valley West Rev so it will look nice on the UI all right now when loading of this component I need to like show all the to dues that has been earlier added right so let's populate these all to dos with a query by calling the list to do square e using our app sync client so in ng on in it I'm going to paste this code so I pasted this court so it's basically these two types inc dot Hydra del transfer you are calling our service and then you get a client and inside that client you are calling the watch query so that will basically do a query on less to dos which you have empowered up here and the fish policy is cache and network it's basically check the check cache and then go into the network and we are subscribing to the data that is returned from the query and we are setting this total to dues to the data that is returned from here it is dated at least to do start items right now as I previously mentioned this code will be available in the G table link below you know it all looks good so let's see if it is actually working so I will go to my UI do a refresh and make sure you don't get any errors and now let's create account click create account your username password how to add capital and numbers there sign up they should receive an email to your email address get that code and paste it here and confirm it so then you are redirected login page again so type your password sign in ok now you are signed in so now let's navigate to to do I don't see any errors that looks good and let's try to add it to do shall we go to team yes it done it beautiful let's verify that I will go to aws.amazon.com and into my dynamodb login to your console guys okay and this is my table here click on that and in the items there you have it so it persisted beautiful so let's add another one II healthy yep that is also added let's check that there you go now let's try our offline so I'm going to click here and turn off my Wi-Fi so it's turned off and I will add offline to do let's see if I see a network request it is directly added thanks to our of domestic UI response but as you have seen there is no any network core so let's reconnect our Wi-Fi and and have a look at here you should see the request will automatically be made there you go this is the request that could automatically made and now if you go to dynamo DB and refresh it they I have the offline to do beautiful if i refresh it again you see those I indeed persisted so this is what I want to show you guys I hope you guys enjoyed this and if you guys like my videos so if you want to see this nature of content please like and subscribe to my channel guys thank you very much

Channel: freeCodeCamp.org

Views: 38,625

Keywords: appsync, aws appsync, AWS AppSync Tutorial, aws, AppSync Tutorial, AWS AppSync Tutorial with React, graphql, appsync angular, angular tutorial, appsync course

Id: QEMfnr5MO1w

Length: 94min 53sec (5693 seconds)

Published: Tue Jun 11 2019