Build a realtime GraphQL application workshop with Hasura

this is so much fun to be on the call like this it's so different to do a webinar than to have a normal college I'm used to every day when I teach at work a couple of people asking about the recording we are recording it I'm not exactly sure how it's gonna go up yet Rajjo she arey do you know how we'll put up the recording yes I think we will be putting it up on YouTube and we'll post the links we'll send out a link to all the participants who've registered amazing so that's the answer to everybody asking about the recordings you can also use the Q&A feature to so many different things on here and I can answer your questions through there as well as the chat that's easier I'm using so it is 801 these types of things people always show up a couple minutes late so I won't get started with the material yet but I'll start talking a little bit about what we're going to be talking about tonight and also introduce yourself to me a little bit and also I want to learn more about you so I put together a little bit of a poll to learn about your backgrounds with the technologies that we're going to learn tonight just so that I can know what to move slow through and what to move fast through like if you all are react pros that I don't want to explain react from zero to you but if you've never heard of react I definitely want to make sure that I can help you through that so I just put a poll in the chat and if you can go ahead and fill that out there are some questions that would be really awesome so that I can gauge where you're at with what we're going to be using tonight yes great question from Sara five is most comfortable one is I have no idea what this thing is I've never heard of it five is I'm a professional and use this all day every day oh no I must have copied and pasted the question so sorry there are two questions for Postgres you can just answer one you you okay very cool so it's looking so far like people are pretty comfortable with react and Postgres to some extent and then a little bit less comfortable with WebSockets so we'll spend more time explaining what those are tonight and react as well also if you want to go ahead and put a quick introduction to yourself on the chat that would be awesome too there are a couple tools that we'll be using tight I'll be screen sharing so that we will be writing like live code and you can code along with me if you want and then we're also going to be using the zoom features so there's the chat feature in here so you can talk to different people talk to all the panelists and the attendees through there as well and then there's also a QA section as well where they're open answered and unanswered questions and so you can like upvote questions in there too it's a pretty cool piece of technology and so I would love to use that as well I'm really excited to see a lot of my current and former students in here - this is really fun to have a little bit of a reunion tonight so again this is the link to the poll and putting it in the zoom chat again if you're missing the zoom chat along the bottom bar there is a little chat bubble and if there are new chat messages then you should be able to see them there cool so I'll give you a little bit of an introduction to myself as we're still waiting for some more people to show up so a little bit about me I am a software engineer by trade but right now I teach people how to code as my job so I teach full-time boot camp program right now I teach remote but I'm actually moving over in two weeks to be the faculty lead for on the on campus program so I will be teaching teachers and also teaching students how to code so really really excited about that so one of my former students just asked how many former students are in here he is one unfortunately I don't think everybody can see this but there are a descent amount in the audience tonight maybe maybe 10 or so students that I am either currently working with or formerly have worked with so I'm pretty excited to see you all here so I also wanted to tell you a little bit about my background with graph QL as well so back in the day I started using graph QL in 2015 which is the year that graph QL actually came out and I was working at a startup and I like to talk about the idea of shiny object syndrome which is when you see this hot new technology come out and you immediately want to convert everything to it and this startup very much had shiny object syndrome which was great for me as a relatively new developer because I got to get my hands on a lot of different technologies but also in some ways maybe were adopting things really fast and graph QL was one of those things to me that we were using it so early on I just didn't understand why we're using it I thought it was making my job a lot more difficult at that point it probably was there wasn't a lot of documentation yet but I've been using Hazara a lot recently and has Souris really brought me around to seeing the awesome parts of graph QL and I'm really really excited to share it with you all tonight it's probably the fastest I've ever been able to build a back-end period for a website and so I am incredibly excited to share this all with you all tonight we're gonna be building a game so that's a little bit different probably than a lot of the applications you all work on at work and hopefully it'll show you the features that you can work with within hysteria and also graph QL so I'm gonna go ahead and share my screen and we're gonna start working through this tutorial I have built on that we're gonna be working through tonight we're also gonna do different activities and things like that so technologies that you should have installed if you have node and NPM that would be excellent so that you can run react code on your computer also having a text editor of some sort so vs code or sublime text or anything like that those are really the only things that you should be maybe having it would be good as well but nothing too fancy and the her server side you don't need to have anything in SOG it's just for the front end that we're gonna be building later on so again we're gonna be using Postgres for our database we're gonna be using graph QL on top of that and then we're going to be using react for our front-end and we're gonna make that web the connection use WebSockets so that our lot our data is live updating and real-time so really really exciting the objectives for tonight are to explain what it's graph QL and visera are how they work together we're also going to set up a Sora server and get that up and running using Postgres as our database love level and we're going to be playing with queries on there we're also going to create some graph to out queries and mutations and then we're also going to connect all of this to a front-end that's built out and react I first want to talk about what graph QL and pisarra are because they're the technologies we're gonna be working on a lot right so essentially graph QL is a query language for EP eyes and what that means is normally when you're building a REST API so an API with different actions that you can take in different endpoints that you can go to and get different information or send different deena to and update your the data that you have stored in your database normally an arrest API you will have a bunch of those different routes and they're not super flexible you have to have a route for everything that you could possibly need graph QL makes it so that you can have one endpoint so your back-end becomes really really simple and then you query for data on your front-end and you use this graph QL query language that is really nice and robust and looks a lot like maybe Java Script um more so than sequel queries and using that graph QL 20 language we're going to be able to select exactly what data we want from our database and we can update our data as well using something called mutations and we'll learn more about those tonight as well and this becomes really really really helpful when you have separate front-end and back-end teams and so the front-end team might need some sort of data and so instead of the back-end team having to make an endpoint for every single type of data that they could possibly need the front-end team will be able to query for that data themselves and so it makes it so that the data that you're able to fetch is a lot more flexible you can get exactly what you want back instead of getting everything every time or not enough data there's a really really awesome analogy in the article by Sascha grief who also does the state of JavaScript survey so definitely somebody would follow so even wrote this article so what is this graph QL thing I keep hearing about and then there he has an analogy about how the old rest model is like ordering pizza then getting groceries delivered then calling your dry cleaner to get your clothes three shops three different phone calls and then graph QL is like having a personal insta sistent once you've given them the addresses to all three places they'll just do all of those tasks for you so you can do everything all at once rather than having to do every single thing separately so graph QL kind of centralizes everything and makes a lot of these tasks a lot simpler graph QL is also language agnostic so you can and it kind of lives in between the client and the server layer so you can write your back-end in any language that you want I personally used it mostly with Django back-end so building a graph QL layer on top of jingo but you can do it with Express or you can do it without writing your own back-end code like we're gonna do tonight with misura it's gonna be super fun so this her sorta thing I keep talking about and that you signed up through tonight I was gonna allow you to build a graph QL back-end at lightning speed we're pretty much gonna be able to click some buttons and have a full fledge back in written for our application rebuilding which is really really cool and something that I haven't seen before and my mind was totally blown um so I have a podcast called the ladybug podcast along with two of my other very close friends and we did an episode on graph QL and Rajjo she who's on the call for history was one of our guests and she explained what a Sarah was on that call so I played around with it a little bit in my mind was absolutely blown like you can literally click a button as we see in a second and then we're going to be able to create data and a database and all that all at once so we're gonna use some of the features of Hazara tonight we're gonna build an instant real-time graphical epi on top of a new database we're also going to use the dashboard that has Sarah creates for us and then we can react to those changes in your database with web hooks external API service functions on demand they may show you a little bit more of that later tonight and another thing that you can do is you have if you have a bunch of different data sources on your application you can use pasará to centralize them all stitch them all together and have a centralized graphical epi so a lot of really really awesome features in Hazara so we're gonna go ahead and start uh building out this application we're gonna be working on I'm gonna open up I'm gonna go back to zoom really quickly because I can't see the chat feature while I'm screen sharing so I'm gonna go ahead and stop sharing send out this link for her Sarah real quick and then I'll start sharing again so I just sent out this link you should be able to see it in that little chat that we've been talking about if you click on it it'll take you to this page on Heroku broke is a really really great service for deploying applications in general it's really quick and requires a lot less manual configuration than spinning up your own server or something like that and so once we're at this Heroku page you're gonna see this instructions for creating a history graph QL engine this button also lives on the hysteria homepage so if you ever want to come back to this you can go to the history I Oh homepage click the button on there and create an app this way as well you're gonna create an app name we're gonna be building like a pixel art drawing app I'll show you it a little bit so make an application name that kind of fits that mine's gonna be called pix art history so don't steal my name but I'm gonna click that deploy app button right there it's gonna run some scripts for me did you do and it was deployed yours might take a little bit longer than mine so I'll give a couple more minutes before I move on but once you're there you can go ahead and go to view this little purple button down there what's a pop-out to view your application and you get to this a server console okay so now that we have something up and running or hopefully you're close to having something up and running um we're going to go ahead into the data tab here it looks a little bit like a database you can see that three dots and we're gonna create some tables we're gonna create some data and we're gonna play with it so for now I'm gonna create two tables artists and songs and we're gonna have a relationship between those artists and songs so that our artists have songs that belong to them and then we're gonna play around with that data our live data will be based off of pixel art instead so this won't be our final project but I just want you all to play around with graph QL for a little bit first so I'm gonna create a table here so again going to this data tab clicking the create table button the yellow one here and then you can create a table name so I'm gonna call nine hours and then we get to create columns so I am going to first do an ID column which will be my primary key so when you're working with a sequel database or pretty much any type of database you're gonna need to want to have one column that's a unique identifier so some sort of unique information to that row in the database normally that's an ID or something called a slug and I'm going to call mine ID and I'm gonna change it to an integer with Auto increment and what that's gonna do is Postgres which is the database service that we're using is going to automatically add that ID column for us and automatically make it one ID higher each time so my first item in the database will have ID one second one will have ID 2 etc and there's a little drop-down down here that says that I can set my primary key so I am going to select ID to be my primary key field you can have multiple primary keys but the ID will be mine it will be my unique identifier in my database and then I'm going to set up a nother column this one is going to be name so this will be my artist name and then I get to make a column type here as well and I'm going to do text because I want their name to be stored in text you can also do all these different ones here Postgres is so amazing you can have like a money field or char field character field but we'll use a text field here and then the third column that I'm going to creep is genre so we're creating musicians and they'll have different genres associated with them Chandra and that will also store text information once I have this data all set up I'm going to go to the bottom of the page and click the bright yellow add table button and we have a database you can go to the Browse rows tab and it'll show you all the rows of data that you have in your database so right now we don't have any data which makes sense we haven't made any data yet but what if we go over to this insert row tab then we could add data to our database so the ID 1 is gonna be added for us by Postgres so we don't need to worry about that but the name in John row are two that we can add ourselves so I'm gonna add Britney Spears who's my favorite I have written blog posts explaining JavaScript things through Britney Spears song so you should definitely check that out if you have it and then John row she is a pop definitely a pop artist let me see this green inserted pop-up come up then you can go back over to the browser OHS tab and now you have data you can edit it you can delete it you can even copy it if you want to duplicate those rows and then I'm gonna create a second table so I'm going to create one for my socks so I'm going to click that data tab again click create table add a table name so this time it's gonna be songs add some columns so I'll do ID again as my primary key so again that's my column in the database that's unique to each individual row my columns I'm going to also add one for title so the song will have a title associated with it this will be text and that's all I'll do just because it's a demo and we don't need to get too in-depth but you could do the length you could do producers the one other thing though I'm going to add a foreign key column as well so that I can relate my artists to my songs foreign keys are how we store relationships in sequel databases we can have columns that store ideas of another column or another table and the rows in that that this database it or this row in the database is associated with so say I have different artists in my database Britney Spears right now has my ID of one right and so I could say that my new song that I'm creating that's a Britney Spears song so hit me baby one more time it belongs to Britney Spears so this foreign key a column is going to then store the ID of Britney Spears so we're gonna call this artist ID and people are talking about um how it's like in Django and it's exactly like how it's in Django which is a Python framework that is one of my favorite things to work with and also more suggestions coming up in this chat too in case the karoku creation was not working for you for me that restart all dinos seemed to work as well so always fun okay so this artist ID column again is going to store the idea of the artists that the song belongs to this is gonna be an integer column and down here we're going to create a foreign key so right here add a foreign key it's gonna be in the public schema and then our reference table is going to be artists so we're relating our artists table and our songs table and the columns that we're gonna really our artist ID to ID and so you now have that relationship between our two different tables so our artists will have songs associated with them and then we can also specify what happens if we update or delete an item and I'm gonna go with cascade that'll make it so that if I delete the artist it'll delete all of the songs associated with that artist so that's what I'm gonna do you can change that up if you want I'm gonna go ahead and see that so now I've got my two tables artists and songs and both of them have data associated with them before I keep moving does anybody have questions about this process of creating columns and tables and all of that you music so this might blow your mind but now we have a back-end all written for us so we didn't have to write any code and we have a back-end written for us so again what I had to do oh no I didn't create a click create table for song so my artists table looks like this so my data I have an ID column a name column in a genre column the name in the genre our text and my ID is an integer primary key and then I'm going to recreate my songs table because I messed that up ID which is a integer that auto increments I have a gun I have a title and then I have a artist ID which is integer and then I have my primary key which is my ID column my foreign key which relates my artist and my song and then I need to click this yellow add table button which I didn't before and so again we have a back-end created which is pretty cool give me a couple questions on there I did quickly show the artists right there so again the artist will have the ID the name and the genre on there with those data types and then you can add more columns than the modify tab yep so you can go to that and change your data there you is there a lot so I got another question through that QA feature and asking if there's a limit to the number of tables um I think the only limit would be to Haruka's free tier I think you're allowed to create unlimited amounts of tables but with Heroku is very tier they only allow you to have I believe a thousand rows near database it might be a thousand it might be ten thousand but I think it's a thousand rows and after that you have to pay for their upgraded Postgres service so that's the limit to it is the Heroku free tier Postgres but that's pretty much it you and then another question about doing this running on Heroku where you don't have a way to generate the migrations so not explicitly through here where you don't have migrations files though you can run Pissarro locally and I wonder if you could have migrations files on there I haven't tried to create migrations files so I don't know the exact question the answer to that but my guess would be to try to do the local version of Tessera so the songs I can show you the schema for songs again as well the Postgres instance is hosted by Heroku right now but Postgres interacts incredibly well with his Sura so my song data looks like this right ID title text artist ID which is an integer but it's also a foreign key you you you you okay awesome well we'll keep on moving I'm gonna create a song as well so again to create a new song I'm gonna go ahead to the insert row tab over here and I can type in the title of the song that I want to add and all do stronger by Britney Spears and then my artist ID will be one because Britney Spears has my ID of one right now and press save there and it was created I'm gonna go back to my data tab right now and it says that my foreign key relationships are not tracked right now so I'm just gonna click that track all button right there and that will add in my relationships and I can navigate them in graph QL which is the next thing that we're going to look at you cool I'll give another second for people to catch up but again we have the artist table of the song's table the artist table has ID name and John rrah and then the songs has my ID of my title and then my artist ID and then to get the tracked stuff it was listed right here for me so it was when I went to the data tab again it said untracked foreign key relations and I click the track all button I can't replicate it though because it's there now awesome okay uh I'm gonna move over to the graphical section so or graph iql I never know how to pronounce some things when I say them out loud because I see them so many times in my head that I'm like is that actually how you say that but I'm gonna move over to the graphical tab and graph a call or graph iql is this really really amazing tool that allows us to build graph QL to our uh queries and so we're gonna go ahead and play around with this and uh get some data back create some data and learn some graph to out so again we talked about what graph QL was a little bit earlier it's a query language that allows us to fetch exactly the data that we want so we have one endpoint for our application instead of multiple on multiple so we can create queries I love this Explorer feature on graphical because it allows me to just click on things to create queries so I am going to go ahead and query for all of my artists and you can see this is the syntax within graph QL for creating a query so you first have the word query and then you have the name of the query so I'll call it get artists there's a much more descriptive name than my query and then inside of the curly braces it has the different fields that were querying so at this point we are getting artists and then we can get the different fields that we want within artists so right now if we run this query which we can it's going to go ahead into our database and query for all of our artists and give it back in this data structures it's a JSON object and it has data and artists and it's an array of all of the artists that we have in our database with all of the data that we asked for if we made it so it no longer asked for name and reran that query you can see that now it just gave me the genre and the ID if we add the name back then it shows up again so we get exactly the data that we're asking for within this query we can also get all of those songs that are related to it so I'm gonna go ahead and click on songs and it'll populate for me and we're gonna have a second set of curliest for all of the fields that we want from the songs so I probably just want the ID and the title there that's going to be the data that we get from songs and now if I run this query you can say I have see I have this second array that has all of my songs and all of my ideas in titles because I asked for those if I removed title here then I just have my ID left but I can get all my data back in this way I can also do fancy things where I get only distinct information or order them in certain ways so if I order my artists alphabetically I can do that right now it's not gonna do anything because I only have one artist but I can get exactly the data that I want back in exactly the way that I want it back without doing a ton of work which is a really awesome feature of craft you um anybody have any questions about graph QL queries and the syntax for them I always use this graphed graphical Explorer to test out my queries it makes my life so much easier I also want to talk about mutations so queries are to fetch data so to get certain and data back mutations are to change data so if we want to add data to our database or update or anything like that then we can use mutations and I just got a question about how to link the graph QL to the database I actually didn't have to do anything I just tabbed over to the graphical tab and it uh works just like that pretty cool also getting questions about using restaura as a headless CMS and there are some really awesome blog posts out there about that I know that people use it in conjunction with Gatsby to create sites there but it would be a really really awesome tool to use as a headless CMS I think cool so again we're gonna go back to creating mutations so I'm going to click this add new mutation button and it's going to make it so that I'm making a mutation instead of a query again a query is to get data back mutation is to change your data so all of those actions that you would normally do with your different request types and a REST API where you do like your post requests or your put requests or your delete requests in order to change your data in some way you would do that within a mutation within graph QL so let's go ahead and create one to create a new artist because um we don't have very many in our database right now so I'm going to click on this insert artists thing here I'm gonna delete the type name right there um don't need it and then I'm gonna rename my mutation to creat artist I'm going to click on the fields that I want to add so I'm just going to do genre and name because the ID will be added to me for me automatically within Postgres so I don't need to worry about that so I can add a genre I'll do wrap and I'll do a name so I'll do Kid Cudi and I can also just directly add a song - so my artist ID is now gonna be - because Kid Cudi is gonna be ID number two my title I'll do day night and then returning this is the data that I'm going to get back once I run this query so maybe I'll just get my genre name and ID back so again my query looks something like this insert artists objects this is the data that I want to insert into my database so I'm going to be creating new artists with the genre wrap the name Kid Cudi and then any songs that I want to add as well so I have my artist ID which is 2 because Postgres is gonna add that for me title is going to be day and night and then returning this is the data that I'm going to be get back when I run my query so this is what's going to get back and I can run this oh okay I don't need my artist ID I'm gonna delete that because my parent already decided that graphic you all was smarter than I expected so now I can run that query again without the artist ID and it worked for me it did the join automatically there too and yeah it does the joining for us automatically so we don't have to worry about it graph QL handles all of that behind the scenes and we don't even have to think about it really that foreign key relationships are handled for us and now I'm gonna go back over to my query tab add a new query to get all my artists and then I'm going to get all my artists order by I'll order by name I'll get the genre ID name back my songs by title I'll just have that run that query for my query I shoulda named it something better but you can see that I got my artists back and they were nested with my songs so I have this really nice data structure that I can work with and I can use this data as soon as I connect it to my front-end so I've got this really robust flexible back-end with unlimited endpoints essentially so I can get any data that I want or change any data that I want with one endpoint so I don't need to make all of these different routes on my back-end I just have this one route and then I can use these queries to get exactly the data that I need back amazing ok any questions you want to put the questions in the QA if you have any that would be awesome I also love the people helping out in the chat that is so helpful thank you so much I'm gonna give you all maybe two or three minutes to play around with these queries and create some and work on some data right here and just play around with it for a few minutes um I don't know how to use the raise hand feature I'm super sorry if instead you can put your question either the QA or the zoom chat that will be something that I can use but I don't know what I can do with the raise hand feature to be honest and to connect the two tables via foreign key yet you can go to the data tab and then go to your table that you want to add the foreign key on which is songs and go to modify and once you're on the modify then you can add different columns and add foreign keys and all of that right on there so does that answer your question Sarah um shamira can we use this with like neckla fire only Heroku so this does have a back-end it does connect to a database so you can't use a static hosting service like net low five for this but you can use other back-end services as well Heroku just really nice and has this deploy button so you can have Heroku spun up and show everything just like this Heroku is awesome you another good question how does adding a song work with attaching an artist so when we create this new artists graph QL knows because we're creating this song nested to the artist so this artists were recruiting as the song nested within it it knows that this artist is the parent and it's going to create that relationship right there amazing so again I'll give you a couple minutes to go ahead and play around with graphic you out for a little bit if you find anything cool go ahead and drop it in the chat I'm sure that other attendees would love to learn and maybe I would too you oh I can allow people to talk so if somebody wants to talk they can put it in the chat that they want to talk I guess you okay anybody find anything cool on graphic you all and raise your hands and I can unmute you I think eduardo i think i unmuted you maybe not me you might have to unmute yourself oh sorry I don't know if it's working zoom is hard this is the first time I'm using the webinar tape technology instead of just normal calls so a little bit different but Eduardo if you want to unmute yourself I made it so that you can talk i bullying youth you okay so again we have this back-end set up which is really cool um and this is really all that we have to do we can play around with these queries we have our data created you can play around with it and see what's going on but this is really all that we need um I'm going to go ahead and go to our actual application that we're going to be building tonight so this is a good way to play with data but we're going to also build a game so I guess that's playing with data too I'll slack out the repository again here's my repository and what we're gonna do is we're going to go ahead and create this pixel art application so I'll show you what that looks like so it's this little drawing app and we can draw on it and then refresh the page and that drawing still persist because we're storing the data in the database and then I can also live see what other people are drawing and we can kind of collaborate together so if I do this pink and just make everything pink you can see that in both tabs my drawing is updating so very exciting you can draw with your friends once you build this in this tutorial tonight you can go ahead and share this with all your friends and draw together collaboratively so pretty exciting and somebody is drawing as we speak so this is my net little if I deployed app if you all want to play with it but we're gonna go ahead and recreate this using a Seurat and also the friend will be written in react so we'll go ahead and create up a database for this and you can see how it's updating with all y'all's drawings and I'm not even refreshing anything so pretty snazzy okay I'm going to go ahead and create my table for this it's gonna be a really really simple database table all that I need to do is create ID column and then also a color column so I am again going over to my data tab where I can create tables I'm gonna create a new table I'm gonna call it pixels and then I'm gonna create some columns so I'll do ID the column type will be again this auto incrementing integer that we haven't unique identifier for each row which is our primary key so I set it to the primary key right there and then I'm also going to do the color so this is going to store which color each individual pixel is and this one's gonna be a textfield and that's all I need so again ID which is an integer Auto increment and color which is a text field once I'm done just needs to make sure that I click the add table button which will create that for me you can also delete your sample data if you want so you can delete the artists the songs if you want but if you want to keep playing with your data you can up to you we're not gonna use it again I just wanted to demo creating data and then we're going to add some seed data so if you're using Hotel locally you can go ahead and write a seed script on there I made a populate sequel file here I'm gonna share it out to you and we're just gonna copy and paste this so you go ahead and copy that it's four hundred lines of white so all of our pixels are gonna be white by default and then we're gonna overwrite that as we go so you can just copy and paste this sequel code I slacked it out as well I know it's a little bit annoying but this was the best way I can think of for this tutorial again locally you can create actual seed scripts for Asura we're just doing it on Heroku so we don't have that um and on data we're going to go to this sequel thing so you see the sequel button down there at the bottom go ahead and click on that and it's gonna allow us to write raw sequel code so instead of using the user interface for Asura for creating columns and creating data and all of that we can write raw sequel data queries as well so for me I like doing things through code a lot of the time so this is a really awesome feature for me and again I just pasted all of that data from this populate sequel script that I slacked at or didn't slack out that I put in the zoom chat I am now over here in this raw sequel tab which I got to you through clicking the sequel button down there and then I'm going to go ahead and run that query I forgot semicolon at the end I am messing things up so make sure you that you change that last comma to semicolon I wrote a JavaScript script to write my sequel for me and I had a bug in my JavaScript code so sorry about that is it working I don't think it's working the demo fairy's again and oh yeah it did did enter them so now I have 520 rows in my database because I was clicking so many times so I'm gonna have to clear out my database and then run it again so um that's embarrassing if you did what I did I'll send out the query for clearing a table in Postgres so what we're gonna do is just run the sequel query we're gonna run that so what I'm going to do is go back to this sequel here clear that trunky pixels fleet from pixels like that again you should have 400 rows so there should be 400 items in your database instead of a bajillion it's gonna be a square so ran that command then I went back I'm gonna run my populate script again only gonna click run once this time make sure that I have a semicolon at the bottom and now I just have 40 pages which means I have 400 items in my database this time so always fun it's amazing because I practiced these tutorials so many times and always things still go wrong too funny but we fixed it you all get to see live debugging so that's a good thing to show as well any questions about this process about what we're doing why we're doing it essentially we're just making it so that all of our pixels are white by default and then once we start drawing then it's going to draw on top of it yeah I clicked that button a lot of times I created a lot of data so now we're up to IDs 5,000 oh yeah in order to see that I thought it worked I just went into this pixels table right here and it shows all of my data when I go to that pixels table and again there should be 400 items in the database or 40 pages you you okay we're gonna go ahead and transition over to working on the front-end so we have a react front-end that we're going to be working on we're going to be working through that I'm gonna slack out my code so this is the github repository we're gonna go ahead and clone this down if you have get on your computer otherwise you can just do this like download button instead this download zip that will work as well um but we are going to create the react code so what I have for you is some starter code so a lot of the react logic is built out for you whereas and we're gonna fill in the graph QL code so that we don't have to spend all night writing react because I know you all came for graph QL instead and people's comfort level on that poll that I sent out with react was pretty high all things considered so I'm going to go ahead and I have this like code tag on my computer that I normally put my code things in and I'm gonna clone down this repository I wrote it on my computer so I can't close the clutter down but I'm gonna go ahead and CD into that Sora tutorial live repository that I just clone down yours will probably just be history to toriel also a little bit of a cheat code here is that there are three different branches that I made so if you ever get behind in the code first all the code is in this lesson plan so you can go through the code here but you can also cheat a little bit and go to these different branches if you want any stage of the solution so no WebSockets will give you the static version of the sites where it adds data to the database but doesn't have that live connection and then the solution code will have the final version where it live updates and all that so you can go ahead and check those out if you want to skip ahead or anything like that so I just cloned it down again hopefully you all were able to do so as well and then I am going to go ahead and run npm install which is going to install all of the packages that are in our package JSON so all the dependencies that we need for this project are going to install let me talk a little bit about those we're gonna be using a series of libraries under the Apollo umbrella so Apollo has a bunch of libraries for working with graph QL both on the front end and back ends of projects but we're gonna use the one specific to react tonight they are really awesome tools for working with graph QL show off what we're using so we're using Apollo's react hooks extension we're using react hooks tonight so hopefully everybody's prepared for that if not that's fine I can talk through hooks we're gonna use Apollo boost which has some things that we'll use in it graph QL library Apollo Link WebSockets this or WS that stands for WebSockets this is gonna allow us to have that real time live connection where all of our data is populating and then subscriptions transport website ws is gonna allow us to do WebSockets as well so that's what we're installing you're just easier to do it all at once then all independently but just learn to talk through that that Apollo is what we're gonna be using for connecting to graph QL on our friend any questions about that I'm not seeing any Q&A right now but would love to answer anything that you all have for me go ahead and open up your text editor of choice with this code for it tonight all of the code is in this source folder and if you do NPM run start to run your reactive server you should pop up and it's a static version of the site for now so I can click on these green things and it works but if i refresh the page it doesn't persist so right now we're not connected to a database but we do have the code to draw a little bit so what I want to have you do is take about five minutes pouring through the codebase if you have any questions for me go ahead and drop them in the QA and I'd love to answer feel free to code review me as well that's fine I understand always like to grow so again all my code is in this source folder there's the app file the color picker picker it and then pixel those are the ones that we have code in so far and we're going to be swapping this code that is pre-written over to actually connect to Asura and then once it's connected to hysteria we're going to make it a live connection through WebSockets those are the steps that we're going to go through and I'll be quiet so you can actually look through the code a little bit yes everything is written using hooks I'm trying to get better with them the last company that I have worked with or the last couple companies haven't had hooks implemented in their codebase yet so I'm trying to challenge myself to use hooks as much as possible in my own projects so that I get better with them you you you you you you you you you things read my code will not pass right now because my test is very much failing I should have deleted this app dot test J's file would not get my pull request merge again I have a lot of former students in or current students in the audience and so I get to lecture them about how many tests that they should have all the time so I think it's all fair if they critique me here everybody have a little bit of time to look through if you want more time go ahead and use that raised hand functionality and I'll give you some more time so look through if not we'll start writing code you you okay so again all of my steps are in this readme that I wrote for you also if you want all the steps laid out they are here and used to get dips to show you what's changing I'm not gonna have this up on my screen but if you like having something like that please feel free to use it it might help to have the slower code there if you fall behind or anything like that so just want to point that out again that all of this code is here for you if you need it and it is definitely fine if you do need it because trying to go with the middle but you never know if I'm moving too fast or too slow especially since everybody's muted okay so the first thing that we're gonna need to do is go ahead and connect to graph QL so we created this graph QL server we're going to need to go ahead and connect to it so we're gonna need to import some things in order to connect to it so again we're using all of those amazing Apollo services and we're going to use those libraries to create that connection to pessoa that back-end that we built so we're gonna go ahead and import its GTP link from Apollo Link P so this is gonna allow us to connect to graph QL server via HTTP transfer so that's what that one will do we're gonna import Apollo client and then we're also going to import the in-memory cache from Apollo's cache memory anybody else using the new vs code auto import feature all the time I'm like getting unused to typing all my imports because I've been using that all the time it's a lot of fun and then I'm going to go ahead and make this connection exportable so I can use it in other files I'm creating this instance of the Apollo client I need to specify a cache for this Apollo client the new in-memory cache so what we're gonna use here and then we're going to set up a link to our server so new HTTP link our URI so this is the URI to your Heroku server so I am going to go ahead and drop mine in I'm gonna use that live one that has the data populated just for demonstration purposes but you go ahead and use the one that you created so it will look something like this if I go to page the picsArt together Heroku app com it'll spin up this console and it will give you a link to the endpoint so it's V 1 graph QL and that will have our graph QL link that we need to connect to so go ahead and copy that from this place on Hazara again history makes everything so easy it copy and paste that URI right there and now we have a connection created to a Pollock lion so that's awesome I'll keep this up on my screen for another second but then we're gonna move on to the index.jsp file and we're going to update that so our whole entire react component hierarchy has access to this Apollo client and wasting query from anywhere so we're going to go ahead and move over to that index J as file again my connection J s code is in that readme or in the solution branches if you need that got a question about whether we need to add this to anything to the list of dependencies as long as you ran npm install already you are good because all the packages that we need for tonight are already in that package JSON so you're good to go I am going to then again move over to my index J s and I am going to use the Apollo provider so import Apollo provider from at Apollo react hooks so Apollo has this react hooks library that allows us to use react hooks which is awesome we're using cutting-edge technology here all around and we're going to use the Apollo provider here we're gonna wrap our app component in that so that all of our components have access to this Apollo provider Sao Paulo provider and our app gets sandwiched in the middle so the app used to be all alone but now it's wrapped in the Apollo provider this kind of looks like react router if you've used that before and then I'm also going to import all that connection information that I discrete it so import connection from that connection file and I need to provide that to the Apollo provider so client equals connection and this will now allow me to make graph QL queries in any one of my components and we're going to be doing that throughout tonight give you all another second to do this before I change windows again I feel bad because there's so many files when I'm building things but I don't want to move too fast for anybody but again we're just adding this Apollo provider and wrapping our apt component in that using that okay so now we get to write the fun parts of the code instead of just doing configuration things so we're gonna move over to our app j/s and that's where we're going to create our query that pulls all of our pixels from our data set on her so we're gonna create graphical query is here in order to do that so right now I have this hard-coded array of pixels that they're all white but we're gonna make this data dynamic so again that react hook library from Apollo has a hook called use query in it so kind of similar to something like use state where use state allows you to use state within your functional components use query allows you to use graph QL queries within your react components so import use query from Paulo react hooks and then we're also going to import gql from graph QL tag this is a template literal tag that allows us to write graph QL queries within template literals so importing those two things I'm gonna use them in a minute but want to tab back over to pisarra and on asura I'm going to go ahead and create my query that I'm gonna plug in so um copy my link here go back to that and now that I'm on here in my graphic hole I'm gonna play around with my data and make it so that I have a query that gets the information that I want so the information that I want on this page is all my pixels and the data that I need from my pixels are is my color and my ID so I also want to order my pixels by ID the reason why I want to do this is that I always get my pixels back in the right order so if I make it so that they're not sorted by ID they're gonna be sorted by the order in which they were updated at so all of my most recently updated pixels are gonna get pushed to the to the top of my picture instead of staying where they should be so just want to make sure that we don't have that situation so I'm going to go ahead and do an order by ID right there and ascending I'll go ahead and test that query out your should be all white right now mine right now is the multiple colors which I'm using for demonstration purposes and this is exactly the query that I want that it's got all my IDs in ascending order and it's got all of my colors as well and you can see that this is the data structure that I'm going to get back once I run this query so I'm going to have to access my data in this way where I have my data attribute and then my pixels attributes and then it's an array of this data so I'm going to go ahead and copy that query right there and back in my app j/s I'm going to create a constant variable that stores that query so Const get pixels I'm gonna use that gql template literal tag so gql my graph QL query and then a closing back tick it is important that you use back ticks here and my whole graph QL query is going to go in side of that so get pixels is my query gql allows me to write graph QL query using template literals so that's what I'm doing so far again feel free to put questions throughout in this Q&A section or just go in the zoom chat totally fine and then I'm gonna use that use query hook so we are going to go ahead and grab that so it's going to return three things that we need loading error and data and use query takes the argument yet pixels so that's the query that we're passing to it so um use query takes the graph QL query as the argument loading is going to be whether or not our query is still loading so it'll turn into a false statement once we get our data back error is if we have any errors that it will store that in a variable and then once we get our live data back it's going to be stored in the student variable I am really quickly going to make an if statement here that just shows a loading thing if we're still loading so if loading is true then we're just going to return div or something like that so that if I don't have my data back yet it just renders loading on my page instead of giving me an error once I have that data back instead of just looping through those hard-coded pixels that I had before I am going to iterate through my deded up pixels because my data structure stored in that data variable right there it has the attribute pixels and so I can do the same thing here um just gonna be a little bit different that being said I also have to change this data so pixel will be my individual pixel so I do need to do pixel dot color and I probably want to change this to pixel dot ID and I also do need to pass the ID in as well so I D equals pixel dot a deep so now I'm making it so that that pixel component takes in my live data instead of the hard-coded data that I had before moment of truth when I load my app and you can see that I had my data all show up correctly which is exciting if you want to make sure that you're just working correctly too you can go into your data tab on her Sara go into your pixels table and change the color of a couple of your pixels so just make them white or yellow or whatever it doesn't matter I just changed that color there on her syrup you use this little edit button right here in order to change that color and then once you do that refresh this page and then you hopefully should see your live pixel data instead of it being hard-coded all white anymore so that's all we needed to do in order to connect that part to has Sara again we connected to graph QL for at first and then once we were connected we did that in our index J s we wrote a graph QL query to get all of our pixels back and then we used the used query hook to get our data back using that query and then we made it so that our data was our live data instead of anything else instead of that hard-coded white array amazing so the only thing is that still if I draw on my app it works locally but if i refresh it doesn't persist so I need to write a mutation that makes it so that every single time that I update or click on one of these squares I send a request to graph QL that I want to change the color of the pixel in the database so I'm gonna use a graph QL mutation for that I'm going to go ahead and go into my pixel component and add the mutation there so I need to import that gql template tag as again so to do to do so many files open so again this gql graph QL tag right here I'm also gonna import the use mutation hook sure well name so if I want to write a mutation idea they use mutation if I want to do a query then it's used query all overreact hooks right there and then I need to make a mutation to change my color and one of the really awesome things about graph QL is it allows us to use variables as well so instead of updating my pixel every single time to feed a same color I can put a variable in instead and so I'm gonna go back to his Sura and I'm gonna play around in graphical to make my mutation so I'm gonna go to the add new mutation thinking right here and use the Explorer to write this so update pixels where ID equals and that's gonna be a variable so I can go ahead in my mutation declaration lime I can go ahead and create some variables so what I'm gonna do is make it so that it takes in ID so the dollar sign is four variables and then I need my datatype for my variable so it's gonna be an integer and then I'm also going to make it take a second variable which is the color because I want this to change every time I run the mutation so my color will be a string so I'm gonna change this here so we're ID equals my ID very long so update the pixel where the ID matches the ID that I'm passing into this for mutation I can change a different pixel every single time if I want to you these are Colin's not semicolons I can probably zoom in a little bit here and then I'm going to add in after that set and this is going to allow me to set different things based off of my query and so I'm gonna set my color to be that color variable that I'm passing it so my new color is going to be sent to that color variable and then I can make it return any data that I want so returning color X ID that works you won't have X&Y that was from an older version of this and then you can create query variables down here so ID we could set it to I think five starts at like 1502 right so I'm gonna save 1505 it's an integer and then my color gonna be pink so your variables go down here in this little box your ID needs to be one of your IDs so if you did things correctly and you didn't pull a me then your ID will probably be a more reasonable number but mine's 15:04 it's okay so now if I run this mutation you can see that it ran successfully always exciting and I'm gonna copy that mutation over I'm gonna name it something better first though so change pixel color so again I'm going to go ahead and put this in a graph QL template gave it to a variable where was I even typing there okay so that's my mutation right there even use my auto formatter to make it a little bit prettier but my mutation is called trans pixel color it takes two variables ID and color the ID needs to be an integer my color is a string I'm trying to find the pixel that matches a certain ID when I do that I'm going to set the color to the color variable that I'm pass again once I do that very successfully it's going to return my color and my ID to me and now I need to make it so that I am actually using this mutation so right here I'm going to say Const update pixel color equals use mutation update color so again I'm passing the query as a argument to that react up and storing the result of it to a variable in this case the pixel color okay and now on click so once the person clicks on the pixel we're going to make it so that it calls that mutation so update pixel color update pixel color is going to take in variables so it needs to be in this object here the data formatting is a little bit interesting so object with the key variables then there's another object within that eye deep which is ID and color which is new color so new color is the color that we're changing the pixel to so color is the one that it's currently set to new color is the one that it's changing to so this is my code for this file here for doubt so my mutation fingers-crossed should work when i test out and when I update my pixel color on my game it should persist to the database fingers are crossed so now I'm gonna draw with my pixel I'm going to fix those corners there turn them all to black I'll fix this line as well and then if i refresh the page you can see that it persisted so even when i refresh the page now it should work yep and in the mutation these are all colons instead of semicolons you you amazing any questions so far about this application so it's complete without WebSocket so right now it works for one user at a time but if we want to make it work for multiple users at a time we're gonna have to go ahead and implement that now but any questions for me before we move on to that so you can see that right now if I have to localhost 3000 I can update it on this tab it's not gonna update on this tab once i refresh its updated on this tab but it won't live drop so if we want people to be able to draw at the same time we need to go ahead and implement that but any questions about what we've done so far you awesome well we're going to move this over to using a subscription so we're gonna use a WebSocket connection and what WebSockets are is normally you have this request response cycle where you make a request to a route and then you get a response in return WebSockets instead open up a channel of communication so you can send data back and forth that never really ends communication until you move off the page and that's really cool because we can continuously update these pixels and our site will continuously update with those pixels as they're changing it's really really easy to change this over to that we're gonna go ahead and go into our code again we're gonna have to change a little bit of our connection configuration so we need to go to that connection JS file here and right now we're using an HTTP link we're gonna change this to a WebSocket length so WS and then web socket link right there so it's imported from a different library but it's a WebSocket link now instead of an HTTP link um we also need to change this new HG pete link to web socket link this HTTP right here needs to change to WS s so instead of HTTP it'll be WS s and that's a web socket connection instead of an HTTP one and then we also have options reconnect this just makes it so that if the connection drops it reconnects itself so again the things that I needed to change was this two WebSocket linked this to WebSocket link this to WS s and then I needed to add the options reconnect to true and it makes it so that if we drop the connection then it reconnects so that's the first thing that we need to change and then we need to move over to our app.js and we're going to change our query over to a subscription and so subscriptions follow the same syntax as queries they just are this open channel of communication again so subscriptions follow WebSockets so instead of doing use query we'll do use subscription and we'll change where it says query right there to subscription so we only need to change those two lines of code so use subscription right there and then change that query keyword to subscription now the connection should work I need to change something though I need this to be you subscription here as well so you need to make sure that I changed my use query that I was using down here to use subscription and it's loading fingers crossed this works for Oh for refreshing again no got more for up horse what should I do what did I do wrong Livesey buddy always fun so I'm gonna go back over to my connection J s and WS s exert together WebSocket link graph you all options reconnect true do I'm gonna try restarting my server oh okay it looks like it doesn't like my trailing slash in my URL so I'm gonna try to remove that and it works again okay thank you so much for that suggestion that's a great catch so delete that trailing slash if you have a trailing slash in your URL delete it not a big fan of that you okay and then the only last thing that we need to do is change our pixel component to update when its props update so we're gonna use our use effect hook so that if our prop of our color being passed in to our pixel updates we update it live as well and so use effect um you need to import that I'm using my auto importer which is such a nice tool but isn't the best for teaching because I forget to tell people to explicitly important things so use effect needs to be imported we're gonna add the use effect in we're gonna only make it run when our color updates change color with our color so every time that a new color prop is passed in our color is going to update now changes that defines where do I have changed that's my bedtime everybody sleep for me okay magic refreshing thanks it works okay and I'm gonna go ahead and duplicate my tabs so that I've got to open and see if they both update when I update on one so I'm gonna go ahead and change this to red and oh my goodness they're on both sides so I am drawing in red right here and it's working on this side as well magic and yes I will put my pixel code back up on my screen so the thing that I added was I imported to use effect and then changed it to have a use effect right there and again all of my code is also in the repo you well well would love to answer any questions that people have about the the code but I had a lot of fun sharing this with you all tonight and hope you learn something new as well this is probably the quickest I've ever been able to build a back-end by a landslide like no competition here especially a fancy back-end with graph QL and WebSockets so I my mind was absolutely blown when I used to server for the first time and I think that maybe some other people's will be as well so I want to give you all a huge thank you for coming out tonight and know a lot of you were in my class today and then also learning new things tonight and thank you to her Sarah for having me as well I want to have to hand it over to them real quick to show you some other cool features hey folks I'm says I'm a developer advocate at who surah I says I can't start video but that's fine I think I'm gonna walk you through some of the features upcoming features that we're working on and we've made life super easy on the front end and we thought that the next thing to do is to extend the back end so that's what these features are about so let me see if I can share my screen so hopefully you can see the slides here oops present there we go so the first one we'll talk about is actions the word action may be familiar may sound familiar from redux the way an action works is when you create one it becomes available as a query or mutation when you run this query or mutation you'll be able to run some business logic with let's say a server list function for example before adding an email address you might want to validate it first so you can use the actions feature for that the example here is a custom mutation that just runs a function to add some numbers the next feature is custom fields this is for extending the data model with your own custom fields this can be backed by sequel if it's derived from existing data it can be back by another graphical server via remote joints or it can be back by a server list function in this example the weather column is a custom field coming from a weather API next up is data triggers when data changes an event is triggered so you have a web hook that gets called with the event for example you can send an email when a new user is inserted in the database welcome your awesome etc similarly you can have so this is how this is when you insert a user in the user table it will call a send email web hook and then similarly you can have scheduled triggers trigger create a report every day at midnight or Sunday welcome emails step seven days after user creation hey don't forget about us etc so those are the features coming up soon if you'd like to join the surra community we have a discord channel discord GG slash Asura where you can ask questions and follow us on Twitter at historic HQ that's it for me awesome well thank you all again for coming out tonight it was great to see some new faces and some old ones as well we're getting questions about recordings I don't have all the answers but rejoice you might okay amazing the recording of the slides will be out to you all tomorrow we hit email cool have a good night everybody you you you you

Channel: Hasura

Views: 3,471

Keywords: graphql, hasura, realtime, multiplayer, subscriptions

Id: yoaZnAB9_yk

Length: 109min 55sec (6595 seconds)

Published: Sat Feb 15 2020