Curious Use Cases of GraphQL (and The Future of GraphQL)

I want to jump straight into my talk because I've a lot to cover this talk is talk it's really like formed around graph QL but in reality what I'm gonna be showing is a combination of graph QL and front-end technologies so kind of mainly what I'm using is react but the ideas can apply to any platform there's three main ideas I want to drive home one of those is around API gateway and graph QL as adds an API gateway so essentially instead of thinking of graph QL as a way to just interact with your data sources instead thinking of graph QL as a way to interact with any service or any microt service or any function anything that's outside of the core of your application also developer velocity a lot of the things I'm going to show today are kind of focused really on rapid development rapid iteration prototyping experimenting and essentially just developer velocity and developer experience and then finally the future of graph QL the things that I'm gonna be showing today I think are really where we're headed in this community and if you really have watched and seen some of the blog posts and talks that I've done I'm really interested in the future I'm really interested in futurism and where things are going and trying to ride the wave and kind of be where the next thing is as its cresting and that way we can benefit from you know that experience so welcome to my talk this is curious cases of graph QL my name is Nader dabit you can follow me on Twitter and github medium and dev dot too with dabit 3 i'll follow you back web and mobile developer and author and a podcaster my two books are react native in action and full stack server lists full stack server lists from O'Reilly publications goes along with a lot of the stuff I'm going to be talking about today and this is the layout of my talk so we have an introduction to modern AWS tech I'm going to build an API in five minutes an API that includes authentication authorization database data connections relationships between the data and we're gonna test it out all within five minutes and then demo overload I have a lot of demos to show so we're gonna jump right in there I work for AWS on the client technologies team and the two technologies that work the most closely with or AWS amplify and AWS app sync AWS app sync is a managed graph QL service so you could think of this essentially is something like firebase but for graph QL and we have a lot of different features kind of built into it one of the main ones that people really enjoy is that we have enterprise security and authorization baked in something we really thought about a long term and then there's amplify amplify is a couple of things it's a command-line interface it's a client library that allows you to interact with services that you've created from the command line a toolkit that allows you to do things like graph QL code generation and we have framework specific components for react view react native angular and ionic and what I'm going to demo today for this API that we're gonna build in five minutes is the graph QL transform library which is an STL over your graph QL schema that allows you to add decorators or directives to your schema and build out a more complex application than writing all this manually a lot of the applications that we write today fall into the lines of crud list operate list applications so if you have a to-do app you might have a base to do type but you need a way to create read update delete and list these to do's you also might need some type of data source to go along with this base type and you need a way to connect the operations to the data source so you need graph QL resolvers we have directives that can do things like generate all this for you at model will generate the database all of the different resolvers in the schema for you from a base type auth will let you configure authorization rolls directly on your schema connection allows you to model relationships those are the three that I'm going to cover today so the challenge that I have for myself is I want to build a conference API for reactive copy in five minutes that means we need schema resolvers a database authorization rules and we want to model relationships between the data we want to actually test this out also locally so we'll get started here I'm starting off with an amplified project and what I'm gonna do is I'm gonna go ahead and add the API can everyone see that pretty good so to add an API you can run amplify add and then API and we can choose between graph QL and rest I'll give the API a name or I'll just take the default I can choose the authorization type for the API so if you like to bring auth0 you can choose something like open ID connect if you want to use a managed authorization service or authentication service amazon cog neither user pulls is what I'm gonna go with because that's a managed service that we work with we can then configure some advanced settings which I'm not going to do now if we have a graph QL schema that we can reference I can go ahead and choose that here but since I don't I'm gonna go ahead and ask for a guided schema creation which will essentially just give us three boiler plates that we can work with and the boy the boiler plates that we can start with or a single object with fields one-to-many relationships or a schema that has authorization rules kind of baked in for us c2 reference but it doesn't really matter because we're gonna be starting from scratch so I'm gonna go ahead and choose yes and we're gonna go ahead and edit this schema and what we get started off with is a basic type of to do and we don't really want this we want to conference up so I'm gonna go ahead and delete this and we're gonna go ahead and start over from scratch so we want to talk type we want the talk to have an ID a talk name and the talk summary speaker bio etc and then we want to have a way to have people comment on the talk so we want to be able to have communication while the talk is going on people can ask questions with each other and then maybe when the talk is over the speaker can then you know go back and look at the comments and maybe respond now we need to model a relationship so what I'm gonna do here is add a comments field to the talk and you'll notice that we have these two directives now on talk at model we'll scaffold out all of the resolver all of the resolver code all of the different other operations we can then modify those with our own business logic if we'd like to that connection will allow us to define a relationship between two types so I needed to find a relationship between the talk in the comment so therefore we have a comments type on the talk comments field on the talk and in a talk field on the comment finally we want to be able to add some authorization rules because we don't want everyone to be able to create a talk we only want admins to be able to create a talk therefore we can now use the at auth directive which will allow us to go ahead and scaffold out some boilerplate resolvers that will allow only people that are signed ads and as an administrator to be able to create read or update talks but anyone will be able to read the talk because we've set query roles to null so we don't want any roles on queries finally the comment is very similar in the sense that we want to have some authorization rules but our roles are going to be a little different here we want to allow anyone to be able to create a comment but only the owner of the comet to be able to update or delete this comment so we're done now our schema is ready to go we can now test this out so I'm going to go ahead and jump back to the command line and from here we can now mock all of this locally we don't have to deploy anything all we need to do is run amplify mock and this will go ahead and mock our entire application for us what it's going to do is introspect our schema and see that we need two data sources two databases I'm just going to go ahead and create those two tables locally so we have a talk table in a comments table now created it's didn't run gonna run graph QL code generation and we're gonna be given the graph QL code locally that we can use to interact and we're gonna run an HTTP endpoint now on our localhost so we can go ahead and click this and this is our graphical Explorer thanks a big big thanks to Sean Grove of one graph for helping us inter integrate this nice UX on the left hand side so what we want to do now is we want to go ahead and update our off and we want to make sure that the user that signed in is just a regular user because we want to test that authorization rule so we're gonna add a new mutation for creating a talk we'll give a speaker bio and we'll just do some some basic data here we want to go ahead and create this talk and we'll notice that we're unauthorized to do this because we're not logged in as an admin so we can go ahead and update and simulate an admin user by passing in an admin as the group and generating a new token and now we'll be able to create this mutation the next thing we want to do is take this talk ID and create a comment on the talk and the comment that we want to create is going to be basically you know just someone that's in the audience creating a comment on the talk so I can go ahead to create comments I can pass in the ID of the of the talk and I can create a message and then I can go ahead and actually return not only the message and the ID but I can return created by because we're gonna actually read the user information off of the token and store that in the database so next I want to go ahead and sign out and sign in as a audience attendee and now I'm signed in as someone else and I want to go ahead and create this comment on the talk so we've created our comment on the talk we've created our talk let's go ahead and now query for all this so we can now do the list talks query that will return our items and you'll now notice that there is a relationship between the talks and the comments so we can drill down and get the comments that relate to this talk and we can return those items as well so I'll go ahead and return the ID the message and who created it so I'll go ahead and run this query now we'll see that not only do we get the information about the talks back we also get that array nested comments once we're ready to deploy this and go back to our command line and then run amplify push I'm not gonna worry about that because we don't have time for that but I just wanted to show that so next we're gonna go ahead yes thank you next we're gonna go ahead and do some demos so the first demo I want to talk about is real-time SMS and markdown these are the curious cases of graph QL if you haven't is not the name of this what if you get SMS text message to grab markdown and do something with it so I've created an app for that and it's specially good for this conference because you can now text message comments about this talk to me and by the end of the talk I'll go back and reference these comments if I have time and answer any questions I'm bypassing the native conference speaker discussion thing right so let's go ahead and take a look so if you want to comment you can go ahead and text the message to [phone] and this is going to go ahead and create you know a new message we're going to go ahead and view that user interface in just a second now let's look at how we built this we well I basically took the idea of using graph QL mutations and having a screen that listens for these new messages coming in and real-time and displays them on a screen that's what I wanted to happen so how could I do that I used a service that you can create phone numbers with Amazon pinpoint you could also use something like Twilio once a message comes in we send the message to a lambda function the lambda function creates a graph QL mutation the client listening to that subscription will then get that data so I've defined the data basically like this I needed in origination number and a message body the origination number just tells us who sent the message the message body is the markdown second I created the graph QL schema graph QL schema only needs an origination number a message body and an ID and then finally the lambda function looks something like this we take the message off of the data and we parse it we then get the origination number and the message body off of that data and we create a really raw HTTP request usually something like Axios and here I'm passing in the URL the API key and the information that is the actual variables for the message and let's go ahead and demo this and I'm curious if anyone else is curious enough to send messages here so let's go ahead and take a look and if anyone wants to create a message I'll go back and check this out but looks like we have one message from someone saying hello world that's pretty cool if you want to send an image anything like that go ahead check it out now next we're gonna go ahead and do another demo and I think what I need for this demo let's go ahead and take a look yes I'm gonna need an audience member as a you know someone that volunteers so who wants to volunteer to come up and be part of this presentation yeah okay come on so what we're gonna do is graph QL image recognition we're gonna take an image run it through a graphical operation to in a machine learning service get information about that and return that in the response for the graph QL hey come on hey I'm mater thank you Michael let's give Michael like a little bit of round of applause so the the way that this is going to work is we're going to take an image it's gonna be a picture from us we're gonna send it and store it in an image service that's gonna kick off a new mutation or actually it's gonna send an operation to a machine learning service with the image information that will give us the data and that's gonna be returned back in JSON so that's kind of how that looks we're gonna skip over the functionality because we want to jump into this demo and when I come back I'll kind of walk through how this all works so come on let's go and take a picture you can come right here what we're gonna do is we can either toggle the camera or we can actually yeah there we go all right so we've taken the picture now we're gonna give this a little bit of Tom this is going to upload the image it's gonna then you know get the image information running through the image recognition service respond in a lambda function graphed well mutation and we're gonna get that back here so here's where you want to check out the info so we have two people yeah you can go ahead thank you we have two people one is estimated at thirty one is estimated at 47 I'm the 30-year old we're both smiling neither one of us have glasses on we both have our mouths open that's pretty interesting yeah and our emotions are angry and disgusted and discuss it in disgusting and confused so yeah I'm not sure what that's all about but yeah thanks for the volunteer so let's look at the function that did that we basically have two types of images that you can upload one of a person one of not a person if we send a type of labels that means we're sending something that's not a person so when a kind of image winner recognized like a general image maybe we want to say oh there's a TV in this image there's maybe a car if there's a person we want to then recognize labels on their faces so we check to see if the type is labels or not we set some attributes we create a new parameter which is basically the URL of that image we then call the recognition service which is a machine learning service and there are a bunch of them out there this is AWS but you don't have to use AWS there are others out there we call it detect labels or detect faces passing in that data it returns some JSON we stringify that send it back and then we display that on the screen so that's kind of how that works all right so the next thing we want to go over is real-time music collaboration how can we build a step sequencer that allows people to collaborate together and create music so let's see how that's done first I needed a base project to start with because I cannot understand how to build this from scratch I need somewhere to start with I then make it cloud enabled so what I found was the trap Lord 9000 the trap Lord 9000 was created by Ken wheeler and big shout out to him for creating this I saw him give a talk in New York I basically took his project and then made it cloud enabled and what happens here is that step sequencer you have an array of different values that represents a slice in the sequence so as we go from 0 0 0 0 0 if there's a 1 that means the sound gets played if it's a 0 that means that sound doesn't get played so all we need to do is just take this data allow you to mutate it locally and then send a mutation up to your graph QL API any of the clients listening to this can then take that new data as it comes through in a graphical subscription run an update and then therefore you have people collaborating so the way I built this was I created a drum machine type with an ID a client ID a beats in a name the thing that might stand out here is we have a client ID the reason we do that is because we don't want to listen to subscriptions changes that we made ourselves so if we made the change we discard the data because we've done an optimistic update if someone else has made that change then we refresh our own client application so the demo for this looks something like this I have a website that I created for this demo actually it's called height beats def if you'd like to play along go for it I'm gonna create a new drum machine called reactive and then we're gonna go ahead and see if we can work on this together so we have this reactive beat box I'm gonna now open a new beat box in another window and what we're gonna do is once this machine loads we're gonna go ahead and set some steps here and we're gonna see that they come through in real time over here and then I'm gonna go in here and play the step sequence here and then over here I can still make the updates and they'll start coming through so let's see if we can create some good beats I'm not like a DJ or nothing like that but you know I'll do a little something okay now some people have started stepping I don't have to do any more work okay cool so yeah this can get a little rowdy when you have a bunch of people doing it but yeah we have some some beats being made now and it's all coming through in real time and I don't have to really do any more work from here so that's that's height beats I have two more demos so let's see if we can get through these what about graph QL infrastructure is code if you saw the way that we did that schema decoration using that graph QL those directives that create databases they create schema they do all this other stuff that graph you all you know you wouldn't think would do that this kind of opens the door for many other things because what if you have a reproducible back-end that you would like to create theoretically you could take a schema decorate that to be that application back-end and share it amongst your peers open-source it whatever people could then use that to kind of have a base to start with infrastructures code is something that isn't really that familiar to most front-end developers and it isn't to me either the cool thing about what we work on and I think what you're gonna see other people doing as well outside of AWS is as you create your application from the command line so you saw us earlier run amplify in it we're actually creating graph QL and infrastructure is code for you in a folder that's called amplify you can then share that amplify folder and redeploy your application to anywhere for anyone and you have kind of a reap you have a upward a reproducible version of your back-end that can be shared among other people so the the experiment that I had a few months ago was what if I wanted to create a conference app that people could reuse over and over I'll go to a lot of conferences I've talked to a lot of organizers one thing that they keep on doing is they keep creating apps over and over and over they cost anywhere between ten to fifty thousand dollars to build but they all do the exact same thing I felt like this was a pretty good candidate for a reproducible app that we could then take this idea of full stack server lists and kind of put it together so what I created was conference app in a box conference app in a box is open source then we have around 30 conferences that I've personally worked with that I've used this I've worked through three independent consultants that have averaged around $1,000 an hour because they charge their clients like fifteen twenty thousand dollars it only takes them like five to 10 hours to deploy which is great that's the whole idea here is being efficient so around half a million dollars of known value and this isn't even something I've really tried to push it's just something out put out there people have really found it interesting and it's basically a conference app that you can build and get up and running within theme in just a couple of seconds a couple of not seconds okay let's let's be real probably a couple of hours maybe to get to get where you wouldn't want to be so to build this I created a schema with a talk and a comment the exact same application that we built earlier and to create this amplify an it added the API and then push deployed the backend this is the infrastructure as code that you're left with it's a back-end folder that you can then take in update and then you know deploy again you can share this with other people or you can package this up with the front-end and what you are left with is the docker version or like you know of mobile development you know or whatever you would call it I don't really know what to call it I call it full stack server lists it's reproducible applications that contains both the front and back-end so what does this app look like well it looks something like this this is a app that I put together in my last talk actually a few hours ago took about five minutes and what we have here is like a couple of talks listed you can go in and drill down and view talk information you can then create comments on the talk and I want to demo the comments portion of this but you can just create a comment the comments come through in real time and pretty decent user interface if you'd like to theme it we have a theme file that you need to change maybe seven variables and from there you're ready to go with a custom version of this that's conference app in a box and then my last demo is something that I released to the public a few hours ago Jam stack CMS Jam stack CMS is a full stack content management system built with serverless technologies it has Gatsby on the front end it has several aesthetic on the back end if you think about WordPress and the reason that it became so successful and so popular in my opinion is that it had everything encompassed into one package and you didn't have to be an expert web developer to get a website up and running you could just go and deploy this thing you end up with some pretty sophisticated authentication and authorization rules you have a database you have a front-end you have everything kind of built out for you and then you can theme it and you got a lot done in a short amount of time it's how I got into the web development and I'm sure a lot of other people as well I think we can do better now WordPress is still amazing but we're working with things like server rendered applications we want to use graph QL we want to be able to maybe iterate quit more quick so the jam sack CMS is my you know take it that and let's take a look at what this looks like in in practice so this is kind of like a deployment of the jam stack CMS that I have right here from here you can kind of create pages in three different ways you can create a blog post from the admin panel you can create a webpage from the admin panel or you can hard code your own components locally just like you can with any gatsby site if you want to take a look and edit an existing post you can just click Edit if you're logged in as an admin here you're given the WYSIWYG editor and you can publish and unpublish if you're an admin you'll also have access to this admin panel where you can publish unpublished existing articles you can create a new post you can view all the different images that you have available to you that you've uploaded securely or you can create a new web page drag stuff around and then when you're ready to go you just save and publish and then we have the settings area which is pretty cool because here you can theme it a little bit let's say we want to create a reactive theme that will it create a border we want to change this up a little bit so maybe we want to change the title of our site when we're ready to deploy this because it's Gatsby the only people seeing this admin or us the people that are actually viewing the site or not seeing this they're seeing this static version of this so to deploy a new static version we can just click the deploy button this kicks off a new build this is triggering a web hook to either net lafay or amplify console or whatever other hosting service you're using and then if I go to amplify console give it a couple of seconds I see now that we have a new build that started running the new bill was triggered by that web hook that I just ran so that is full stack server list that was my demonstration of that the idea to deploy these apps is you clone them and if using AWS you run amplify in it amplify push and then you're ready to roll if you'd like to see the code for all of these applications github.com slash dabit 3 slash curious cases of graph QL you can also to go to github.com slash jam stack CMS and star jam stack CMS i would really appreciate that yeah thanks for the unsplash talent creators jens johnson kareem andhra christian spies and EDD on trade and that's it for me thank you thank you so much Nader Debbie I have three questions for you here at least so there is a hyper bath resolver first implementation over schema first what do you think about this I think that it just depends on the person building the application I really don't think one is better than the other I think a lot of people get very opinionated about stuff when in the end goal is that we just want to create things we want to build things we want to actually get things done if you can get things done in a way that is like going against the way that the current person that is really hyping up something that they created themselves maybe it's talking about then I wouldn't listen too much to them I think that both both ways of doing things are good I don't really see any reason that I would not continue with schema first graph through all development what happens if you want to change your data type model any kind of migration support yes so you can continually migrate and change your your schema and as you as you change your schema you can deploy new versions and revert back to old versions with versioning that's built in and last question for today can you run both rest and graph QL at the same time yes absolutely it's built in

Channel: Coding Tech

Views: 10,513

Rating: 4.71875 out of 5

Keywords: graphql, rest api, api, web development

Id: _3Si3DnVeYM

Length: 27min 43sec (1663 seconds)

Published: Sat Dec 07 2019