what about now did i fix that let's see how big do you see the little do you see the little bar moving yeah i think i get it all right now we're now we're on audio thanks josh uh in the chat this is about i don't think i've ever successfully run the uh the show correctly so all right this is a random that just means we're gonna have to do it more yeah keep running running the operations i've done it a good bit it just something goes wrong well hey everybody we are uh this is a informal uh we just decided to you know just a few minutes ago to do some streaming brad has got some work he wants to do uh this is not gonna be our official live coding happy hour show uh that's still tomorrow um we've got a plan for it and everything today uh i'm andrew barnes this is brad tilton and what are you working on brad yeah we're going to do a random one today uh i published a graphql blog on the developer blog today so i've been doing a lot of random graphql we'll say development and lots of graphql troubleshooting to try to make my blog post work uh the way i wanted it to so we're gonna do more graphql uh here and i'm going to create a graphql api for my cooking management app that we haven't we haven't really done anything with in a while but it's to manage long cooks and recipes and we have a thermometer integration and all sorts of things so i was telling you just this week that we need to do some more cooking yeah well i need to do more actual cooking smoking yeah i haven't done that i brought up the cooking app in my mind yeah i haven't done any long ones in a while either so we're gonna do that feeling like that's gonna be this weekend then i'm gonna i'm gonna do some some this weekend i gotta i gotta pick something yeah all your salmon talk has gotten me considering doing some salmon real quick but then i think it's time for a pork butt salmon is nice because it takes smoke really well but it's a relatively short cook so you still get to smoke something but you only need it yeah but that's just like dinner i wanted to i like the adventure of the day of smoking yes that's what you're doing that day is you're gonna sit out there honey what are you doing today i'm smoking this pork that's right the kids can come out and help me if they want but yeah yeah that's where i'm gonna be so well let's uh let's get girl going with this graphql uh api endpoint you're going to create all right let's do it let's do it what is desktop three it's this one it's it's always an adventure all right i think there we go we have that mostly mostly okay all right so i've got i've got my blog post up i think i'm going to use this as a reference point but if you go to developer.servicenow.com blog.do this is my post that was published you do need to slide it over some brad i don't know what's going on but you're oh yeah you're like grabbing it the teeny part of the video that is strange did you switch over to the desktop view in the scene no let's see if that makes sense there's the video scene and then the desktop scene i think it has james you did here there we go api you you did all right i think i think i fixed that let's uh it looks good all right so this was my just this was my just so you know like oh now it's oh you've got screen resolution issues because it's following your mouse man all right we'll see once we get into the instance we'll make sure that everybody can see code [Music] yes so we had a question will these videos be uploaded anyway any anywhere well for best stay on youtube yeah they're gonna go to youtube maybe we'll cut out some of uh some of the issues uh anyway graphql so in the paris release we released this graphql api framework uh and you know the the main i think the main purpose of the graphql framework is to work with the now experience components and you know that's uh that's what we do in the post here and that's what we're going to eventually do on uh this stream or a stream uh if we get there so this post was was really about setting up a [Music] graphql endpoint and then consuming it from a component and the process of setting up the endpoint itself was actually simpler than i thought it would be i i think once you get the hang of it there's there's definitely less code than when you set up a scripted rest api um but there are some some gotchas uh so we will uh we'll take a look at that a little bit so i'm gonna hop into an instance here and how does that look that's okay yeah this was a completely random time to start the stream so that's uh you know it's definitely not going to be convenient for everyone um i have this up on my ipad and the scrolling is kind of strange with this but we are going to set up a new graphql api here for my cooking management so i actually have one that i set up for the blog that i wrote uh for incident hey upside down andrew i see you it is not it's it's not the weekend for you which is strange [Laughter] yeah it's on it's only friday and i'll show you right now yeah so we're going to set up this is we're just going to call this cooking so there's a couple of important fields when you set up a new graphql api the schema name space is going to be important and then the app name space is going to be important so whenever you whenever you build your graphql queries in your components or whatever system you're consuming graphql from those are the things that you will need to know and you'll need to include in your query so it's it's going to automatically add a namespace for me if you're in the global scope it's going to add some some name space for that global scope too which may be i think it's going to end up being your company code but but yeah so i have that done and then once we get into the schema here we've got some different things that gives us some stub code this is all a standard i think it's just called this type and schema framework um there's a graphql i think i link to it in the blog let's see um there is a standard for this and here it is i know because i wrote this part this morning yeah so there's a standard uh far back i don't know there's a schemas and types and if you click into it the graphql documentation is pretty good and it kind of tells you how all this stuff works but for our purposes here we are not going to we're just going to do some querying to start so we're not going to do the mutation so we have the the query here and i think we're going to do let's do find active cooks and i don't remember what the uh what the syntax is so i'm gonna check here five the active cooks i like active cooks i think active because there's not gonna be more than one probably so i don't know we may not even pass at a parameter um which i believe is okay so here we have in my incident query i am finding an incident by its id but i believe we don't even need to do that if we don't want to so i'm just going to say find the active cook and what was that so find it and then colon and then we have to tell it what type we want it to use and now i have to go back and remember what we have named all of the things in our cooking management app i think i'm just going to call it cook so let's save mandatory fields so this is uh this is set to true by default i i'm not going to worry about acls um can't find type cook oh i believe we need to then say type cook and then we need to tell it let's see what do we have in our incident so we have ah so for type query we're saying hey there's an incident query and then it's saying hey you told me there's an incident query but you don't have an incident query type uh so we do have an incident query type here and i believe this type displayable thing is a fairly standard thing we have here so i'm going to grab that and we will put it in there so let's just take a couple of fields and i'm going to do a shift tab and make everything happier and we want uh let's grab sis id and i what do we say displayable string something like that yeah we're confusing everybody i know i did at least go and update the uh title because it it did grab tomorrow's oh okay so yeah this is generate tomorrow's this is a random one we were like let's do a live stream so that's what we're doing i have graphql on my mind you know i'm just going to leave it at sis id for now because i don't remember any of the other fields yeah okay you know it's not that tricky to go to the cook table we're gonna go look at it uh here let's let's save the cooking api and then go look at the cook table it is hacktoberfestville um yeah is is this a uh have you stored this in github yet it is in github and it's public uh i think it's it's under my github so it's like github brad tilton now cooking dash management i i believe is where this app is so feel free to grab it and uh do do whatever you want with it um so you if you want you can contribute to this one and uh we'll tag them uh for hecktoberfest i'll get the url and throw it in the chat nice yeah so i'd subscribe number short description description let's grab a few of those things so and you'll notice there's no commas here this is a graphql i don't even know what to call it it's a graphql thing uh schema syntax that we're using in here and it has a name it's like the graphql something maybe it tells us in the sdl there we go look at our tooltips working uh phil is wondering what this app is yeah so i was just typing it out um oh nice yeah cooking cooking tracking so cooking tracking i do i both andrew and i do a bit of meat smoking with you know if you get these cuts of meat that are really fatty you want to smoke them over a really long period of time like 20 hours and when you do a cook like that you want to track how you did it because you don't really remember a 20-hour cook so i have a wi-fi thermometer where anytime i do something in the app it goes and grabs the current temps from my thermometer so i can say you know every time i add a log or open the smoker or you know wrap something it'll give me the temps so that is on some past live code happy hours so this is in preparation for doing some some ui work we want to create a graphql api to hook into a component yes eventually we will hook this into a component maybe today right you're overly ambitious for today i can i'm barely awake so i can post links into a chat though i'm still at that level i had to do it from our master account because it doesn't let you from uh person i'm joined in the chat with my regular google account and it was like no it doesn't even tell you you can it just it just accepts it and absorbs it it doesn't show it to anyone else andrew i didn't even think so up to upside down andrew suggests that i write off the smoker on my tax returns i hadn't even thought about it but it's now something i'll be looking into all right now that we've created the schema we have to create some scripted resolvers and these are like can be really simple um scripts here so we basically just want to return a glide record okay and i believe i know how to get a glide i record think i have to do anything special oh because we are we are not even uh we're not we're just doing the active cook oh so i want to i want to query for an active cook so we'll say you don't use the macro [Music] oh you know i used to use the macro i should it's hilarious i go through phases of yeah thing var gr tab and not i had a i had a on one instance i had created a you know like a better macro and then i used that and then it was gone yeah me too what do we think the i'm gonna say and then when i was at the customer and you know when i was working at you know the same instances all the time um i i would always do it from the list view because i had a create a script from this so it would prompt me for the variable i wanted and then would put into my clipboard the pastable glide record query for with my variable name and that that was nice and it and it also reminds people to you use the list view for for building your queries because a bad query is very sad do we think that i extend i think i did extend cooks from task uh i did it has an active field do we use it we do not all right so state work in progress we're gonna have to mess with this um let's set them all to uh yeah well they're all done so yeah i am not currently smoking anything as as sad as that statement is i'm not so let's look for state is work in progress well uh did you uh you know did you get auto magic and there there's now only one active one uh i didn't i just closed them uh oh that's a good question did they auto close that they did that's what i was asking and yaya there's some pains with working from task extension but there's also some joy [Laughter] and then i think do we return let's see what i do in the blog here return i do do a return all right and so this is because you're are you not sending over a society you're just yeah the active one yeah so this is probably like a terrible example if you want to use this as as something to go off of the one on the blog is better but really all i want is i just want the active cook uh so whichever one is active if there's multiple active then you know maybe i'm maybe i have my yeah both my smoker and my grill fired up but man that sounds fun i should do that actually i have to name this i like how that that's not a problem that's excitement what if i've got two active cooks that means i've got my grill and my smoker going let's do that yeah my wi-fi thermometer has six channels and i don't have six probes i think i only have like four but that that would be a great excuse to fill up all the channels um i love you yes so we have the cook here and then i let's do a while we're while we're here i want to do a related um a related table and i think recipe is a good one for that so let's make sure so we're gonna we're also going to return recipe and so when we do recipe is that right source i feel like the last time i did this it auto-completed and that's not right uh oh i need to give it a oh so we let's call it a name first yeah source so recipe source and then i need to let's just copy this thing all right i made the same joke in my head andrew and i'm also a grown person i it's always i mean the kids especially love uh when i cook a pork butt because we all get to have fun with it um so recipe.value and then i need to add a recipe type now because i'm now referencing another object type yeah recipe and then for the recipe what do we want in the display name or just yeah let's just do the sis id and the name displayable string i love a little copy pasta all right and then i'm going to save this one to give me any messages it does a bunch of parsing when you save this and so sometimes you get some really fun messages uh which is fun as well silly man that's right and then we need a recipe resolver also um so let's do it this time uh recipe was and then what do we have there we go so since uh i'm not really sure the the real reason for this but since we're going to be referencing the recipe by sis id this get source is going to give us the cis id of the record being referenced here okay uh that's that's about all the all the uh information i can give about it [Laughter] and this looks right those match and so so our cook record is returning our recipe sis id and the rest is the recipe cis id is passing that along to this resolver and this is getting anything extra i need which in this case will just be the name yes that is correct uh i mean technically since we're grabbing the value and display value from all the fields everything we might need to do this but we'll we'll want it later so right as soon as we need a third field that's right we'll we won't need any more work other than adding it right here we'll be so so happy that past us did this yeah sometimes you know you got to help out future you not always right that person you know has got to deal with what comes but sometimes help them out so right now this still does not work because we have to tell the graphql api uh which parts of the schema connect to which of these resolvers so that's where we come into this resolver map all right and it's pretty interesting uh it it basically parses out that schema and gives us some options clearly has gone and grabbed all of those uh and populated them right here nice so the important one for us is this query find active cooks so this is like the when i initially hit this graphql api i would find active cooks this is what we want to know here and then we only have a couple of resolvers but that's going to use the cook resolver and that's all i have to do for these mappings it's really just a you know this is a regular mini to mini table and then we want to do another one so any any time that we are referencing another type from one of these types it needs a resolver so if i was referencing like five different reference fields in here i would need five different resolvers and they might all use the same scripted resolvers um even if they're the same so if i have like uh in my incident for yeah you're gonna reuse the same scripter resolver but you need mappings for each cool uh i like that i love playing with that i was excited i was i was plowing over you i was like oh cool you're teaching me something brad i love it uh so our cook recipe is gonna use the recipe resolver so that should be it for this one i'll show let me show the incident one uh that i have that i used for the um for the blog i really like the blog yes so this is what i used to write the blog post and you can see we've got a few different types in here problem user or cmdb and there are some of them have multiple and then down in the resolver mappings we've got like an incident open by use of the user resolver caller id uses the user resolver and then if i wanted to you know reference user from problem which i did here problem opened by also uses the user resolver so there still is a lot of uh you know a lot of reuse there um so that's it uh for the api uh at this point it should work uh and i think uh i think we'll try to make it work um yeah i i love trying to make it work uh i did i don't even have my the right vs code window open though so let's uh let me open a vs code and create a spot for this component and then we will scaffold a component and connect it i'm not doing this on the screen because that's i'm going to have to no i think i'll be good i i think i will be good actually now you should already have all done you just need to scaffold a new project right yes that still takes a moment so what he's doing for those that haven't seen this before is he's using the now cli uh to scaffold a new component project and then install its dependencies let's go over i'm going to zoom in a couple of times here nice and now we will scaffold the new project oh there it is needed a refill i i need to refresh my youtube so i i had it in a background tab and it down you know browsers downgrade when things aren't there the front tab so i'm going to scaffold this project uh and i believe the only well let's see let's that'll that'll get you when you're playing incremental games in your browser i wouldn't know anything about that though uh so we have to give it a name that i think that's the only required uh parameter here as we give it a name uh and that's probably all i'm gonna give it uh you can create a um let's move this up a little bit okay you can give it uh you can create this offline and the nice thing is it won't connect to your instance first so if you wanted to create it with you know a different scope for whatever reason you could you could do that but we're going to go now cli project and then the name is going to be i'm going to use my initials and then we're going to call it what did i call this query let's just call it that for now the real purpose of this component is just to test our graphql query which we could have done with a uh we could have done it with another one yeah well i was going to say we can do it you can do it with the uh you know third-party tools that will allow you to just initiates graphql query against an endpoint so that's true part of what i wanted to do was man etc yeah it was do our graphql effect um it's uh man tiberia sounds nice it's it's thomas actually uh yeah so we'll do this oh that's nice oh wonderful thursday stream uh yeah so we'll do this from the component i have sort of successfully used a graphy ql which is i think it's in it you can use it in in browser i used it successfully at one point and then i tried to use it recently and couldn't get it to work and i'm sure there was some random you know little thing that i was missing but uh yeah all right so we're gonna let that scaffold here or no we're installing dependencies i'm also going to import uh this may even be what it's actually called the names are pretty uh straightforward yeah most for the most part they make sense there that's one of the nice things about a new thing is it doesn't have carryover names that are you know bad here i'm going to open the other one that i was using and we can we can reference that because i would why would you build something from scratch multiple times right so this is the one that i used on the blog i will drag that over real quick here i have to import create graphql effect but i believe i did name this correctly so i'll i'll take the credit there uh whatever there is to give um so let's do that and then um i'm just going to do it install the dependencies for the effect and then i'm also going to steal our query for the component and then we'll we'll come back in and fill everything in that we need to so you just added in the action handlers that you built from your other component over to here and you'll adjust them as you need for this one yeah sweet yeah which basically we haven't really done much i do need to add the component bootstrap so component bootstrap is a lifecycle event that it's it's pretty similar to uh like dom loaded from prototype which is what i always use so it's once the component is uh it's done loading no i need the action types here so all right nice yeah and those action types are really handy when you need to perform any of those life cycle actions and and monitoring them so you don't have to create those you could you just get to consume them um which is nice yeah so we don't even have a problem number yeah so because we're just getting the actual i want to fetch uh we don't need to use the word craft cube let's just say fetch active goods uh i guess we should prepare for it being multiple uh and we are not going to have a variable list so i do need to specify the query at some point um but what i'll do is i'll leave um i'll leave this and we'll just what i did for the blog was i was kind of lazy and i didn't actually parse our results i just uh pasted the json just json right into the right nice so we're going to do that so what do we call that payload of course all right so we still need to define a query so we'll just do that here and we'll say click query and then i think i'm going to borrow my query from my other window which i put this in the constants file file okay we're just doing it in line here in line because you're only abstract when you need to yes if it gets too long you need to break it down into pieces but so here we have our query and i don't need the id here so we can get rid of that we have our app name space so if we go back and look at our query will go to our app name space and then i think we called it cook right cooking then the name of it was find active cooks and then we will just be very simple and try to get something back at a name right cis id number short description so let's do that sis id number uh short description one of the things i appreciated about graphql and i i you know probably pretty obviously if you watch this uh is that i'm i'm no graphql wizard uh but one of the things i liked about it as i was learning it uh that should not be is that the um the structure and data that you get back from your query is the same as the way you have structured your query so i should get basically the same thing back but with actual values here uh which is kind of nice you can uh you have a little bit more control over that's the big that's the big benefit over uh like a scripted rest api is that those are very defined by the source on what you get back and how it's structured but with graphql it is from the requester they get to to pick that yeah yeah so it's it's very uh dynamic and then from our end in here we can really open up a lot of uh tables and um you know you can open up a lot of tables you can open up a lot of different queries within those tables and you only ever have this one endpoint and you know you can make changes to it and add more things to it but people that are consuming it don't necessarily have to make any changes because you're not changing what they're doing so what i think one of the big problems that graphql was created to fix was both endpoint sprawl and versioning so you know every time you change the way the endpoint works you create a new version and with graphql like that that whole process just doesn't happen as often so it's possible that this could work right now um i'm using chuck's json stringify i had no idea that you could do this and make your string if i look pretty i learned while i was writing stringify and chuck told me about it on a previous live code yeah that was just last week but yeah we've used it a few times on the show i always forget about it uh and then chuck comes along and reminds me every six or seven months all right so let's go ahead and develop this thing and maybe it'll work so at some point it is it's building this it's going to open up a tab there it goes and then hopefully we will not get a blank screen we did not it worked look at that so this is our uh this is our adjacent object that we got back everybody else out there cantu that's pretty great i mean this is very similar to what i did in the blog uh that i wrote this week so it's uh it's something i've been doing but you can see that the result we get back here is this object and it is uh very very close to the query that we sent except now we have values for these properties and in our little objects here yeah and i think for the you know anybody who's watching if anyone is watching um a valuable thing to do real quick is add in another um field right here real quick that you want to see and show what you have to do in order to get that from the endpoint yeah so right now we're grabbing the value of cis id number and short description and then if we go back in here we are also grabbing like recipe so let's get the sis id and the name from the recipe table and see how that works so this uh is something that's not completely uh straightforward uh so for recipe uh i'm telling a recipe and then i'm gonna say i want the sis id and we'll take the value of it and then we want the name and let's take the display value i haven't done that anywhere yet although they are going to be the same so if i save this and we go back over here it should give me yeah so here's my recipe and then from my recipe table i've grabbed sis id and name um and if we wanted to say so we have name is on there um maybe we wanted uh ingredients since i know that has some some data so i could say hey we want ingredients and that's a word that i don't want to type out then we could come in and say let's also take ingredients here uh and then if we come back over here uh we now have ingredients so the display value is the uh what we just added there so i i think once you get it once you get the api set up initially it's really easy to add more you know more data about the table itself and probably when you set it up you're just going to add all the fields from the table but you can add more related tables in those resolvers for graphql you could do a little bit more coding and you know get something that's more than just the sis id of the related record so for me brad um can you show me that the requester is asking for one of the things i'm not providing on the recipe table do you want me to try to grab a field that's not there i want you to ask for a field that the provider isn't set up to provide yet oh all right so i know that uh so you know the rest description description so ask for a description and we did not do description oh and then we got an error and it and it's even a useful error which is yeah hey description isn't defined over in wow it's pretty specific on where that's not line 24 column 11. line 24 column 11. yeah but yeah that's a that's a good error and uh this errors object uh exists all the time if we take this away and then over in my oh no no can we put it back please i can't open it up i wanted to show the the whole chairs is still there what was the description where you yanked it you should paste back yeah there you go um so now back in my instance show me how to add that so for description all we're going to do is say description and now next time i reload the component it'll work yes wow that's that's some cool stuff right there that's pretty easy once you've gotten that close like i i'm a fan uh yeah so phil asks if the line breaks are important on graphql i don't know the actual answer to this but having worked with it a little bit it seems like the answer to this is yes that line breaks are very important based on no semicolons or anything all right well we went through everything that i wanted to go through here anybody have any uh questions or something else they want to see us do still have a few people in the chat you you did what i thought was cool like yeah so so one of the nice things about this and i think i did this in the blog is you can add more queries to this too so i could you know this is find active cooks i have i have a thermometer table so i could find you know all of my thermometers and then i could use you know these same um these the same schema and resolvers to find those related values so for and i guess this is uh helpful if we go in and look at this incident example so for the incident i have uh you know i'm finding incidents by id and i'm finding problems by id and because those have so many similar uh fields and you know users and cmdb i can reuse a lot of i can reuse those resolvers so i don't have to create you know new scripted resolvers i really just have one for each table and you know you may have one per table per you know operation you want to do on that table if you had like a you know really advanced query you wanted to do that wasn't just grabbing the sys id but i think one of the nice things about these graphql apis as they scale really well could you do async things like check the temps in the query i think i could do that from my component um you know the api is just there to be consumed so i guess the question is is is a graphql api call from your component a thing that should do something other than give a response um right so that was genericizing the question a little bit and abstracting it because what we've seen so far and i'm this is not a leading question because i don't know the answer to this question this is a legit question that i have is so because one of the many things that a scripted rest api can do and is intended to do is perform any arbitrary actions that you want and i just don't know if graphql is intended for that because i don't know enough about graphql yeah so i'm showing this uh there are two types um in the schema one is a query and one is a mutation type and i have not messed with the mutation type um and i believe that may let us do different things but i also am not familiar enough with it to know that for sure exactly what that is i know if you if you set up a new one and we saw this i actually uh got rid of it when we looked at the cooking api that's not how you small graph um it gives you the yeah both a mutation and a query type here so i think i just don't know what the mutation means yeah that's uh graphql part two yeah that's correct ql next week coming to your blog whoa next week wow i didn't specify you know when now is sometime in the next decade so it's always so that's that's kind of the question i i don't know the answer to that question phil what if mutation is post that's my that's what i suspect but i don't know enough about graphql to know so we are not doing graphql tomorrow i think we're doing we're doing some service portal tomorrow throwback a little throat back nothing wrong with that still plenty of service portal out there in the world heck there's plenty of cms still out there in the world what am i saying oh cms all right that's where that's where i cut my teeth on jelly we are no not components in portal just uh we're gonna do some widgets all right i'm gonna switch this back to video to end this thing here wait come back baby come back now we're good you can blame it all on bread oh my lighting's so terrible now you can't blame me for everything you're my lightsaber the the lights uh definitely have changed here since the the last hour yeah i've got my the sun is like right there so yeah yeah the sun is right there for me too is it is it really no mine's mine's an hour lower it's right there that's right all right well thanks everybody uh we will be here at our normal time tomorrow uh complete with uh chuck i believe and we will be doing uh i believe service portal uh stuff on the show but thanks for sticking around with us we did some graphics you're driving brad you sound out i mean i'm driving tomorrow i have like 24 hours before i have to do that you could change your mind all right that's true i could change my mind all right i mean that that live stream is is is overwritten now so it really could be anything we could do whatever we want all right we will do something tomorrow uh around uh around 3 30 central i don't know what the rest of y'all's time zones are but 3 30 central tomorrow thanks guys nice hanging out