---
title: "Exploring the latest Svelte stuff while connecting Hygraph CMS w/ Scott Spence"
description: "Svelte is hot right now and we have invited Scott Spence to join Tim Benniks and show us how to use it with Headless CMS! Tune in on Wednesday, at 4 PM CEST. Join our slack community and feel free to ask us any questions:"
date: "2024-05-31T18:29:23.000Z"
url: "https://timbenniks.dev/videos/live-hygraph/003-eydstedp-v4"
youtube_url: "https://www.youtube.com/watch?v=eyDsTeDp-v4"
playlist: "live-hygraph"
image: "https://i.ytimg.com/vi/eyDsTeDp-v4/maxresdefault.jpg"
tags: ["cms", "api-design", "content-ops", "frontend", "devrel"]
---

# Exploring the latest Svelte stuff while connecting Hygraph CMS w/ Scott Spence

Svelte is hot right now and we have invited Scott Spence to join Tim Benniks and show us how to use it with Headless CMS! Tune in on Wednesday, at 4 PM CEST. Join our slack community and feel free to ask us any questions:

Watch on YouTube: https://www.youtube.com/watch?v=eyDsTeDp-v4

## Transcript

[Music] all right that is the best entrance wait ready one two three go just in time to see Scot washing in the background and we were literally just talking about hey how does that work with like blurring it out but it seems like it's blurred a little uh it's it's just the camera it's fixed focal point that is it yeah I have I have a fixed focal point too but I can't I can kind of change it a little you see here yeah it's it's not it's not what we focus okay just fixed length yeah exactly so um welcome do you feel still at home at something called hgraph where you used to work when it was called graph CMS it's been a while right yeah I mean uh it was like where I started my content Journey my first YouTube video connecting to uh uh to the content API and using name gby so a while back I remember being on your stream I think was I on your stream and yeah I think you were showing us graph CMS at that point or it was a while back like two three years I think yeah happy to have you back yeah man it's good to see you yeah and so you are now into the spel world and so before we talk about all the swel stuff maybe you can you know say your name the way it's meant to be pronounced and what do you do that's a good start Maybe good okay my name's Scott Scott Spence and um I I'm currently a team lead for a company called extend Ops do business process Outsourcing which is uh help desk for companies and um yeah uh I think you mentioned Tim that it's uh it's all spelt it's big spel repo we've got um three main apps and we've got like several periphery ones as well uh all built and maintained in spel kit and uh I'm I'm a team lead for um one of the uh the apps there and so you are really in the SW world like I think most of your content that you make outside of work is all SW related right pretty much yeah yeah uh well like we just discussing earlier if there something I've I've worked I had to do for myself then that get put into post somewhere yeah yeah this this is the way to go when you learn something right about it and I think you have a lot of visitors on your blog and so I imagine that blog is built in swelt as well or swelt kit at least it is yeah yeah I was thinking about Astro this doing it in asro yeah uh but there's like pre-processor things you need to do and yeah I don't haven't got time for stuff like that anymore no no there you go it's baked and I can I can use it then I I'll use it but um ex you know building stuff from scratch there is a bit um bit bit timec consuming For Me Yeah but I think today we will build some stuff from scratch though and so um there is well spel five is coming out but I'm not really in that broad so to me it's like okay so it's not there we don't use it but you just gave me like a CLI thing I can paste in to get a specific version of this SP 5 that completely works right so uh that's just for Tailwind um but yeah the the spel world I mean it's it's a it's it's it's busy there's a lot of stuff happening um so um I mean the the end of last year I think uh for for December uh spelit V2 was released to the world um and then um earlier this year uh the release candidate sorry not earlier this year earlier this month I think uh it's F Summit Spring uh the release candidate for spell five was announced by Rich Harris and um I've been using it since start of the year maybe SW five right and uh there's there's a lot of stuff going on there it's pretty cool um does it feel similar to n 3 when it just didn't work for like six months or is this a slightly different approach to to a release it completely Works um so if you are coming from spel 4 to a spelt five like upgrading the project uh the like the runes which are uh like based State that's my next question you're going to have to explain what a Ru is um I'm got to struggle to be honest with you uh you know I use them but um uh actually explaining what it is maybe it's based on signals yes and that's that's that's that's about as as deep as monolog goes on it okay now you're gonna have to a lot of projects are actually taking this on as well so um I think solid uh I think the idea from solid um I think the original idea is in backbone JS backbone really yeah so um um that's my try of thought now where I was going with that um well we're talking about how how like how spel 5 now works and oh yeah what those rooms are and how all that works yeah so if you upgrade a spel 4 project now with um up to spel five yeah then um if you've got like existing components which are not using runes they will still work in spel 5 it's only when you start um like say if you want to use a state Rune in uh a a file then you you've opted into runes so if you've got a lot of stuff in there all of that needs to be converted over to use uh you know runes mode yeah um there's a um there's a migrate button on the spel 5 preview um which if you want to share your screen Feel Free by the way yeah I'm just gonna um just GNA get the URL for here you really oh yeah sure I can put it in a banner here let's just get this so that is I'll put it in the chat yeah that's the the repple and then you can go to docs from there as well um I'll just share that for let me see but then ah so light mode beautiful yeah so then you can see next say run go we go next to where it says runes at the top there under where it says work in progress expect bugs there's a migrate Button as well so if you put a um spel 4 file in there which uses reactivity then it will convert it over to uh use runes for you and so this um so yeah so this seems to be super nicely tucked away so is this using the runes or is this the the the SW 4 one so uh this is using runes so the dollar State uh dollar state dollar derived um that's the two I use and there's also effect and then if we go to the docs we can see what else have we got here runes oh so much um yeah um derived um derived and effect is there another one I'm missing yeah so this this feels relatively at home for me coming from fuds and stuff like that it feels very similar yeah maybe we should have looked at this before we started the stream oh this fine we're learning live like I like the thing is I I've done um a stream like a while back when it was like I think we did not even swelt kit but like an older version of swelt where none of this was there and that felt good already though and so the this just makes it feel closer to home somehow lots of state stuff the um yeah the the state stuff now um because it works on um signals um you have state cross um component boundaries so yeah uh if it is in let just look at this documentation here runes Snippets event handlers Imports Universal reactivity so if you go to the universal reactivity bit on the uh the side panel on the left there yeah um yeah and then here this is um saying you can move the the function outside of your component here or page and then you can actually put it into a dots spelt ts4 yeah um and that means you can use um um yeah so it's basically just a kind of a it's it's its own state that you can talk to from other places essentially yeah yeah that's very it's like it's like super stores um yeah like stores was like the go-to before okay but now use um uh this. tsv and you can use gu and set in there and very interesting so you set this is basically just a little State Management kind of thing just for this scope and you can then put that anywhere yep and so I imagine if you have that in multiple components then when I click plus here that that component somewhere else would probably show that same state I presume too yeah let's try it out just create a new component so you you can do that in here actually yeah right you want to do that in here yeah so uh next to where it says c doel as a plus button just just create a new a new yeah give a fancy name nice okay so I'm just going to copy this stuff yeah so I need to import of course this thing and then oh do I create another counter or do I get the counter back somehow um let's just go back to the component let's just strip out the uh the counter and then just just put in the count take out the button as well actually let just see what the yeah I kind of just want to see like let's do this yep I got a lot of learning on a stream like this like I I just didn't even know what to paste in here uh do we need to oh no because there's no counter now so we got create counter um oh we do need to do a create counter okay oh yeah it it actually it really doesn't know what this thing is now okay count count is there a hit is there a save button somewhere here because otherwise it just wants me to do this no I should just I save I don't think there's a PR um we we do have to load that component here I guess oh yeah yes do I do an import uh yeah import scott. spel I mean you can name what if you want but yeah oh from so it's Scott doel uh sorry import Scott from Scott doel yeah all right oh here we go there you go it's not super happy anymore but now we should be able to do this right oh it might want uh H and this begins with uppercase so just rename the import capital S yeah exactly yeah otherwise it's just okay then we have to do this oh there you go okay not yet oh this is my grammarly stop it you don't want grm here can I just turn that off right now how would that work I don't even know oh just just remove it okay yeah we're on the live stream come on I don't want to spend like Precious minutes I'll put it back that's fine okay so I'm thinking that uh if we go back to yeah count of do spelt there that's actually using the increment as well isn't it so uh turning the increment function to increment it so um there's I'm guessing there's always got to be a um some sort of action uh attached to that bit of state which is odd thinking about it I just want to display their state so go back to the Scot component again yeah so we should just be able to get that counter yeah we still have grammarly by the way but all right okay so it does know but we've created an instance again and maybe that that might be our issue can't we just make another output like a return of the count itself Al there's a getter here right yeah so that's actually what we're asking for let's just uh did you have the docks open still or uh can open them again let's go back to that example uh find grain activity was it this is oh yeah universal one yeah here this is the one yeah yeah and then we could make like this yeah this is what we where we at right now yeah we import it yes and so it's is similar to what a store would be yes but okay so do does it not show us how to oh there it's a store right so yeah the dollar not ation uh oh but okay come on we're not there yet my friend what's happening so clicks counter yes back in the component retrieve yeah well that's most likely about this one then no it doesn't really like that also um I'm thinking that what we can also just do and don't so in in this the Scot component uh in in the component just get rid of the uh we kind of need to import from somewhere I'm saying get rid of that line three um yeah but maybe there's another way of exporting like doesn't it have like is there somebody in the chat helping us no that's fine so maybe this counter um it it outputs a getter and an increment oh yeah because that's what it outputs so it should just work but apparently this state is not global because it shows zero again right uh where was that example Universal reactivity what was that example you found so this example in a playground okay cool all right that's that that's that right no it's it's really standal it's not sharing uh uh so so counter not much there but we have tried it what we should do though probably um maybe not go too deep in this unless there's somebody in the chat who is happy to help us and say Hey you missed something um why don't we just start a new project from scratch and then we connect it to Something in hgraph I would be pretty interested in that and so um let's maybe you know what you sent me this thing so I'm just going to copy and paste that and also share my screen again what was it I sent you this yeah not that that's just that's just to add tail into a spel kit project oh seriously oh okay so this is just to add Tailwind okay yeah um that was that very specific version of of spel ad I found exactly and then the other one is this one that you sent me that's yeah that's to initialize Houdini in a spelit project too so um yeah spel and then which one create spel MPX creates f is it because what do I do I'll do pmpm creates F oh we can do pmpm yeah pmpm create space spel then the name of your project um skeleton project yeah exactly uh can do typescript TPT yeah go with it this is nice and I just say yes to all the options because then you don't have to add me later yeah exactly well we're definitely not going to do a test here but we will do spell five preview right yes that was fast um so now if you go yeah if you see the into that uh and then you open up code I guess or whichever let's open the code and then in the background I'll install and if we take a look at the uh package.json quickly yeah oh there's lots of stuff in there nice and so if you go down to uh spel you can see we're on version five next one next one so uh install latest version um so once you're in install script is finished do um PPM i-d spare next and it will install the latest version it's like 130 something now I think oh really okay cool so like this yep spel it next just like this at at next sorry oh at of course yes let's see where we are now 138 that's that's a few versions they they iterate quite a lot um cool so um we've got our skeleton project set up so yeah you can run run this and see what what we get it's literally just a static page it says work up spelly I think perfect cool okay so that works so what actually because this is a a high graph stream right so what I want to do is actually connect this two a high graph endpoint and just query something in spel kit just to see how do we get something from a graphql endpoint on the screen and it doesn't mean we're going to have to go like super deep and build all the things out out but it's nice to see the developer experience where do things live and all that stuff let's do it okay so let's see we're just going to grab one of my projects um you know what we'll just grab this one and so this has a whole bunch of stuff let me just open it in our new studio so it looks a little nicer the new studio I have to log in again but sure oh no that's the wrong button oh no and now my all my emails are on the stream oh my God anyway let me just look at this re preview for a second are we in yes we are so hgraph has its new studios in beta and so it's much optimized a lot opt into it uh yes because it's still in beta so you kind of just you can try it out and if you like it you stay in and otherwise you can always switch back here to Classic I'm just looking at this thinking yeah it's not the same as what I was looking at earlier no no exactly this is this is slightly fancier and so um it's it's mainly like we have things like this and so all this on the sidebar and stuff and these are these components if you have a lot of data they lazy load in so it's it's a way faster and it's actually using remix which is is that is that an opin thing or is it like any if you go to your like um homepage here you can just switch which one you want oh yeah High graph classic yeah so now we have high graph extra fancy and so we're in here now and so this basically let's just grab like the homepage of something I've built and so this has a slug and it has a title description lots of different components so there's a bunch of data here that we can actually a query for a use cool so I do have to you have like pre-and queries or uh yeah that that shouldn't be too hard to figure out otherwise that's there's lot of lots of work there um high performance so this is our end point so we can just put that in our quickly here so we don't lose it uh okay so what is the best way to query um graphql so in the um the example I've done with that in the past I've just used um graph request which is just a really simple rapper yeah um we have used that before that's actually super um it's really simple you know just just check in I think you need to use the graphql language Library as well and use the gql back tags uh back tick and then cheuck in your query and off you go we have the Houdini thing right tell us about that yes sorry too fast that's fine um I um I heard about Houdini two two years ago now I think and um I spoke to um the the creator of it um and I can't think if it's always been called Houdini or it's called something else to begin I know it's name let me just open this up John EES kuet um and so when I got introduced to it I don't think it was hini I think him and Alex ales have just gone right let's um synergize and put their efforts together so um this is all the stuff we're looking at here is based on um spel kit um V4 okay so and you know spel 4 so if you look at that example there for the plus plus page. spel file um you can see that it's using uh the the reactive de cation there and it's structuring info out of the data so that data in spelit you get like a data prop pass to uh any page and you can generate that with a uh a client side um uh load function or you can do it on the server as well for most of this stuff just do it on uh just do it client side no no need to do it on the server because you know it's a public public API so you don't need to hide anything um yeah and that bit there you're seeing there is the plus page. gql that's so um anyone who is familiar with spel kit would know that you've got like several different file types you've got the plus page anything which is in like the roots folder of a spel kit project yeah if it's got this uh plus notation uh it means that it's special to the spel compiler and it'll go off and get information for that for load events let's say and uh you know if a page felt file has an accompany accompanying um you know Plus page. Ts file yeah it will um go off and get that data and that prop um the data from that will be passed into the page is a data prop so yeah you've just created the same name essentially right that's why it's connected yeah yeah okay so that's going to go off and uh I mean for for this you need a um oh it's just just passing in the hardcoded ID there um but you can just you know uh put a query in that file and when Houdini runs it'll go off and uh get information plunk it into your page in a data prop but we haven't got Houdini installed yet so no not yet to do that uh before you do that though let's let's just have you got git initiated on that project just we can see what's changed first of all so just do get in it I guess and then just just uh get commit that you want me to just commit everything y that's what we're doing today yeah so now we'll do that um Houdini init command okay where is the npx Houdini at Canary in it oh we're we're we're like at the the bleeding edge of everything now version 138 of SPS number yeah and then Houdini will along 20245 uh you know what I'm not sure if that's changed from the version I was looking at earlier today so um yeah this this is going to configure Houdini and that's the whole reason why I asked you to um take the um you know Comm everything into G so we can see what's changed yeah exactly put that in there yeah I've pasted this URL so it's likely now doing some sort of introspection right on this graphql API yes oh that's nice that it did that um so so fancy again pmpm install I love that it does this on install or an in it or whatever you want to call it uh so now if we go back to the app and we go to the um the this here you mean yeah the source control oh yeah this see what the difference see what's changed so we've got graph uh RC file which is um stuff I'm gonna describe that um nice so yeah just disclaimers I I you know I use it as a allll I'm not that deep into it um but this is just getting us all configured who have uh who did run so if you go to the uh spel config file the next one yeah so there's actually a um uh it uses I thought used the pre-processor but it doesn't what's going on with your comments there are they well yeah because let's just go here so this is now what this is what it's finally became ah right so um we've got Houdini is and Alias there so we can um pick out stuff from uh Houdini so we could use this is like just to import stuff right yes okay cool so what this will do um in its current state I believe it goes off and creates a store for each component uh sorry each graphql query so in your page. gql file let's just put in some let's make a quick query to see what we can do uh here playground um well home and then we probably can just grab title yeah here we go whoa there's lots of stuff going on here wait this is where I need to be [Music] um let's just grab a a few things for now so we have some Basics so we've got all right so we're just default it to home got tile description and a slug so I'm guessing the slug right sorry okay so now if you go um to your terminal is it running already or no not yet okay so if you um pmpm run Dev so now it will probably introspect and look at that query and then do something yes so if you see the output here generating runtime one new page query so it wouldn't have done anything now I guess it's still the same yeah so we need to pick out the data prop in our page exactly so which is this one yeah so that's here Ste that from here right something like this yes oh I don't have these components though so we'll just go like this first um just um just put in script tags at the top there um do I not have a swell language here go to your extensions and search for swel why is this not installed I've used this before yes nice okay so we have imported the page data from Houdini now probably right because of this this this one okay yeah so this is like still spel for land ah all right um so rather than just do that for now um I do you know the old um preag debugging thing so you stick in a pre- tag I'll put it in the chat so what I usually do is stick in stick in a pre- tag and then uh yeah there you go that bottom one there ah oh just I do this all the time and then just dump it out and you can see the shape of the data yeah and so this oh well we just now need to just put page in I guess yeah is what theer is that is that what the query's called it's called page page okay cool and but this is coming out on like I wonder what you know what why don't we just try this first yeah just yeah and then just give it to that for now this should work right let's have a look oh there it is cool so yeah no this is fine so we can now go to go back to your pre- tag and I think it's a data. data um actually get rid of your um no it's not that get rid of the doc type there and then in your script tag so get rid of that uh yeah get comment yeah get rid of that and then in the script tag after script L TS no no after in sorry in the script T oh yeah after that's it yeah Lang yeah equals TS and then we should get some intell now on data so if you hover over data do you get anything reload the window to be safe it's oh no it's just it's not okay nice um it really doesn't know what's coming out it should do um and why doesn't it I wonder if we should restart Maybe because potentially this hasn't run yet um no it did run all the stuff is actually running even yeah yeah it said you know generating run time unchanged one file so um oh and actually this was working before because when we do just data whatever comes out this actually works yes so uh actual information is not there yeah so we need to into that more but then there's no actual content not this at least uh so uh it should come in as page data so it looks like all the information about the queer is here but whatever comes out of the query is not here so go back to your editor again yes uh get rid of that reactive statement you mean this y right uh instead of export let data just have let and then put um put data in some curly boys yeah and then data equals dollar props and then some oh wait it's it's like this yeah yep and then uh parenthesis at the end there of pro sorry it's a function okay yep okay happier my PR here is not working though that's a little annoying but it's fine uh so prettier Prett I mean prettier plugins felt should have been installed do you have a prettier um yeah normally it just fix like it fixes my stuff on Save but it's not the worst in the world for now Okay so we've got that so we've got that so so now we can um get the data the store for that data so okay let's make let's make another variable and call it uh page data not a g or something or I don't care anymore exactly I I really don't care anymore um I've started using l a lot more because it's less characters and easier to Ty agre easier to yeah data Dot and then see what you get out of that nothing okay let's bring let's bring in some types just so we can yeah there's something with not very happy so um let's import a type so if can import a type from Houdini here yeah and then uh I think it's probably this right yeah but like in yeah hini maybe's um and yeah see what you get from there like page is there anything under page oh there's lots of stuff coming in uh try uhini I uh I don't think read only input what was that again sorry go back to that page result no I don't think it's that uh for Houdini just do for slash right and then go back to your import and then try page data oops there we go right so now page Data Page data yeah okay thanks typescript so on line six now we try data Dot P we do it's not exactly happy is it P does not exist on type empty so this does not important in the types um so page dat it has but what what does it think it is oh that yeah because we're not typed the uh the prop so on line four oh typ the prop yeah yeah so yeah colon curly boys curly boys because you need to oh yeah of course data is Page data so inside curly boys there you need to say the like this yeah right now on page data there we go there we go right so page data yep and then it's a store so we're going to need to put a dollar in front of that as well in in the pre- tag so get rid that get that dot like this yep Y and then in your line six there give triling dot right wow this is like alien language to me but if it works I'm gonna be happy look at that okay can you explain what's what a store is in this case because I I just I know I love that this works I just don't know why right so let's take let's check out the dollah Houdini uh folder in The Roots there yes right at the topini yes so I'm guessing this is going to be in um if we look at the types we can find the types we've just gone and found um there's our stuff this is all generated for us this is all generated that's cool though yeah and then I think is it in graphql I'm not sure if it's like pre here here's our page data which is probably in graphql schema so documents what's in there nothing nothing okay um it for my standing from this it'll go off get your information and then um put uh all those that queried information into a uh smoke kit store for you so you can go off and just get that cached information as as when you need it oh yeah oh they actually they cached the thing here also yes there you go okay yeah I was having a poke around in this earlier and I was like oh okay so it's just there yeah so this is basically like the like the Cod gen stuff that we see in other Frameworks as well it's basically it's not really specific to a framework it just go Gen some stuff so you get the types based on your query yes um now it it was a really roundabout way there um to you know we had to this is probably because of you know it been spel five and um you know not being tightly integrated into um Houdini just yet so exactly this could be easier probably um yeah um I'm I haven't really spoke to JS about this but I'm going to guess that they're going to use um the the shared reactiv which we we took a look at earlier yeah exactly to do this um and then you can just pick it from um from State essentially yeah um uh um you know pry pretty sure it's not not there yet with that you're kind of walking around a hot pile of stuff but it kind of works though I kind of like it um it's not too complex you just have to get that you just have to understand that whatever prop is given from this graphql result as a store to this page if you understand that concept this is no longer that complicated I just never understand why you would do this see this is why I was trying to get my head around the other day when I was just playing around with this and just trying to get you know um try to use something other than graph your request to to get the data um now the the reason why um I went down the Houdini route was because um I don't want to have to write all the types for um the data coming in from graph request um but obviously there's there's other bits um associated with that with you know learning how to use a tool and exactly all the all all the bits and Bobs that come with that um so with what you're looking at here yeah um I'm gonna say that with um um just you know spel it is spel kit 2 um and using spel 5 if you go off and um you know get some data when you'd have that data coming into the page as props you don't need to type that because the SW compiler does all that oh it will do it for you that's nice yes this is why I'm saying that we had to do the stance of finding the right type and then and normally you wouldn't have to do that I'm not sure I'm not I'm not sure what the Houdini gang have got lined up for this but um uh you know that seems like the logical path to to to do it it does because they have all the information so why not push some put something into a prop as a type that actually makes a ton of sense so for me because I don't know um spel kit that well could we maybe make like a little component and then add a component on the page based on what data we have that's um a l let's let's go to the Houdini docs and we'll try work it out together because I was looking at this yesterday evening and um so we've just done query loading State um to go back to uh get started again um yeah reusing parts of a query I think that will go into um all of the you know using a fragment oh ex do some fun stuff that's like uh a I'm going to say that's a component which is imported into that page I imagine yes and then and then uh we're passing it the uh store data as as the source there exactly um actually we can fragments that's pretty cool though let's try that okay who we going to the double what's happening double props yeah yeah okay so wait let's first have a look at how they do this so we have to that that double props is um uh SP for hangover um and do I really understand what it is no I don't think so um I'll see it a lot in component libraries and stuff like that but um yeah maybe let's not worry too much fine let's have a look at what this whole thing is here this fragment stuff and so yeah this is used so this is using uh you know the the dollar colon there so that's felt for uh reactivity so we could you know pop it into a new component and it' be fine but if we're going to be you know mixing stuff around then we'll probably bump into some issues with that so um okay uh the thing with the Houdini though is that that Top Line there import fragment gra from Houdini yeah um I thought you'd just be able to import a store as well so like the the page store we've got um I mean like Nirvana for me would just be able to import that store into a component and then pick off the information you need from that store yeah if it's already existing data at least yeah but it doesn't seem that that straightforward um so um because this is basically the graphql function that it created for you by the code gen you're going to have to use this now to then actually give it a fragment or something and then you get information back so this is a very different approach of getting data than we did before because there's no plus page. gql now no that's the thing so you have to different one again yeah so this doesn't load the data yeah it's try that the thing is look there's also something with a page here and then it here says Sprite info and we just created that here I think is that perhaps the fragment we create this starting to look a little complicated because how does it know what Sprite info is is it using like the name Sprite and the variable infro and then putting it together or something oh maybe this is it it might be a type don't know don't know what I'm gonna say it is how it is I was thinking oh my God why like let's try and adapt that to to what you've got going on then so um this is for what looks like a so that's a component um and then let's just make a component right where do I put lip components yeah in there yeah I almost typed few wow whoa okay so we have 12 minutes let let's see how far we can get I's going to oh maybe I'll just grab it like this just say what you can get out the um out of the Houdini um import there I mean you know you got graphql and fragment comma see if you can get uh there's quite a bit but Alles I think is your page in there your page store yeah that's pretty cool that's um let's see what we can get at the page store without doing all this complicated stuff let's see what we can do with that that's that's kind of cool so what we need to do though is update this to get my hero component out of high graph let's just add that in I want components wait components what components W let me I'll query it and then I'll show you in a SEC because that's really interesting is it like its own content type with multiple parts to it yeah so basically components are little models that are connected to um the page schema and so if if I have a hero component I cannot find that same component and connect it on another page a schema instance but it's connected to this one so it's a lot easier in data management so when you're a Content editor you can actually add a hero component to this schema but this is now local to the schema and so with that in mind you can do fun stuff like uh here if I close it I can just move that around and so these are actually not um linked between schemas and stuff there's no relationship it's just this thing is connected to this schema so we're just going to grab this out of there now does that make sense m so components hero this is a interesting interface to say the least wow all right so now we just got from the components the hero with the title and description so we can do some fun stuff there and we let's also grab the image what's all those empty empty uh objects well there's a bunch of other components I think and and I'm not asking for the the rest of the components what we could do is maybe I just grab like the whole query for everything but that's that's kind of big and we don't have that much time 9 minutes you know what we'll keep it to this no image for the hero all right now we have to rerun the Houdini thing right so it needs to uh go termin it it might just say it's rerun I'm pretty sure it would oh you can't scroll up using yeah I don't know what happened there yeah I think it's already done it that's why it says it's unchanged it probably did it now yeah exactly so it was it was oh it's super smart there you go oh it's not getting the stuff oh yeah here so it's grabbing the rest of the components I have on the page but without the fields so that's what the Ty name are for and so we have the title description ID of that hero now here cool so that we can actually give now to that component we're going to make let's yeah let's see so it should be in the page store right I guess so so do I have a do I do it like this um let's just try um I imagine no you you know how that works how do I get because it's not prop we're actually getting it from the store directly yes so um get rid of that just just get rid that L for and then just try yeah yeah yeah now it should know just put uh page store into Data there and then you yeah do the old pre pre- debug I don't think it's is going to understand what this is at all just um yeah put a dollar on page store yeah doesn't store needs to be an object with a subscribed method on it yes so um get yeah so it should be well try without the dollar sign then why is it why why is it like this what is it now it's a class oh maybe now it's a thing oh wait we need to so import it into your yeah and now do I do this component do you know what I do I very R do it now I'll just put in the component name and then let um there you go well this is good enough yeah it should be dollar libia I think oh probably yeah well there's nothing in there but what we could do let's see if something comes okay so it does render so page store is essentially nothing okay yeah it's an object basically yeah so go here okay so what does this do so it's a class so it constructs automatically I guess do does that mean we have to somehow Make an instance of it and get something back oh do fetch do you reckon go is it do fetch let's try it's not knowing anything about it well yeah I I feel like we are kind of grasping at here because we're not actually following anything from the do just F this thing is yeah um the thing is I feel like all the DNA to do this stuff is basically here but it just needs to come together somehow that's what it feels like with this proba got Johnny screaming at the screen if he's if he's looking at this um right now let see if we have any comments of people screaming yes we H we do have 50 people watching and not scream screaming so we're doing something right hopefully or they're screaming and they're like sighing and not even mentioning it that's they're so they're so so annoyed they can't be B to comment um the thing is we did try like something that's basically Alpha and we have the stuff on the screen like honestly with with is your desk ah there we go looking at this code I could actually probably get pretty far if I just get the information on the page. swel and then add components and then just put props on those components and then you can do something right that's pretty much what I did in that example I shared to you and yeah I was having exactly the same dance we've had with is it typed properly can I get the data from this stuff like that today I was working on a next 14 project with the app directory same Vibe and so maybe this is just web development I mean if you for me I'm kidding yeah um but um yeah I'm still really I mean as you can tell early playing about with that yeah sure and um yeah I mean it's pretty cool if you need your types um also if you just want to reuse parts of your queries then exactly however they they they end up on how they're going to do that um so when do you think this will release like properly or nobody know no I guess they're waiting the the release candidate to to happen and to that I'd say I don't know okay so with that in mind sorry go on about say on the uh the spel five uh runes page I think there's a little link on there to to see how many tests have been uh run yeah um I'm not sure if it says it's felt five ready yet and it just says no with a list of all the test which is still failing um the thing is because I'm asking this because I want to make starter kits with spel because it's super cool to make a starter kit with swell five and high graph because there's a bunch of people who love using this stuff I guess I better wait for a release candidate right I the release candidate for spel 5 is out but obviously we're going to have to wait for uh library maintainers to to catch up as well oh that's the thing that's happening with what we were just looking at like Canary yeah you know so it kind of works kinda I don't know why it worked but it did so um I'm I'm I'm sure there's there's a lot of work to happen on on on that still but um we were still using like the stores approach when um I think like it should be going to um like Universal reactivity for that I don't know I'm I haven't spoke to uh johnes um in I don't know 18 months or so now so oh right so they're just working on stuff um yeah and he I mean he's you know the the one one of the sort of uh core um contributors to it um along with Alec Ares and I think the person who's actually working on this felt 5 branch is another contributor as well so open source is open source you know yeah yeah it's it's G to happen when it happens and not before yeah it is what it is but the thing is if it like I think we'll hold off making a SW because let's say we do a swel 4 project now and they come out in two months and everything changes it's kind of extra work but if I do with this that we just saw I can probably get it to work when I you know get a few frustrated moments I'll be there but then if it changes again I burn my fingers again so I'm not sure yet I think I will wait a little um yeah I mean like I said uh towards the start is um you can you can use spel 5 in a pre-existing spel 4 project it's with the runes and stuff so you know you can do it in spel 4 um to to begin with and then just gradually move over to it as you need to but you know um being been a Devo and doing starters and stuff is um you know that sort of stuff is a usually one and done and maintained you know as a when you get time to do it yeah and that's the thing right we're trying to be a little bit more serious about that and making sure things are up to date and actually make it make more of them because you know what what we're doing as death RS which is super fun nowadays is I'm actually making it more into like a serious demo repository for our salespeople and our partnership folks and stuff like that and their starters so if our salespeople cannot use them then it also doesn't work so I it's a more serious thing now and so it's nice to make it structured and to actually have it my job to keep this up to date because I'm actually developing more than I thought which is super fun anyways we're hitting the hour here so thank you so much for this this might have been my one of the most fun and otic streams we've done and I wear that with pride so thank you for that that's awesome we literally had no idea why it didn't work or why did we not pre-install s and you know what it doesn't mean we're not prepared it means we're open to learning and just showing folks that it can be hard even for people that do this all the time because you're literally the the the the most spy expert I know right and and you work in Enterprise software with it right so you're literally the best person to ask for this with grq I think he's gra on The Daily so sorry that's true though I do yeah um so I will I'll give you I'll give you the links for um uh for best stter um put actually yes put that on because this is super cool stuff let's get the source code what I cobbled together yesterday uh where's that gone I have it here I'll put it in the chat you got yeah okay yeah I have it so for the people watching if you want to see like a super cool um swell five Houdini proper project um go here well that's a long URL but it's in the chat and then you can also look at the code base for it where basically it shows what we just did but it works that's a pretty nice difference right actually I was there the other night just hammering it into place yeah g yeah we like hammering into place all right so thank you very much um Scott so where can people find you um 10 on GitHub um Scot sp.com find me on there uh and then most places at Spencer at Spencer 10 at Spencer 10 that's it thank you so much and and uh thank you everybody for watching and we'll see you next time cheers thanks y'all