Create a Trello like app with Angular and GraphQL

first of all thanks a lot for having me uh it's actually it's it's a meet up like that uh i jumped in and i already feel like uh welcome so it's a very warm welcome so thanks for this it's uh it's amazing and some things about me so my name is franz prodromo i'm an angular instructor and tech director in the company code hub it's actually an institute that we teach a code and i'm responsible for angular and also i'm a frontend lead in the company architects i'm authoring the book mastering angular reactive forms and i expect to have it ready in next month let's uh closing figures for this and also have a free course in angular nation and the title is intro to reactive forms so if you want yeah please uh feel free to join and i'm organizer of angular athens meetup on the bottom right corner you can see my contact details my twitter account is prodromwef please feel free to follow me uh my blog is blog.profanes.me i have some cool articles there or at least they are cool for me and my linkedin if you're going to connect with me sarprodrumuf and something brand new is that i have a youtube channel and the name is codeshows with profanize and the idea is to have short videos of maximum let's say 15 minutes to solve day-to-day issues things that we have in our everyday and we want to find the solution and apply it immediately in our product and we can see it here it's i this is my channel called shots with profanities it's a brand new so the first video it was like two weeks ago uh so feel free to join and uh the today's talk is about a telu-like up with angular and graphql and the agenda in this actually in this 40 minutes talk we're going to discuss we're going to talk about what is graphql and i will start from the very very basics actually from i will talk about what is graphql from a zero to some degree so that you know the basic terms how to use it and also the apollo framework and last but not least the trello app so the telo is a is a very complicated application it has many things of course i didn't develop all the application i approached it and the apollo framework is something that i used both in front end and in backhand as well and spinning off backhand uh for this presentation i have prepared the backend is actually in node.js using typescript and mongodb and this is what we're going to use now let's start with the first one what is graphql well you know what to explain what graphql is and since rest has become the dominant api style for communication between backend and front end i will present what graphql is and the basics of graphql from rest perspective so in rest we have the verbs get post put deleted paths right so let's now think how those verbs affect the data source so for example we can say that the following that we get we're quitting we're getting data not changes happen to the data source whereas with the other verbs with postpo deleted paths what we're doing we're actually changing the data source we are mutating the data source with post we create something we put we update we delete we delete and with paths will parse update but what about in graphql so in graphql we have only two things only two types and these are query and mutation and from now on when we talk about query you can imagine that we're going to get something from the data source and when we will talk about mutation you can imagine that we either create update or delete something we are changing we are mutating the data source and to build a basis and have a common communication communication actually between me and you let's see what the payload is and what kind of payload are we going to work with for this presentation let's see the following that we have a client and we have a server and the client is going to send the gate request and the server responds back with this payload which actually a very small json payload and what we have is a project with some properties id name and tasks and inside the task we have some other properties and this is a set this is the payload that we are going to work with and now how can we construct this payload in back end so i know that this is not about backend this is about angular and i promise you that i will talk a little bit about backhand only for the sake of having an end-to-end flow and understanding the mechanics so how can we develop this in back end the only thing that we have to do is to create the interfaces so we can say that they're going to have the interface project which has the property id of type number name of type string and tasks which is a task array and what about task so this is the task it's an interface with id type number and name type string nice how about graphql so graphql graphql has a domain specific language and it is a strict type language service so for this we have to create types similarly to what we saw previously with in typescript what we can see here is a type whereas preview let me go back here we had interface but now we have a type so the type is project and what we can see here it looks like typescript but it's not typescript it's graphql and the property name is id and on the right side of the column we can see that we have the type which is id the property name and the type string and also here what we can see in this exclamation mark means that this field is required and also we can see that here we have a task which is a task array and what about the task so here it is we can create another type and this type we name it task and again we see here that we have two different properties id of type id and name of type string and again here we have the exclamation mark which means that this is a required field so graphql has some other scalar types which are string in float boolean and id we're not going to work with all of them where we will see only those basics now in this presentation i'm going to go i will present like what graphql is from a rest perspective i said in the beginning so let's see what we have in the rest world imagine that we have a client and the client wants to play around with projects so how can we do this but the backend is like since we want to play around with projects i'm going to create for you a new endpoint and this is going to be slash projects nice so we know now that for any communication that we're going to have with backend we need to use this endpoint and of course we have to use an id if we want to update delete or paths but the idea is use slash projects and then we have another request another request from the client and this is how about if i want to play around with specific tasks of a specific project how can i do this the backend is like okay so for this case i have to create another endpoint for you a new endpoint and this is going to be plus projects of course we need to have the id because this is the specific project slash tasks so this is the sub resource so every time interest that we want to create something new that has to do with a parent let's say we have to create a sub resource and now we see that for get post put built-in paths we have to use this endpoint nice and now have a third request what about how about if the client wants to play around with tasks regardless of any project how can i do this and the backend is like yeah i know i have to create a new endpoint and this endpoint is going to be slash tasks as we can see here and the same drill for get post put and delete and paths we have to use this endpoint awesome but how about in graphql so this is uh the key thing here so again the same story we have a client we have a server and the client wants to play around with projects and the back end is like since you use graphql you are going to use one endpoint only one endpoint and this is slash graphql so the client in order to play around for quiz and mutations has to use only one endpoint and this is graphql both for quiz and mutation and now have another quest how about if i'm going to play around with specific tasks of a specific project how can i do this and the backend is like man you know what you use graphql so you have only one endpoint and okay so for query and mutation will have only one endpoint and you can imagine that the same goes for tasks again we have only one point both for query and mutation and up to this point we have a question we are like on the client side how can i get the data from the server because if you think it for a while what we have in the rest world it's like if i'm going to play around with projects i will send the request to slash projects and from the server side a controller will trigger and this controller will return back what an array of projects nice but how about how can we solve this how how can we work with this in graphql we will sit in a while and the other question the second question is from the server side what kind of scheme am i going to return and when and this question is like i said previously when we send from the rest when we send the request to slash projects we trigger a specific controller so how about in graphql we can sum up here and say like the client is responsible for what whereas the server is responsible for how let's start with the client how can i get the data so the client has the power on its hands to construct the queries what we see in this slide it's a legit query and we also have a timeline on the bottom as we can see here if you're an sql guy this might help you so this query actually is sort of the same with this one so let's let's read this query what we're saying is select something from project with an aliasp and tasks with an aliast right and then we're like select the id from projects the name from projects and the name from tasks and of course here we have the inner join and the same goes here but whatever what we are doing is like i'm going to have the id from projects the name from projects and the name from tasks and the good thing with with graphql and i said previously we have the power on on on clients hands is that if later on that's why we have here the timeline if later on we have a new requirement from the product owner from the product manager named however you like and we need to display a new property for example in the projects the only thing that you have that you have to do is just update the query update the query write the description the property name that you're going to have and boom you have it we do not have to have any communication with the api developers for this and what about later on again we need to have for example the description under the tasks again no communication with api developers communication i mean verbal communication we just have to do this uh this change on our end and this is very important how about how about if now we'll have another request and we're going to display only projects and specifically to display the id and the name without having the tasks so this is very important and we'll see later on why it is that important and let's have a look how the queries look like in the network panel of the development tools so the request is graphql and this is where the backend lives and the request method is always post and this is how the request payload looks like and since graphql retains a json object we do not have to worry how to construct our templates because this is a graphql and this is the json that it will return and as soon as we have this json in norton blade everything is fine now let's go on the server side what kind of schema am i going to return and when so this is the backend code and but it's very important to understand the mechanics so the backhand splits the code in different resolvers like what we said previously that the in rest world what we have is for reach endpoint we have a controller but now we have a resolver it resolves the query and on the right side we have equity with two top level queries and each resolver is responsible for the top level queries this means that when the backend sees that we have this query project is going to execute this one this resolver and when it says that we have the tasks is going to execute this one now think the following what about if we do not create the tasks so the task resolver won't execute and this means better performance on the backend and less data in the wire this is something that we do not have with with rest and we have to have a communication with api developers in order to exclude something and how about the key documentation again in the rest world we have many tools one very common island api which uses the open api specification which is very good in graphql what we have is an embedded documentation and at the same time a playground so what we can see here in this screen it's a recommendation and actually what we can do is see it in action [Music] can you still see the screen because i switched i switched screens just a verbal because okay thank you so what we can see here actually is that on the left panel we have the place to start writing the queries and on the right side what we can see is that the results of the queries apart from these here we have a green button which says schema and if we open it what we can see is all the queries and all the mutations that exist on the back end so what we see is that on back end we have the project query the projects the tasks the tasks and also have the mutations we have the new project update project update projects order at least these are the names that they decided to have and if we click for example on the projects what we can see here is that projects return something of project array and what does project means so we can see here the details the specification but the project is something that returns id name tasks and things like this and here we have the playground which means that we can start writing and we like are going to have the project's name and if i click this button we can see that currently we have two projects the first one is ready to test and the other one is to do nice so we can expand this and be like also going to have the id and we can see it and also what we can say is you know what i want also to have the name of the tasks and we can also see this here and you might go under here why do we call it graphql what is the graph because currently we don't see any graph what we can see is that we have a project apparent and task which it's a children so what is the graph we can go crazy with graphql and create our own graph something like i want from the tasks to create the project and specifically are going to have the name so let me delete this id from here in order to have cleaner payload and if we execute this what we can see now is that in project we have let me collapse this in project we have the name ready to test which has some tasks and if we expand the task we can see that the task name is task two and this task belongs to this project which is the same with this one and of course we can be like and they're going to have the tasks and from the tasks are going to have the name and from this one i'm going to have and whatever so you can imagine that we can do very crazy things with this one and if you are wondering why do we need to have something like this uh the question is some sometimes our uis are very complex so what we can do is just construct the query get the data do not mutate your data at all and just use the json as is in your screen so let's continue with this one and something very good is the round trips so in rest imagine the following that we have a client and this client wants to quit the products and to create the customers so for this one we need to have two different round trips how about in graphql though in graphql the client if wants to have created the products and the query the customers can combine them in one combine them in one in order to have less round trips and for this specific case we'll have only one round trip so let's go again in the in the playground and we can see it in action but previously we saw how to get the projects and it would be like i want to have the project's name and these are the projects and how about now if i want to have the tasks name can have it like this so these are all the tasks and how about if we combine them together i want to have the project's name and also the task name so what we can see here is that we have projects and tasks and from projects we have what we created and the tasks the same so with this one we minimize the round trips in the server now these are the basics about what graphql is and now let's see a little bit about the apollo framework which is a very cool one so in apollo framework we said that we can have queries we have mutations and also about queries we have the option polling which executes a query periodically and we also have the option to refetching and the fetching means that actually if you do not like having a polling you can refresh a query on a particular user action and you will see this in action later on how to use it and also uh we have limitations and we have the subscriptions so with subscriptions we wire up graphql with a pub sub system like redis implement subscriptions in graphql and in a nutshell this means that the server can push something publish something to the client as soon as the client has already subscribed something like rxjs with observer design pattern and also have optimistic ui so with optimistic ui we can simulate the results of a mutation and update the ui even before receiving a response from the server we have designation and we have state management and now in front end when we hear state management like wow have state management another state management who have injections who haven't shared you have a kita who have plenty of them how about this one so actually what graphql does what apollo does is that uh normalizes all the results that we get from the server and during normalization it cases all the data and when we cast the data we have our own state management and we can play around with the state management and we will see again how to use reset management the embedded one and also have error handling now last but not least the trello app so let's tell up in order to see how to start working with the fellow and how to start developing with these and to apply all the basic we just learned we have to go over four steps at least this is what i'm doing when developing these are the steps that i'm following and this helps me a lot and the first step the first step is the documentation so read the documentation the next one is construct the query the third one is create a service and use the query that you have just created in the playground and the fourth one the fourth step is to consume the service in the component and we will see this in action and this is how the application looks like the trello application and what we can see here is the following that the vertical columns are the projects and these are the tasks like we saw previously funny fact is that here what what we can see is that it says trello and this is a greek letters and uh if we translate trello in trello it's like it means crazy so this is our crazy board and we will try to recreate it and said previously telo is a very good application and we have some some very very very basics of this and what we are going to see is how to get projects and this is the first the first thing so i said previously the first step is the documentation we opened the documentation and what we can see is that we have queries who have mutations and since we now need to get projects we don't care at all about mutations we care about only queries and this is what we want to have projects and if we click it we can see more details here the second step is to construct the query i want from projects to get the id the name the order and from tasks to have the id and the name the third step is to construct the service this is no more than a singleton service in angular i just have the injectables provided in root and to convert this service to a more meaningful to apollo client we will extend the query as we can see here which accepts one generic type and this is the response this query will return so what we can see here is that this query will return something under projects and this is going to be a project array and then we have to paste here our query and this is it this is how we end up having a service using apollo semantics for equity with the query that we created in the playground and the next one is to use it in the component so what we can see here is the following that we have a constructor we inject the service project gql we just injected it and then in the only need we use this project dql and dot watts so this is very very very very important and the reason is that it's very important is by doing this by by what we are registering an observer on the cast like we said previously so this means that later on when something is going to change in the case this property data dollar which is an observable is going to be updated automatically and this is how the component looks like a very light one i'm not going to spend more time on this one no more like html and some components but how things work this is very important how things work we said about the component and from the component we just had the water and the water actually watches the apollo client and the apollo client then is responsible to query the graphql api and as soon as we have the response from the graphql api server we update the cast and this is something very cool because what we can see is that we have those arrows these arrows this means that this kind of query that we send it to the graphql api server we also have the option to query the cast as well which is a way of how to handle the optimistic ui we cast and we have we we get and we update we will see later on so let's see this in action so i said previously this is how the application looks like what we can see that we have ready to test will have to do and let's now try to have like a new card working progress if i click at least we expected this to work and then we see the network what we can see is that this one sent the new project limitation and you can see the preview we have the data while we have the data we didn't see this in the screen and this is what we're going to solve if i click reload we can see it here if i click this button again i expected this to remove but we still can see there if i load it's gone so we'll try to solve them and also we can drag and drop or we can click a task and we can see that the taskbar is in our this list and the same goes for for this and now let's see a little bit about the code so about the code let's start immediately from the component from the project's list component so i have here many different components and containers ah let me zoom in a bit in case it's uh small enough i think that now it's better so have here some components we have the project list we have the graphql with mutations with queries and it will go for example in the queries what we can see is what we i presented previously in the slides this is no more than equity and let's close this and what i i like to do is have like a facade pattern and all the queries to have them in one service so this service is responsible to add project to remove project to a task in a project to get projects to update projects order and how can we use this so we inject it and in the only need for example we can be like are going to get the projects and then we have another method for add project remove project add tasking project we don't care about this at this point of time what we care about is the get project so if we see this one what we can see is get project will have watts the other option that we have is fetch and fetch means that we no longer have a listener we no longer have a listener to the server piece and fetch dot everything happen during the effects and nobody changes uh so this means with facts that we no longer have a listener to the cast and what does that mean so we'll see it first thing let's try to fix the remove project as you can see here i have a mutation a very big code that mutates the cast but before we see this let's go to the slides and we will solve this later so let's continue with this one and let's see now that how about if i want to add the project and specifically how about if i want to execute a mutation the flow is exactly the same the same same flow the only difference that we have here these manual steps that we have to follow and the first one is that we have to get the slice of the cast the second one is that we have to mutate the data object and the third one is to write new data in the class and the same flow the first step is the documentation we do not care about queries now we care about only mutations and what do we want to do to add the project so we read the mutation functions methods and we can see the new project sounds good we click it and we can see more details in the documentation panel the second step is to write the mutation in the playground and this is how it looks like and actually in this mutation this line is a request we are sending a new project with an input and we are going to create something with name to do and this is the response as soon as this mutation is done as soon as this mutation is successful the server will return back and we will create the id and the name and the third step is to start writing and constructing the service again this is no more than a symbol singleton service in graphql and in order to have more semantics graphical semantics you have to extend the mutation and now this mutation has two different genetic types the first one is the response what is the response of this query actually this execution this mutation and the second one is the request variables and of course we have to paste here our mutation and this is the mutation that you have just created and i said we will execute this one and we will request only id and name and finally we have to use this in the component and imagine that this one this method add project which accepts one property one argument of type string is uh is a method that is being invoked from i know a button something like this what we are doing is that we executing the mutation and we provide the input and specifically we provide this one the name things now can go a little bit uh more difficult and the reason is that we will try to handle the cash and how can we handle the cash the mutation as we can see in in the the first argument accepts an object and this object are the parameters and the other one are some other options and we can use the update and the update is the thing that we can handle and play around with optimistic ui and the steps are three get the slice of the cast mutate the data object and write new data in the cast how can we do this so how can we get the data what we can do what we can use is the method read query and actually this lead query method what it does is that it sends equity directly to the cast so if you remember previously we said about who had an infographic and the infographic sent equity directly to the api server and we said that we have also the option instead of quitting the api server to send the query to the cast this is something very clever i really like it and the reason is that the same query that we use for the server we use it also for the cast and with this one we get the slice of the cast the second step is to mutate it and of course more handling requires here and the third one is to write data in the class so here we have read query and sorry and here we have write query and we have to specify which query do you want to write this one and what are your data these are my data and this is how how optimistic you are but let's see it in action which is uh better to see it in action so let me remove these comments and have here just a comma so what we're going to do is the following the first one get the slice of the cast as said this is how we're going to do it but before let me somehow try to explain something so as you can see here we have this query right right this project dql document this is the exact same query that we use here in the get projects and this is how we connect things so we have equity and since we have the option to query and to update the cost based on this query you can imagine what this watch does so it has a specific quarter for this for this query now the next step is as soon as we have the state we can update the state and sorry update the object and then update the cast and if we can go in the browser what we can see is that if we create something new for example the working progress let me reload and if i click this now what we can see is that let me clean this oh if i click this what we saw what we see is that we created only one execution to the server just the mutation we didn't we didn't do anything else that has to do with get the new projects and repaint the new projects and how we do did this of course with optimistic ui and let's do the same in the odd project now let me again remove these comments and it's they say the exact same story get the slice of the cast update the state and write the cast and we can go again to the browser what we can see is now if i create this one sorry if i create this one work in progress at least we can immediately see it and how about now if i try to reorder if i want this to be here and if i reload it happened after reload so again let's go to the code and see the other option we will work with this one update projects order now this this code is similar and the reason that is similar is that we are going to refresh equity so let me remove this code the comments and here what we're saying is the following that as soon as this mutation is done i want to execute this query and do you remember this query is actually this one so we have the option to just send a query the query is responsible then to update the cast and since we have here a watcher this method is going to uh automatically update the state on the on the ui and we can see it here so if i try to reorder and you know what let me clear this and do it once more so what we can see is that we have now two different round trips the first one is the update projects order and the other one is the get projects and this is this method actually is uh very easy to use and when you start with graphql sorry when you start with graphql this is the first thing that you might did that you might do that because it's that simple and you don't have to dive deeper and do all of these nifty things so of course this is much much simpler and now how about if we change this to fetch but i'm going to have this like fetch no more than this and go again here and now let's try to create something new and i go on to create the work in progress too if i click at least we can see that we have already in the server and we can see that we have a successful response but we didn't we don't see it in the in the ui because we have it like fetch and not watch which means that we do not have an observer and something very cool let me see if this will work is that we have also developer tools and we can see also here that we have the option to see all the queries all the queries or here the explorer yeah what we can see is that we have all the queries or we can see that we have the mutations so new project new task remove project and even either will either we use the playground either we use this graphic well embedded tool in the development tools and let's close with some more configuration because what we saw currently it's nice but this is only how to use it how can we configure this in the code what we can see is that we have a module i think i call it like graphql module yeah graphql module and this is just like a provider with apple options and i use a factory create apollo and the create apollo is a function with some dependencies as you can see here we have these dependencies and if we if we closely look at the create apollo what we can see is that it has the links so many languages uh many frameworks to say it better name some things differently but sometimes do the same things so you can think that the link something like a middleware something like interceptor something like this so what it does is that we have the error link which actually is the actual error handling and then we have the http link and the http link the only thing that it does is that connects with the backend and in terms of the error link which is the this one this code what it does is that the exception handling is both on graphical errors or network errors and what we can do here apart from console.log we can have for example a toaster message or something something similar to update the user and this is how we wire up the the client with the server and now let's see three last things about the problems that we solve with graphql the first problem as we can see here is that we do not need to have multiple round trips and how can we do this how to avoid avoid to have multiple round trips we avoid them by merging the queries together the second problem that it solves is that sometimes with rest we have way more data transferring the wire than required and how we solve it by changing the query in the client side and the third problem that it solves is the api versioning so we no longer need to have an api versioning the only thing that you have to do is create a new method in the new method and just use it and as soon as you see that someone else don't use a specific resolver you have just to remove it and that was it thanks a lot thank you very much and if you have any questions please be my guest thank you fellas nicely presented thank you uh has anyone got any questions um you can either type them out in the chat [Music] dallas has got one in the chat how to limit access to some data that only the user has permission to access the metrics configuration needs on the back end a permission configuration so this is this is basically that during the request what you can do is at the same time send the token if you use for example jwt you can send the token and based on this token you can you can have it like am i allowed to have the data and you also have the option to have the permission l the the permission checking either on the resolvers or even better you can have it on the higher level before even you access your uh before you access the resolvers and this is something that you have to do in the backend and it's very easy to do and actually it's exactly the same approach like you follow in the node.js application with uh with controllers in the upper level in the upper middleware you have to do your checking based on the jwt token or whatever token you might have i hope it is answered the question paul ashton do you have a repo for this example yes i have a repo and as soon as we are done with this uh presentation uh i will send it to front and front i guess that can circulate everywhere i have the repo and yeah my idea actually was to to have it like an open repo to extend it but uh you know sometimes how things work so you you want to have to to do something and your to-do list continue uh expanding so but yeah i have a report um i've got a question for you coming from a more of a net back-end server side of things your apollo server was running on the client side as i could understand it then um translating effectively translating between angular effectively api calls from angular into http calls over to graphql is that right is that what were you i guess what advantages were you getting of using the apollo server rather than just going straight to graphql um the advantages is that uh as i said here try to express it is that the uh the round trips and sometimes actually it's not the panachia uh the graphql sometimes people it's like oh i have something new i will use it no it's not that easy so for example graphql is has a lot of problems with uploading files so this is way hard to upload files with graphql and remember how to work three days to make it work uh and other than this is that sometimes with rest we like to have a proxy server to cast some requests so we cannot do this with with graphql it has a casting a specific casting uh but not that uh the case that we have in rest and the thing that you said front so let me switch uh so that the graph the client sends a request from the client to the server and let's go to the server what we can see here for example is that these are uh these are the resolvers so let me have it like side by side and try to explain this so if you remember even in dot net i haven't called for net i don't know seven years now something like this uh but in any case we have a method and this method is going to be triggered is going to be executed for a specific endpoint and uh in graphql on the back-end side what you have to do is to define the types so we're defining here we have the project and the projects let's see only the projects and then we have to have the resolvers and as soon as the backend sees that we have the projects is going to execute this resolver and this resolver what it does is that using the project model which is a mongoose model find everything sort by order and execute but i'm not sure if this answered your question from it was it was more where is your apollo server running and that i mean it's just my in the back end in the back end okay okay because when i was looking because you're showing us the three um the dev tools in chrome um and the requests going through chrome looked like they were going directly to graphql yeah and this is my server uh the backend server and this is for my to run so if i kill this we cannot have a communication and these are all the queries uh of course of debugging for the binding users these are all the quiz that we have from mongoose so the server runs in uh in the in the back end and here we can see a little bit the code what we can see is that let me close this this is my server configuration i'm creating the server with some specific application settings and here is my mongodb connection it's a normal connection to the to the back end i initialize the connection i have it's based on express i have my middlewares and also i apply the apollo server and the apollo server has does its own magic here yeah okay yeah that makes sense um there's a few more questions in the chat feel free to shout out a question by the way um chris is asking for the binding from angular to the cache or query data can you show us what it looks like yeah definitely so let's see the following i will have here the clock the binding is right so what we can see is that we have the data and the data is just an observable and of projects and we get the data from this one get projects up to this point the component is uh how can i say data agnostic the component doesn't know where i'm going to get the data i'm not sure if this get project is going to return the data from a file system or cash or whatever or rest api or whatever you like so this is totally um agnostic so what we can do then based on these data is just apply the binding and be like if i have the data of course i need to have the syncpi because this is an observable and i have to get the data from this observable and based on these projects i then have here my iteration and what i'm doing is that i'm creating many different projects and actually many different trello project items and if we can if we can go back a bit uh what we can see is that if i click the get projects is that i'm just getting are either fetching or what's what's the data so what i'm trying to say here is that apart from this service so the bindings especially for the graphql has uh especially for the angular is normal angular bindings and of course i use here cdk for drag and drop some methods and directives and the same goes here uh yes so the so you've got the apollo client is that right running in the browser and that gives you a kind of one-line syntax for querying and that's kind of returning strongly typed javascript objects because you're using typescript and using classes and then angular can bind to it so if we can go if we can follow uh once more this one the project list so what we're doing is i'm going to have project list service get projects okay and what we have here is that i'm fetching and i'm fetching from somewhere so this is another service and if i follow this service what we can see is that this is my query and this is the query that will that we will send to the server the server returned back all the properties and actually not all the properties only the properties that we want to have here actually and as soon as we have the json object because this one is going to return and json object and as soon as i have this i can then have here watch and the value changes as soon as i have all the data and since this returns an observable i have to use some observable operators for example map in order to get the data so this method what it does is that it returns only a specific property of the return data thank you i'm happy to ex uh to explain more but you can help me with the questions so that i can help with answering well paul ashton has asked um how does graphql handle very large amounts of data um if you have load balanced servers where does the apollo cache live uh how you have load balance servers where does apollo server cost elite ah so let me think i will have a load balancer and where to have it i cannot answer this question so it's more on the architecture on the server side so but if we think that we have different nodes and each node uses the cast we need you know what it's the exact same thing with all the other cells that we have so it will have three different let's imagine the following that will have three different nodes one two three different nodes and here we have our load balancer and we don't know where the data will go right where the request will go either on the first either on the second either on the third and the question here is how about if for example this guy sends something to the cast and on the second request are going to have this data then we have to to specific uh to define where this cast is so that everyone every node can use it okay the question i was asking uh just prior to that it's um some of the stuff that i'm looking at at the moment we're handling um a lot of data in order to render heat map um can it can it handle vast amounts of data i mean jason's quite tight but uh we're pulling back about two three hundred thousand data points yeah i don't seem to have any problem there so in the past i worked not that big data set but in the in the past i used to work with in hospitality with a similar project with uh many data to have their own handle and the problem is not on the graphql so the graphql can handle all the queries just fine the problem could be like on the database layer how to get the data and then actually this one how to get the data and what kind of handling are you going to have and if they if the handling that you will have is uh process heavy and so forth so i don't see any problem on the graphql layer and with graphql something else that you can do which is a very good imagine the following that we have one server here server one and this this server returns an api and you can have another one again for api ah sorry rest api i mean and you can even have another one and then you can have a graphql and the graphql is responsible to gather all the data from every server in order to feed the client so the client will communicate with this like my my first layer and then the graphql in the resolve each resolver is responsible to send different queries on its server and get the apis get the data so this is a practice that is uh heavily used with with graphql and the reason that they use this one is the following that how about if the client wants to consume data from different servers how can i do this the first option is to have a fat client application and the client to do all the things but it's too heavy for a client it's too heavy to handle this data in in the browser the other one is to create another server and this is our case and in this server you can have them a graphql and the reason is to minimize the data that travel in the wire yeah thank you welcome any other questions for vaness when does your book come out uh i hope in a month i hope so it seems that currently the the publisher is uh very uh busy let's say and the deadlines um when they are a bit off but yeah i expect to have it in a month and it will be in english yeah it is the only language i can speak hey 18 english thank you very much you're welcome thank you oh graph kelly i can see that ui decorated yes yeah yeah so i can see the question from darius uh if can be a layer for a rest yeah definitely so what i uh what i try to so to present previously is that we can have it like uh it will have here the rest the red server and here we have our client he will have a direct connection with the rest we can cut this off and be like i'm going to create here another layer and this layer will be the graphql and this guy will send the query here and after this i don't care me as a client i don't care if the graphql is going to get the data from i don't know database another server a file system so this is my touching point and this is a very good pattern actually i don't know if you can see that one uh what are some of the security considerations what are some of the security considerations yeah you might need to give us a bit more on that do you mean in terms of people accessing the api or in terms of what we talked about before about having um elevated users and that sort of thing um i was uh i i'm interested in looking at uh you know how certain how we can limit the rate of request coming in um or um a graphql has multiple risk back-ends and if one of them have some access control um or based on the query uh if if any of the pills or properties or any node uh have a should not be exposed it's a mandate from one of the rest api behind but the user is trying to still access it yeah good one so think the following that if you have let me go in the server so i said previously during during the presentation we have to define the type so if i correctly understand your question is like what about if i want to access something that i don't have to that this property for example lives in in another rest api server and i don't care about the type so simply you don't have to include it in in the type as soon as you don't have it in the type uh the the query will fail so even if even if someone will try to to write it down are going to get the secret property the server before even execute the query will fail immediately well we we would still need it but uh there are there are access controls right it can be behind the or the they it would require uh authentication or authorization then you have to do it in the resolvers so the resolver the project for example here we have to do your to do the dirty thing so i'm going to have for example i don't know the property id and the property name or whatever or just to exclude some properties uh of course i don't have to die to write this uh manually but you can just exclude it here and actually you know what the thing here is the following let's see uh here we have projects and we have some some properties we have some some properties from from the queries let's say id we have name and we'll have the tasks and then this will execute what is it this will execute this uh this query in the in the sql in the actually the is going to get all the data all the data the only thing the only benefit that we have is the data on the application level not on the database layer let's say so in your case what i would do uh how to limit it yeah i cannot i don't know how if there is a specific case with graphql me thinking out loud here what i would do is simply add some logic in the resolver maybe there is something would you be able to limit access to the actual to some of the resolvers so you'd have a um i don't know if you'd have a projects and a projects admin resolver for example yeah even this you can have it like this even or not execute it at all these are this part of code yeah this also is a good one um so we were going back and forth in one of the projects um we in to to to productionalize like usually in rest apis we have a set of security standards right and and uh graphql being a bit new um we don't know what kind of vulnerabilities looking looking at some of the online articles um few things that came up this is one of the uh how do you limit a particular property to to to enforce uh or not even um the author or any any middleware in a rest we we have all these middlewares right uh how do we make sure um input input validation happens not passing avoid execute injection something across site scripting or passing some unwanted characters as part of the input um so there are many uh security aspects we're thinking i'm i'm trying to wrap around uh what uh what are the if you give me a cheat sheet or checklist this is the list of security concerns that would uh i need to look for and these are the libraries so this is how we handle them if you if you can point me somewhere also that that would be great i cannot think now i'll think ahead something like something like this but it seems like that this is not something that has to do with uh with graphql meaning that if i had to configure something like a of security i would do it in my middlewares so i would hide first to apply the middlewares in the server before even touch anything about the resolvers this is the the first thing and other than this so if you're going to omit something maybe there is something uh about graphql i don't know it yeah i don't know if there is something like this i would use it in the project but as you said since you said that you found out uh some online other materials uh questions on other forums and things like this of the same question maybe there is no such thing in graphql and you have to do it manually maybe i'm not sure about this okay yeah it's a very good question it's very good uh i was uh there is this one uh article um i can point out uh is um the the cheat sheet series from uh osa with me let me ping is uh so this is one of the article i i i was looking at okay i will definitely check it out later on okay and this is the glory of public speaking so you share something and you get something so thanks a lot for this yeah um and and uh do you have any recommendation on timeouts like when you have multiple rest calls uh happening in the background uh what would be a good practice to um canada is timeout for a graphql um about the timeouts so it depends where you want to how to apply the timeout do you want to have it in uh in how i'm going to get the query so again this is not something at least from what i know unless there's something from graphql and i'm not aware of uh but again i would approach it with a normal approach of how to handle a timeout either this is high set timeout or whatever or just terminated or send another signal to terminate the query so many other things i'm not sure there is a specific case about uh graphql about this okay it's more of a infrastructure thing again yeah this is how i perceive it more like infrastructure okay thank you thank you thanks for the great questions any more questions for uh for thanos no thank you very much yeah thank you very much venice that was a that was fascinating thank you very much thank you thank you very much i really enjoyed that thank you

Channel: Chester Devs

Views: 349

Keywords:

Id: L-oHhUCntQ8

Length: 67min 46sec (4066 seconds)

Published: Wed Mar 10 2021