Creating a Trello-like app with Angular and GraphQL

and [Music] okay should be good now so hello everyone welcome to angela kenya session um today we have funness who is going to be taking us to um creating a trailer like app using angular and graphql and without much further ado i like to hand it over to funnest to introduce himself and tell us more about himself where does he work what does he do and um of course take it away all right welcome friends okay thank you very much uh hi everyone so i have a card so that i can introduce myself and i can start with this i can save my screen and start start over so give me a sec just to prepare everything yeah no problem so i can share my screen just uh let me know if you can see my screen yes yes you can see the screen yes nice nice so hello everyone uh thanks for having me first of all my name is uh thanks prodromal thanks for the great introduction uh an angular instructor on in the company code hub and tech director of the company code hub actually is a private institute where we teach either individuals or in companies private private training classes and i'm responsible mainly for angular but we have many different topics there i work as a frontend lead in the company architects and uh at the same time i'm offering the book mastering angular reactive forms and i expect to have it already at the end of this month currency figure to meet other deadline so i have two more chapters to fill in and i guess that then the publisher will need about two months to publish it to the market and i'm uh organizer of the angular athens meetup and on the bottom right corner you can see my contact details so on twitter you can follow me in program web in my blog if you're going to check is a blog.profound.me i have some cool articles there or at least they're cool for me and if you're going to connect with me you can find me in linkedin in program web so that's all from my side this is this is me i don't want to spend more time and say more i think this covers many things and i think that we can start over the presentation it is okay uh so yeah i will start immediately so uh the talk for about is a channel like app with angular and graphql so in in this talk in this 40 minutes talk i will talk about what is graphql from zero to some degree so that you know the basic terms and how to use graphql so it's not an advanced topic it's a more like that we start from the very very very very basics but we will reach a very good level so this this will be the first the first thing what is graphql and the second one and actually all the talk is about and and the applications that have built is about the apollo framework which is a very good one and i use apollo both in front and side and back inside so for this application for the trello app uh which i will show you later on how it looks like i have built a backend application node.js backend application using typescript and mongodb for the data source and the communication back and forth between front end and backend is with graphql and last but not least the trail application of course tello is a huge one it's a big application so i will try to approach it and showcase some some cases to you so let's start over with the first one of what is what graphql is um so to explain what the graphql is and since rest has become the dominant api uh style for communication between back end and front end so i will present the graphql basics from a rest perspective so in rest we have the the verbs get post put delete and paths right some more but these are the very basics now let's think how those verbs affect the data source so with get we are quitting we are getting the data right so no changes happen in the data source just getting the data whereas with the other verbs post put deleted paths we are changing the data source we are mutating the data source now if we try to group those verbs uh according to the action to the the data source we can say that with get we have one group and this is query whereas all the others post put deleted paths we have another group and this is the mutations so we have two different groups now on the other side on graphql we have only two things and this is query and mutation so from now on when we talk about query you can uh you can immediately think that we're going to get something from the data source and when we talk about mutation we you can think that we're going to change something in the data source either this is create like we have in post either update like we have input either delete or partial update like we have in parts so in graphql only two things exist in order to have a better flow in this talk and to have a common understanding between me and you let's talk about what is the payload and that we are going to use for this application so we have the client and the client wants to have to send the request to the server so sends a get request and the server responds back with this this is just a very small json payload and what what we see here is that we have a project and we have id name some properties and also have the tasks which is another property of the project an array with some other properties so nice this is a very very very simple payload like i said previously so the backend that i have built is based on uh on typescript so how can we create this payload in backend using typescript so here just a parenthesis i'm going to spend uh two or three slides talking about back end and how to use it i'm not i'm promise you that i'm not going to spend a lot of time i know that this is mainly for for angular but it's a very very important to understand all the mechanics that's why i will spend some two or three slides so how can we create this payload using typescript we can use of course interfaces and what we can see here that you have one interface the project and we have some properties id of type number name of type string and tasks of type task array and here we can see the other one the other interface the task with the property id of type number and name of type string nice and how about in graphql so graphql has a domain specific language a dsl and it is a strict type language so that's why we have to create types so let me go back a bit so here we have interfaces but what we have in graphql we have types so type here and type here so we're creating two different types the first one is project and what we can see is that we have some properties id of type id as you can see is a sort of similar to typescript it's not typescript it's graphql but it looks like a typescript on the left side we have the property name and on the right side of column we have the type another property is name and the type is string a please note the exclamation mark which means that this property is required and also we have the task which is a task array and what about task what is this and here we can see the type it's another type of two different properties id of type id and name of type string so in graphql we have more other types like string in float boolean and id these are all the types that we have in graphql now again in this talk i'm going to jump jump between rest and graphql rest and graphql so let's see now now the following in the rest imagine that you have a client and the client wants to play around with projects and to do this the backend is like okay for this one for this particular request that you have that you're going to play around with projects i'm going to create a new endpoint and this is going to be projects nice so in order the client to play around with this either forget post put delete or patch is going to use always the slash project's endpoint now think the following what about if the client wants to play a for a specific task of a specific project how can we do this so the the backhand is like you know what i'm going to create another endpoint for this so we had projects and now i'm going to create a sub resource and this is going to be tasks so in order to play around for all the verbs we're going to use the new sub-resource that has been created from the backend so every time that we want to have something new in the client of course we have to have a communication with the api developers with the back-end developers and now have another request from the client and the client now wants to play around with tasks regardless of the project and of course for this one for this particular action the backend has to create another endpoint and this is tasks and again the same story here for all the verbs we're going to use the tasks and point so currently we have three different endpoints but how about now in graphql how can we do this how can we achieve this the same story the client wants to play around with projects and the backend is like yeah you know what we have our handshake our communication is based on graphql and for this matter well i'm going to create a new endpoint and this is going to be graphql so if i want to play around with projects either for query or mutation i'm going to use the same endpoint graphql and now what about if the client wants to play with a play around with tasks a specific task without any project again the backend is like we have one endpoint and this is graphql so in order to get data or to better say this to create data you have to use graphql if you're going to mutate data you have again to use graphql and what about now if i want to play around with uh for with all the tasks regardless of the project and the backing is like dude you know the drill you know how it goes we have only one endpoint and this is this is the magic here of graphql so again everything is going to be done based on this endpoint both for query and mutation but here we have two different questions the first one is from client and the other one is from server so the first one from client is how can i get the data from the server because you know what we know that in order to get the data from the server using rest i'm going to use a specific endpoint but how about with with graphql and on the other side what we have the other question is what kind of scheme am i going to return and when but of course we are from the developers we don't care about servers so we are not going to spend that much time but we will see a little bit how to do this if we sum up we can say that the client is responsible for what and the client and the backend is responsible for hull now let's start and dive deeper a little bit on the client how can i get the data from the server so the client has the power on its hands to construct the queries yeah the client construct the queries this is the magic of graphql so what we see in this slide is a legit graphql query and we also have a timeline on the bottom so this one if you are an sql guy this might help you so what we are doing here is equivalent to the sql query so p stands for projects and t stands for tasks different aliases so what we're doing here is that we are selecting the project's id the project's name and the task's name the same goes here with the graphql query we're getting the project id the project's name and the task's name and imagine now the following that we have later on during that's why i have here the timeline later on in in the product we have a new request from the product product manager product owner whatever and he's like you know what i want one more property one more information to display under each project and we're like okay i just have to change my query so i will change my query i will add here description and boom i have all the information that's it and if later on we want to have the description for each task again we have to change the query and when i say we have to change the front-end developers have to change the query we don't have to have for this one for this particular action we do not have to have the communication with the api developers this is only up to us and now imagine the following what about if i want just to have a list of projects and without regardless of the tasks we just have to update the query this is this hides something very special and we will see why this is a powerful if you're wondering how the communication between the front end and the back end uh happens so this is a screenshot of the developer tools and what we can see is that all the requests are based on slash graphql this is in this port runs at least on localhost at the back in the server side all the requests are under the same verb under post and what are we posting the query so here for example we're creating some something about get projects we will see later on how those queries are since graphql returns a json object we do not have to worry how to construct our templates so what we see on the left side returns uh what we see on the right side so everything is under adjacent so we don't have to worry about and how am i going to to do how to do with my blades this is a very easy and now let me jump a bit on the server side what kind of scheme am i going to return and when and as i said previously i promise you i'm not going to spend a lot of time explaining all of these but it's a very good uh to understand this so this is the backend code but it's very important to understand the mechanics so the backend splits the code in different resolvers and each resolver is responsible to handle a top level query on the right side we have a query with two top level queries the first one is projects and we have the other one is tasks so we have two different things two different top-level queries so think the following what about if we do not query the tasks like we saw previously if we omit this completely if we do not query the tasks this code will never execute and this is something very powerful and the reason is that according to the backend code here when i have the fetch and return means that i have to open a connection to the database get the data uh do any manipulation if i need and return the data back to the client and the same goes for the tasks but if we do not request the tasks this code will never execute this is something that we do not have in rest because in rest if you are going to get the projects most probably you are going to get all the tasks at the same time unless you have a different communication with the api developers and ask them to create another sub resource now about the documentation so we noticed uh it's as i said previously it's a dominant api style for the communication and of course there are plenty of tools out there for documentation as well such as swagger or open api with i think many more but what about in graphql so with graphql and particularly with apollo we have a playground which at the same time is a recommendation so let me show you so what we can see here is the playground it's run it runs under the port 3001 which is the server and we have also the graphql which is the only endpoint that we expose so on the left side here what we can do is construct the queries and on the right side we can see the results if we see here there is a green thingy a green button and if i click it what we can see is uh are the queries and the mutations that exist on the backend so what we see here are the queries and mutations with queries we can say that we have projects projects tasks and tasks and some more mutations for example if i want to create a new project i'm going to use new project if i click for example on the projects i can expand this and i can see more details for example here with projects what i can see is that it returns a type of project and what is project we see here that we have the type details project means that you have id name tasks and order so let me close this and let's see a small example so here i'm going to write equity project and name if i click this button which looks like a video button uh actually executes a query what we can see is that we have the projects and other projects will have two different things not the following but this is a query of graphql it's not a json looks like a json but it's not and what we have here is the projects array and we have two different projects repeated to test and to do and what about if i want more properties like for example id if i click sorry if i click play the execute query we can see also here the id and the name and of course we can nest it and have more queries for example i want for each project to get also the tasks and from tasks i want to have only the name no more than this only the name and this is how it looks like so what we can see here is that we have the first task and the name is sorry the first project and the name is ready to test and under this one we have only one task and this is the name with task two and under to do project we have three more tasks and of course here we can expand it and write more and now you might be wondering wait a minute why do we call this graphql what is the graph here because i don't see any graph of course we can go crazy let me delete the ids from here and they did from here and have it very very simple and let's let's see the following as you can see here in the recommendation in projects the project type details has also in the tasks has also a project and they will click the project we can see that we can have the tasks and so forth things might go crazy so here if i'm like i want to you know what i want to have also for this particular task i want to have the name look the following that we have ready to test and under this project we have one task with name task2 and this task belong belong under the project with name ready to test and the same goes here we have another project it's named to do and under the task with name task 1 we have the name of the project and of course we can expand this further and have it like i'm going to have here also this one and again i want to have a very huge tree of queries and whatever we query we have all the responses back so as i said previously this is something powerful on our hands on the hands of of front end so let's continue with this and having in mind that with apollo and graphql we have embedded playground and at the same time documentation something very important again let's say that here we have a separation and we have on the top rest and on the bottom graphql think now the following that you have a client and this client wants to get a list of products and a list of customers how can we do this we have to initiate two different round trips two different roundtrips for this one with rest but what about in graphql for this one we have to combine both products and both customers in the same query which means only one round trip let me show you how how we can do this again let's go back on on liquidity i'm going to delete everything from here and what i'm going to do is i'm going to query only from projects sorry from projects i want to query only the name and this is what what we have and what about now if i want to query only the tasks i want to get the tasks and this is all the list of the tasks and what about now if i want to combine both of them i'm going to have a list of tasks but also i want to have a list of projects how can i do this as i said previously combine them together and what we can see here under data that will have tasks which is an array let me close this and also we'll have the projects ready to test and to do so with graphql we can have only one round trip by combining many queries together now let's talk about the apollo framework so in upon framework we saw previously that we have of course the queries and limitations but we have another flavor of queries and this this is the polling so the polling executes equity periodically let's say that you want to have a query every you know 500 milliseconds or 1000 milliseconds and so forth but if you do not like to have a polling you can refresh equity on a particular user action and we will see later on how to use this of course we have the mutations like we saw previously and we have subscriptions so with subscriptions we can wire up a graphql with a pub sub system like redis to implement subscriptions in graphql in a nutshell what this means is that when server has something ready it just publish it to the client and client just have to have a subscription on this on this subscription let's say on this observer we have also optimistic ui so with optimistic ui we can simulate the results of a mutation and update the ui even before receiving a response from server we also have pagination so with pagination there are many ways to implement it i think that there is a a specific a particular action to invoke a particular method to evoke and this is fetch more if i'm not mistaken uh but there are there are other ways as well to implement imagination and also it has an embedded state management here when we hear when we listen about state management it rings a bell and we're like whoa don't you have ngx njxs akita and many others do we need to have also something else a new state management and actually i'm encouraging you to start using the state management of apollo because this comes for free and utilizes very in a very smart way the cast and explain later on what this cost is all about and if you think about state management if you lie and and and if you like to use other state management tools you can merge them together you can combine more more than one together and of course it has a very nice arrow handling now let's talk about let's say that this is the theory these are the basics now let's talk about the trello application in order to split my work what i i really like to do is to split the work in four different steps so by those four different steps we're going to apply the basics the first one is the documentation which means that we have first to have a look on the documentation the second one is to construct the query the third one is to create a service an angular service and use the query and the first one is to consume the service in the component so these are the steps that we are going to follow and showcase some some some things about how to create a trello app which is this thing this is what we are going to create so the funny thing here is that it would hide taylor if we sorry if we write hello in greek letters like we see here we read it like trello and trello means crazy so we're going to create our crazy board so in this application the vertical columns are the projects so we have here one two three different projects and the items inside are the tasks okay so let's start by saying how can i get the projects as i said previously we have to we have to start with the documentation so this is the step one so we need to get the project so we don't care about mutations but we care so i'm cool across this but we care about queries what do we have about queries we have project projects tasks and tasks what do we want to get projects so this is what we're focusing on the second step is to construct the query we're constructing the query and having lag like i want to get projects and from projects i'm going to have the id property the name the order and from tasks i want to have the id and the name the third step is to construct the service and this is no more than a very very very simple service we can see that it's provided in root which means that we have a singleton service but now to convert this service to a more meaningful to apollo client we will extend the query this one which accepts one generic type and this is the response this query will return so we use this one the query and we define here the response this particular query is going to return a project array and this is the type and here in the document we have to paste the query that we constructed previously and this is our query project id name order and from task are going to have the name and the fourth step is a component so what what's happening in the component so let's let's see the following in the constructor of course since we have a service we have to inject to inject the service we have the injection we have the process dql and in only need i am doing the following this project dql dot watch value changes does uh does does it even get bell when you see the value changes it reminds me like we have reactive form something like this but in general that we have something that will have an observer so the important here is that we are using the watch property of the query and by doing this we register an observer to the cast this means that we never have a change on the cast the embedded cast of graphql this property data dollar is going to automatically update it and of course the later the the the next step is to start using the data in the component meaning the template i'm not going to spend a lot of time on the component on the on the template side but what is important here to understand is the flow so imagine the following that we have a component like we saw previously and we have a watcher where do we have the watcher in the apollo client and the apollo client itself is responsible to send the query in the graphql api server and the graphql api server what it does returns the data and from the data we immediately update the cast this is something that happens automatically something that we notice here is that we have two different arrows this one and this one this means that this query that we see here we have the option to query the graphql api server but at the same time we have to opposite the option to query the cast yeah we use the same query either to use to use it on the server or in our cast now let's see a demo this is the application this is the trello or the crazy board the trello board that we are going to use what we can see here is that we have one and two different projects and inside this one we have some tasks if i click this one we can see a model and we can see that this is task two in list are ready to test if we click this one we can see that this is task one list to do of course this is this is empty this is a let's say a work in progress uh i plan to to improve it uh even more but we don't care about this uh uh on the time spending so what else can we do with with this application we can rearrange it drag and drop if i want to have this here we expect this to work but it doesn't but this is part of the talk we we are going to fix this we are going to fix and have it like if i if i drop it here i'm going to persist it there and also we can create some more tasks like i want to create a task whatever task 3. now we can see it now let's see a little bit about the code let's see the code so we have the components and the containers the components uh i named like components and here i have some dump component let's say and in the containers i have just the smart component so in the project list component i inject the project list service and what this is all about let me click and follow this actually what we see here is like a facade pattern that i'm using different other services in order in order to either to add a project either to remove a project to a tasking project and get projects and the git project is what we saw previously that we have here the watcher so we are watching about the changes i'm not going to have something here about comments and i will explain later on what these comments are but let's continue on the next one currently what we saw is how to get the projects right how can i add the project now things might go more complex here we're going to follow the exact same flaw that we follow previously but the thing here is that we're going to have a manually interaction manually we're going to update the cast and to do this we're going to follow three different steps the first one is get the slice of the cast the second one is mutate the data object and the third one is write new data in the cast so three different steps but in order to work like i said previously the first step is the documentation now we do not care about queries we care about only mutations and what we want to do we're going to create a new project okay so if i create a new project here what we can see is that this method this mutation returns a project if i click i can see more details like we saw in the interactive playground the second step is to create the mutation and the mutation is new project and i'm providing here the input and in order to create a new project according to the backend code we have to provide just one property and this is the name here we can have a separation this one is the request the request to the server and this is the response as soon as we have a correct response from the server i want to get the id and the name so again even on the mutation on the client side we are responsible to construct the queries and let's see now the service so for the service we have again one more simple service but of course we need to have more semantics semantics about about apollo client graphql and we have to extend now this time not the query but we have to extend the mutation and the mutation except two different types the first one is the response and the second one is the request variables what will be the response and what are the request variables and here in the mutation we have to paste our query that we generated previously when you start fed with with graphql and we see the mutations and all of these weird things it's very odd because uh at the same time at the first time it's like really really odd but i promise you if you start working with graphql you need to have to write about three four mutations and you will get used to it because it's part of how the syntax of graphql now the fourth step is the component what you have to do of course we have to inject the service that we have just created new project dql this is at least the name that they decided to want to name it and imagine now the following that we have a button we'll click the button and we call this method the method add project which accepts one property and this is the name of type string what you have to do is to call the mutate provide the input and i can say that this part if you follow the documentation of graphql or if you follow this talk this is the easy part what it make it even more complex is how to update the cast and in order to do this you use the second the second property of the mutate method so here we can see this object and particularly we are going to use the update method with update we are going to manually update the cast to do so the first one is the first step is to get the slice of the cast and this is how we do this please note here that we use edit query by using read query method what we're doing is that we're sending a query to the cast so the next step is to mutate the data object so of course more mutation goes here didn't have that much space in this slide and the third step is to write new data in the cast so here we have read query and here we have we have write query so again we get something from the cast and we manually update the cast now let's see an example so the first the first thing is to make it work the add another list if i want to create here for example wip from work in progress i want to click at least and immediately to see this happen on on the code of course we'll have an issue and we will try to fix this let me open the developer tools focus on the network let me clear everything and i will reload the previously the pre previously that we created another list a new list of course this created in the back end but we didn't see it because we don't have uh we didn't use the cast so how can we do use the cast in the add project what we have here is new project dql mutate so let's dive deeper on this one what is this all about new project dql is the mutation that we saw in the slides no more than this we're using the new project dql the mutate we're providing here the name and now let's remove these comments from here add a comma and let's spend some more time the first one as i said previously is get the slice of the cas the second one is top data state and the third one is to update the cast and it will go in the browser and if i have here let me clear everything if i write work in progress and at least immediately we can see that work in progress added in the list if you notice here we have only one request and this request is about the mutation we didn't get anything back but at the same time we can see it in the list now let's try to have a connection of the cast connection meaning to understand how this works i'm going to collapse this and collapse this one when we you in order to get the project what we did is that we use this project gql right so this is a particular service which runs a particular query in in the api server let me open now the add project and look here so what we're doing here is that we use read query and as i said previously we have the option to send a query directly to the cast and in order to do this you have of course to use a query so this one the project dqr sql is exactly the same with this one so what we're doing we're getting the slides from the cars we're updating the slash sorry we're updating the cast and then we write again on this query so this means that when we write something this one because we have a watch we have an observer we observe the changes on the cast will immediately update the data we have also the option here to instead of watch to have feds what will happen we have fetch let's see so here we update the cast but we do not have the observer anymore so if i create something else like i don't know a test at least we have it on the back end but we do not have it on the ui unless we reload it what has happened because of course we deleted the observer so if you remember previously we said about that we have also the option to refresh a query if we try let me reload if i try to rearrange this and uh sweet to do with work in progress we want this to work how can we do this well we're going to use the update project's order as a method and this method instead of using the update now you use something else and this is refresh queries this is uh truly i really like this this part because the thing that we're doing is that you know what i want to refresh this query who uses this query the update project's order is totally uh unaware of who uses this particular query the only thing that i i'm saying here is i want to get the query and apollo does all the magic so this means that when this action is done i'm going to refresh this particular query and this query is already used by get projects so let's see now if we arrange this we can see that here we have the working progress let's see the network so in the network what we can see is that we have two different uh round trips the first one is update projects and the other one is they get projects so two different things i think that i don't have something else to show case so the other one is how to remove for example a project and works exactly the same with with a watcher and utilizing the cast so when you start working with graphql and you see that you have the option to you have the option of refreshing the queries and because this is a lot easier it's easier to start with this and this is the very first step that i followed myself but i'm encouraging you that as soon as you gain some experience with graphql stop using the the reference queries and start using the manually update the cast and particularly how to use the update method of the mutation so now let's close with some more configuration and the configuration is how how to make things work how to how to connect the front end with the backend what i have here is a graphql module and in graphql i provide the apollo options and i'm using the factory and the factory is the create apollo so what we can see here that apollo uses something like links in different for example in node.js we can see that those links are called like middlewares uh someone else might call it like interceptors and it does something like this like intercepting so with links we can for example concus together the error handling on error link which means that we have two different kind of errors the first one is the graphical errors which means that we might have something erroneous on the query and the other one is the network error this is something very cool and the reason is that imagine the following that if you have a graphical error or a network error you can from this part you can throw a toaster message an alert message to the user saying that something went uh went bad and the other one that i'm using here apart from the on error link i'm using the http link this is something the http link from apollo angular xctp and this is the way that we connect the front end with the backend and here what we're doing is that we're providing the uri which is the uri of the backend now let's uh let's close with this one of understanding the problems so the first problem that we solve with graphql is the multiple round trips there are many cases that we have to avoid the round trips if we can do this then we can utilize the graphql and combine more than one queries in the same and boom send it to the server the second one is way more data transfer than required so in the past i used to work in a hospitality and then points that you had to exchange between backend and front end uh had a lot of information a lot of information so what you have to do is construct uh how have the conversation all the time with the api developers and ask them to create more than one end points maybe for the same for for one view and we did this because we have we're going to eliminate uh the data so with graphql we do not have this problem because anything that we need we have just to create the query and the first the third one is that we no longer have a problem about api versioning and maintenance and the reason is that if the backend for example wants to create a new method it's going to create a new query or a new mutation no more than this since we do not have a complex code on the backend or the complex mainly the complexity some of the complexity especially for the queries from front-end we don't no longer have to worry about api in versioning and that was it thank you very much and you have any questions i will be more than happy to try to answer it all right all right thank you very much francis uh that was a very intriguing um session um and i'd like to open the floor to any questions um that any any one of you would have for furnace it requires to this you can just unmute your mic and ask the question okay um so if not painful yeah okay so i just wait for someone i have a question to myself um so i i wanted to understand um so see the way with rest apis work right um for example if you want um products right you have to provide the the url that um let's say the urls um the api endpoint that says something something slash product and then if it's something else like customers you have another one something something slash customers so um you mentioned that you can do this with just one round trip so how would you implement that um when it comes to the code itself because as i saw that the url is just one url which is like something something slash graphql and then when it comes to fetching that specific data where does it happen whereby you can choose either you want the products or you want the customers let me know on the backend order from the end how to do this on the front end sorry in the front so on front end how we do this is by let me show you is by constructing different queries uh so for example are going to have equity for tasks and for projects so in the same query we can have uh two more more than one resolvers let's say graphical queries if this is what we you ask and the response is that we have a tasks array and the projects are a okay okay and then so yeah yeah please go ahead yeah and then so for example now in this case right um i saw something in the code um if you open your editor if you could open your editor the editor which one this one um the vs code sorry yeah yeah um so i just wanted to understand um so when it came to the service right the project yes the service um so do you have where when you fetch data from the database like just getting the data from the database do you have a function for that yeah sorry button from the side i have it on the back end i can show you so for example the following that you have the new project dql and this is just quitting uh i'm sorry just mutating and here we have the new project let me close this and let me open this is a monorepo and let's open the server and on the server what we have not this one on the services i think this is let me find it api and under project yeah so what we have here are different resolvers i will close this and i will have it like within your project dql what we can see here is that on the mutation actually in this part we are defining the queries and the mutation that happened that exists for project resolvers and for projects to have the new project what does that mean they me this means that once we're going to invoke this particular resolver we're going to invoke this call this uh this code sorry wrong [Music] and this is actually the project sql project model create this is based on mongoose right this one the new project dql this one is exactly the same with this if you see a new project a new project so this is how the code works okay okay okay yeah i think i've understood yeah and the same goes of course with with queries so here we have the project and let me go back on the project list service and have the project dql again here we have the projects and we can see even here that we have projects and what what happened with the project is that we execute a different part of the code okay so so that means for example if let's say this is an api that gets information of projects and then also customers what you can do is of course create your resolver for customers and then include it in the query section exactly exactly as you say okay exactly okay okay okay and then of course creating a typescript file um that specifically handles customers right so the same way this one specifically handles projects so what i have here is that i have on the graphql yeah i have the mutations and the queries so as you said you have to get something else about uh about the customers in order to make this work and actually no sorry on the server uh so we have project and task different things so we have to create the same thing for customers let's say and for customers i'm going this is something i think think of this like having a the configuration and having the configuration then you have to define the types so these are the types that we had in the talk in in the slides so the customer could be a new type type of customer some properties and some inputs or some queries or some mutations and then let me show you the following so when we have so when we have the types that were defined in the graphql we have to follow with particular resolvers so the resolvers we can say that they are sort of the same with controllers in uh in rest so what we see is that we have a task and this task is this one we have tasks and tasks is this one and the same goes for new tasks and this is of course as you said we have to do this for customers okay okay and this is something and this is the part that i saw previously that from the task we can query a particular project this is this is a nested query okay okay the project would not invoke this part of code at all i hope this answered the question okay okay and so and uh does um does graphql have a problem with for example if you're conquering some data it brings with it like everything else that you don't need or is it like very specific and straight to the point that i just need data for a specific endpoint like let's say i just want customers does it have that eq if i'm gonna call them endpoints um it's gonna give you all the data or it's very specific to what it means can you repeat i think that i lost you a bit sorry sorry yeah i'm asking um does graphql uh have an issue with say you want specific data but then it just gives you everything and it's really up to you to decipher what you what you need or what could be the downside with glasgow if there is any actually a downside spending of data the thing that you said previously uh myself yeah like in searching data here i didn't find any any problem any downside on this on this thing uh and if there is any downside there is one for example what we can have with rest we can have some sometimes we have cast servers in order cust servers based on each endpoint different endpoint if for example a user request for project slash one slash tasks last two i'm going to cast this one for a particular time i'm going to cast this for 10 minutes this is something that we use in rest this doesn't exist in in graphql because everything happens on under one and point but of course there are other mechanisms in order to use cast this is one downside so if you do not have experience with graphql of course we need more time to to gain this [Music] and so from your from your own perspective what would you say um is the landing curve for graphql for anyone who wants to get started with it is it a sleep learning curve or it's pretty simple no it's a steep learning curve it is uh because you have to understand many so the first time that i had to create an application using a graphql the complexities was both as a backend as a full stack developer the complexity was both in back end and in a front end as soon as you set up everything then things are easier but it has a steep learning curve because you know what the thing is that it's a totally different way of thinking so whenever we want to get the data what will come to mind is that of course i want to have a new http client and i'm going to invoke a new endpoint uh sure send the request to a new endpoint getting the data i'll have some rxjs resolvers rxjs operators and boom i will do everything on the on the component with graphql is something different of course you have your all the the power of rxjs you can do whatever you like but you also have to the queries okay well it has it has a steeper okay but in terms of performance this is the thing it has very good performance very very good performance that's why many times they use it also in mobiles because the client the mobile client has the option to request particular uh particular properties no okay okay all right um anyone else was a question okay um so i know that some people who joined um joined us probably a bit late but don't worry um decision is recorded so you'll definitely have access to the content by tomorrow uh evening um by the angular kenya youtube channel so if you're not uh if you've not subscribed to angular youtube channel angela kenya please just go on to youtube and subscribe and you're definitely gonna get all the content that you may need with regards to angular and uh if the end if there are no questions i'd like to say a big thank you to furnace thank you very much thank you yeah i was taking his time to take us through this um personally i started off with angular angular um i think it's about two years now and graphic is one of the things that i've always been taught to always check it out uh when it comes to um as a front-end developer it'd be good to at least also get to understand how graphql works apart from just using rest apis and having at at least this session has given me this fascinator has given me like this another perspective on how i could see graphql so thank you very much thank you for this yeah yeah and i don't know is it possible to probably have access to probably the github repo that has on this or yeah okay so i will share with you uh both the slides and the ripple and you of course you can um spread it around definitely yeah sure sure definitely yeah thank you very much um so if yeah if anyone else wants to reach out to furnace please um his contacts are here so definitely reach out to him whether on twitter or linkedin and also check out his um his blog and see if you can have another a brief chat on anything with regards to angular and graphql and of course fundus would definitely love to have you back again uh for another session but thank you very much for taking thank you very much do you have anything else to say covered and uh yeah um that's all from my side actually yeah and oh and by the way um yeah i personally never knew funny that much i think it was through the when he submitted his application we were very interested in getting to know more about angular because when we started off with a lot of more like basic stuff but having furnace on board and giving us this all other perspective on what angler can really do with different um technologies it's really really eye opening and thank you very much and yeah if anyone is uh interested in probably joining um angular kenya please always just check on twitter we are always there so we usually post uh the days that we have sessions and as a reminder for those who probably know don't know when you recipe for our sessions we usually send you the meeting details by email and of course this because we want to avoid zoom bombing and all that but yeah thank you very much for all those that took their time to join us and yeah i'll definitely share the the resources um but with the youtube video that's going to be posted and so yeah thank you very much thank you thank you bye have a good night guys you too have a good night bye

Channel: Angular Kenya

Views: 996

Keywords: Angular Kenya, Angular, GraphQL, Angular and GraphQL, JavaScript, TypeScript, Beginners, REST APIs, Angular KE, GraphQL for beginners

Id: OsvwzYj0tbM

Length: 62min 32sec (3752 seconds)

Published: Fri Jan 08 2021