Video details

Gatsby & TypeScript | GraphQL & TypeScript


Sarah Smith & Aaron Powell

Hi folks! Thanks for choosing to join us for another online edition of BrisJS! Monday we have a great speaker who'll take you through the night, live streaming with our usual interactive options for Q&A :)
❓ Questions/voting and feedback will be gathered using Slido for Q&A:
We're still all online for the time being, and we still really need more volunteers, so please don't be shy, do get in touch for next month or beyond!
Gatsby & Typescript: blazingly static - Sarah Smith (GH: sarah-j-smith) - 30m Sarah is a wonderful polyglot software engineer in our Brisbane scene and has even presented with us before on the advent of TensorFlow JS. Tonight however, Sarah lends her veteran experience into taking us through learning about Gatsby JS - the static site delivery framework based on React. In this particular take, you can have your static sites with static types! TypeScript fans (or just the curious) can see how you can use both Gatsby and TS together to achieve good results.
TypeScript + GraphQL - Aaron Powell (@slace) - 20m When building with GraphQL you define the schema up front and this can be really handy go use when it comes to writing the queries, resolvers, etc., especially if it's in TypeScript. So, how do you go about doing the type generation? We'll take a look at a tool that can generate you the TypeScript types, then implement our backend using them before looking at how they can plug into the front end with React Hooks. We'll cap off by learning how to model our storage platform effectively using its own types and combine them with the GraphQL schema types.
🔆 Our zoom pro account is sponsored by PCCW Global.
❓ Why not volunteer to speak next time? We're taking talks anytime! for details... or... 🔊
You can check our Github issues page for upcoming topics: 🆕
Submit a new topic with a template:
Code of Conduct BrisJS is dedicated to a harassment-free experience for everyone. Our anti-harassment policy can be found at: We expect everyone to abide by this straight-forward policy to attend in person or interact online.
You're also welcome to get in touch with us or tweet at @brisjs for any information or future events.


Hi, everyone at home. We are now live, actually. Apologies for that. We've had a bit of a mix up and on my end. And we've set our speakers up as well. So a few minutes late, but hopefully be able to make up the time. Welcome to Julys. Event, where we'll be hearing tonight about Gatsby, Jass and TypeScript and some typescript and some graphs. Graphs. Q Well, now that you can all see the things that I've been trying to present to you but wasn't actually live yet. And now we can hear everything. I'll go straight into the slideshow link. Slider is where we're going to be collating all your questions for the speakers tonight. And it's a good way to manage that. And you can upload other people's questions if you share that question. And you would like. This is really cool. Please, please answer that first. Those kinds of things. Ever run on the channels happy that fit this stream started. Apologies, everyone. Technology. Okay. So good. Now hopefully you've got that. You've got the slider link that I've pasted in the live chat on YouTube and we've got our speakers waiting in the wings. I'll go through my precious preamble. We like to do this at all of our live in putzing events. And since we are all distributed, we I still think it's really important that everyone can acknowledge the traditional owners of wherever they are right now. If you can go and do your research and find out exactly what the traditional owners of your site where, I think that really helps us to understand and help pay respect to its elders past and present. So thank you very much for doing that. And if you know way RSVP pays. Even though we're not doing these in-person events and I don't have the same logistics of making sure there's enough pizza and enough tables and chairs and things like that, it's still really important to be able to see numbers come in and see how our tendencies are. Even now that we have distributed I take some stats from YouTube, but I also use the YouTube attendance. There are recipes that are on there to understand. Everyone that's that's keen on joining this event in which events gain more traction and what kind of things you're interested in hearing about. So thank you for doing that. If you know the way I am, Jess has a long established code of conduct. It's a harassment free experience that means online as well. So we want to make sure that there's this there's good behavior in our, ah, online spaces, just like this chat channel and and and the ability to go and pose questions to everyone. So thank you very much for doing that. If you're not aware and you haven't made you so familiar about that one. Please find a price jast at org slash conduct. I love to hamper on about this one all the time, requesting a talk or some vinegar talk is super important to me because I always need speakers. And you'll see me badger people on Twitter all the time in the nicest possible way to try and be able to get some speakers for every kind of event. If you're at all keen or even if you need some support to get started and please just pop up an issue when I get up and excuse me in front of my friends and issue on, I get help and I'm able to go and then have that dialogue with you. So that scheduling we do something like this where we we put little tags, little labels on each of those issues and try and use them for scheduling purposes into each different month as we go forward. We have plenty of opportunity to confirm and reconfirm and we make sure that we have good lineup going forward. And thanks very much for four, three speakers tonight for doing that and jumping in at last minute there as well. So that was really valuable. Thank you very much. If you know where we've got a bunch of social's, we're on Facebook, we're on Twitter and we're on YouTube. You should know about the last. And you've probably seen some of my tweets on Twitter already. If you're if you like that kind of thing, Facebook, it's there as well. I try and mirror most of the posts that I put on both of those. And we've got protests at Dog. That one's just a place to centralize some of the links in some of the things that we have. So, for example, the present link has some information about presentation of facilities and the actual in-person events, as well as some links. The past talks section needs a good update and that one will refer back to our YouTube and the jobs link all jump to straight away. Is it really important to our community where, you know, you can directly get some recommended bits and pieces that's all put together from for market hub issues as well. And so some folks go in there and post a and available open position on our board. It gets tagged with the jobs and opportunities tag and it suddenly appears on our website. So we try and make sure is a call every every month or two as well and make sure they're all current. If you're interested in any of those, please follow up directly. You can comment on there as well. If you've got any questions or if you've got a job to post and you don't show how to get started, please reach out to me. My usual Twitter handle, or you can at Bridge Jass on Twitter or Kevin Vae at Friz Jass dot org is all available. So we've got a few community sponsors now that we're not doing. Giant pizza events. We're also sponsoring Zoome because it's that one essential tool that we're all using these days during our drought covered crisis. Console Connect has been nice enough to provide that. I work for console connect. Sorry. PCCW Global Console connects that product launched in Australia. If you if we weren't aware, it's an debit great with sponsoring a lot of pizza in all our events going forward. So the zaim pressures on them. Thank you very much for us putting our community focus. I know there's probably a whole bunch of other colleagues that are there on the stream at this point. They've got a bunch of working positions still seeking different things like senior and mid JSC developers, Java and Cutline software engineers, systems engineers. So if you're in need of any of those those kinds of roles, please get in touch with me. I'm happy to send you all through. There's also a link that on tiny C that we'll just take you through to their linked in job opportunities page. But they also are they're always interested in starting a dialogue if you need more information. And also another sponsor and I alluded to this earlier, is Wallaby. Wallaby is producing all these really cool software development tools. These productivity tools where you might have heard of Wallaby Jass or Quokka Jass. They go and do things like run your tests interactively in the background and show these these like test results. These highlights in line in your code. It's a really wicked little ability to have in your I.D. and provides that fast feedback loop. So Quokka also does real time evaluation in there as well. So, you know, you add two numbers to variables together. You'll see the results on the side. Things like that. So some really cool little tools. Some folks on the Gold Coast there said, you know, we'd like to help sponsor you guys and give away a licence to one of our tools. So what I've been doing the last few months is putting up a question on our slider. It's under an open pole, if you can answer that question in the free text field. Put on your name and contact email. Then I can get back in touch with you. And if there's multiple winners, I will run a random number generator and pick you out of the lists. Good luck to everyone. I'll post some of those details up in the slideshow soon. Once our speakers get started and I will randomly create the question based on the content front, my speakers say it encourages you to pay attention. So thanks very much to them for sponsoring. And there'll be another one next month. So stay tuned. If you're not aware, tonight's you've come to see Gatsby and TypeScript Blazingly Static by Sarah Smith. And you're also going to see TypeScript and Graph Cual by Aaron Paul. Those are those are two very important speakers tonight without too much further adieu. Just make sure that everything's good to go. Stop sharing now and I will be turning off my Vidia and kicking over to Sarah Smith. Everyone, welcome. Thank you. Thanks to the Internet. Are you happy to be here? Virtually. There's a huge technology extravaganza. May come about the mike software engineer. It set off for tonight's hesitation, surrounded by cameras and lights on his successful studio. So what that's all about, as I'm trying to make it a little bit more attractive for folks to actually listen to these presentations and actually get high points for the handholds sort of due to Hollowell TV present type thing. So if I have any break in my technology, I hope you'll offer me otherwise. Welcome to my journey into a Gatsby. I am not a developer. We had a fight. Try. However, when I need to, obviously I will take on my own personal presence. But I've been wanting to move into that area for some time now. So what do you think I should be taken on right now? It's actually been just my initial ramblings with Gatsby. So if you are someone who is thinking about trying out Gatsby. And wondering what that early phase is going to be like. Hopefully my experiences will sort of illuminate that just a little bit. But I'm definitely not your expert, so I wouldn't say that. Just a sec. All right. And as Kevin said, slide out for questions. I can see you YouTube just have caught my eye there and monitor. But if you have any questions, please, just chucking down into the slot to two answers to the. So that funds are also going to be talking up a lot with you or else to our show. And I wonder what exactly this scenario I'm in right now to actually bring those who are up on screen. So I invite you also to have your phone or your laptop ready to jump on someone else. So there's some interactivity for you. You got to just move on the couch, or at least if you are blogging and eating takeout on the one hand sphere, you're fine. Well. All right. So. It's going to be hard, but I'm just looking at that chart. If anyone out there listening to this right now is currently a user of a web, technology of some sort, some kind of thing that shuts up Web pages on the Internet. I know in my past I've used THP and saw would you please to jump in and check there and just talk a couple of characters to represent what that is? That's like THP or. At any follow with tech firehole. So I'll see if I can get that strong and fast. And think it's some other one, so. Been like Guy Fables, arc engine five months. Doing folks masterpiece by. Well, somebody's life on baseball is dropping hints you. All right. The thing about it is there's a million of these things. We have so many great frameworks and they've been around for like 20 years or longer. I think orses Devlins and programming, we're actually live with families. So how is it that, like, you know, the 90s that was like fifteen years ago. Why was it that we now suddenly need another whips thing? Seriously? We actually need it. Well, I came and looked at Gatsby because even after all these years, I think there is still one big problem solving. What I'm alluding to appear in the style points. I have seen them sort of to play with the toys anyway. So the thing about gets the fun kind of a business standpoint, and that's kind of where I'm going to start with in the beginning of this presentation. I will try to do some light coding later. But the promise of it is you get to do your authoring side, which is presumably a non-technical side in that separate environment which is conducive to authoring I. That's not online tools. But then the development side is to develop a friend. So you've got a stack which is conducive set up so that you're producing a cutting edge. Technolgies progressively attacks over. But in order to have that set up for us developers, we're not necessarily making highly technical experience that the authors then have to wade through. So in a way, the promise of it is that both things applies. More authors can still jump on some kind of system. So that's that's a promise of Gatsby. There's a lot of other explanations that are available about what Gatsby is, why you would want it and so on. So I just want to read that perspective that I had. I've looked at technology diagrams that show me what Gatsby said. It looks like from the architecture point of view and all that stuff. But to me, this is the core idea of Gatsby, the fact that the muse sourcing biographical content. And so I makes him take in. So scary. More. Sorry about this fight. Some people move slides forward. So on this journey, one of the things that pulled me into it was I went to work camp in August 29 to follow suit in Silver Spring, the ones that I took myself in. And. You can see it's a pretty diverse and awesome crowd. These folks have a lot of energy. I was really amazed by people from all walks who develop this freely, mixing with folks who are just there without content. Got to designer sites in the middle who were just building Web sites. So there's a lot of energy and a lot of commerce going on. So people are solving real world problems and delivering value. And as a result, this success to be had both me to your terms delivering a solution, but also for folks who need to make a living out of each photo down on the bottom right there. It's so hard. Hines runs your own virtual assistant business and current skill set is really there for folks who either don't have enough time or they just need somebody to jump onto WordPress for them and click a bunch of buttons. So she's sort of a virtual assistant spice. I know you think as the folks there to pick up the dry cleaning is a lot more technical folks. My. I was really impressed by the business models of people that were around the periphery of WordPress community. So there is people needing value and it's people delivering value, which I think is really promising. And that was one of the things that drew me to it. Like I could potentially be involved with this work. So the key was, how was I going to bring my. I. Mobile experience to this picture? Well. I thought about it and I thought, well, this is what I'll do, is I'll try to build myself my own consulting website and I'll use WordPress to do that. I checked it up, then started putting content as I started creating more and more content. It was a place and every time there was a new thing, I needed an SPG or testimonial thing or abuse or whatever it was. The answer is plugins and plug ins probably saw it honestly. They provided no functionality. What did they get? It's also a problem because you had this whole ecosystem of these plug ins which tend to colonize with Facebook sites. Mrs. . That actually worked. So if you have a phone on you. I'm going to. No. I'm not even going to lie that this is partly a plug for my practice, obviously. What I'm trying to do. But also, if you wouldn't mind, just humor me if you poke fun and try loading up dub dub dub smith soft up. Com. That's a hike, too. Yes. One that and look it up and you. Fine. And just put it look at it like all right. It's a WordPress Web site. So when you go there there's going to be a server somewhere that will run a bunch here. These scripts that will generate a page e-mail document that's gonna be transmitted over the Web to your Web browser and fine and render that page on the page. What is the G graphics? So I'm trying to sort of use low bandwidth graphics that are embedded in there, trying to do a few things right. However. And then when I first this fall was. Well, that's that's what I want. What happened either? Twenty eight percent on Google page speed and size. So if you do have a cell phone out and want to try this at home, grab the you are ill at your place. The Google's for. We will page the sites and hide in the that you are all for the Web site and me and you'll see that on mobile. It's twenty eight out of a hundred. So that's a positive index of five different metrics. One of the worst of those five was tied to interactive 13 seconds. Ouch. So yeah, obviously I wasn't real thrilled about that. What happened? Like, why did it turn out that way? Why? Why did I get a slow, soft, like on its easy process, Technologist's, to look at people's socks and say, oh, you know, let's do this. We do that. But the thing is, like no one who's in business like trying to run their own business. And in my case, I was consulting salaries, working 50, 60 hour weeks on client sites, fighting mobile apps. I outsourced some of the stuff to smartphones to get that done. And I never planned to make a slow Web site. I even tried to do a few things to make it fast. What happened? I got twenty eight percent out of 100, so that's pretty old. It's slightly better on the desktop version of Google's HP. And once inside, there are things you can do. But, you know, I never intended to make a slow site. So one of the points about this that I think is super interesting is while Gatsby is not just about things that excite generator, it's not just about all these architectural claims that you could make for. That's true. It's called Matthew PSUV. So I'm pretty impressed with this one. That's what my open source, everything one. What he was trying to do was to create a system. That had baked in all of the things that you want to do to make real fast websites and actually break them into the actual system of that speech so that it just says Gatsby is like a compiler that takes all the pieces of your Web site and makes the fastest Web site possible. So there's no you are wrong, Eric. You can see that one. That's my his. He is Hublot from such Smith's soft. If you go there, I've put a opens with a project up there. It's just a basic sort of gets the project used for learning. And if you jump onto that, you are I like have dot com slash Smith's soft slash gansky typescript or button just below the top. That read me has a link to that mine page. And I found that. It executed really fast. I found that using it to chain this fast. And I think Matthew's really nailed that idea of having a developer friendly ecosystem for the coding side. And there's absolutely no doubt, because if you take that time. Website. You are all for the actual NECROPHILE site. Both site posting the page and Sock's itself quite a bit faster. And I did at one point get 100 percent. And then I had some content with damn a. But it was some really worthwhile. It's kind of an eye opener. So I sense more time on it. On what I was trying to look to do, really, was see if I could take the elements of this gets stuff and turn it into something that would actually become an offering. So it needed to be sustainable. It was all right for me to create a toy Web site. I'm in the process right now of using some of the sources as it gets in the get to be plugins is it gets source WordPress. So the theory is that, like, you know, if you the stuff. Folks, we have a good Web site online. You have to offer it to you. Something super optimized for your mobile phone using Posthumus market side. You look is your new mobile Web site. And I just pulled all of the content of your WordPress site and given you a fast Web site. And then you know that that could be a business right now in order for that to actually play out like I wanted. What would have to happen is I would need for that process to be sustainable. Tell me about. For me as a software engineer, need to be repeatable. Let me get a pipeline, one set. But most of all, I don't want some virtual slighty software that's made up now for me. That actually means typescript scripts on C++ rather than a really working. It talks managers a lot, but also when I'm doing myself engineering process, what I really want to be able to do is collaborate with other folks. I want to be able to collaborate with customers and ingest designs that are coming in done for me. All of that stuff together needs to have sort of the workflow. So I want to be able to see if that would actually happen with Gatsby. So what I'm going to try to do now, given the issues we have, I can hardly believe that I'm contemplating this. But how do you even if you're listening. I'm about to just walk out to my other account and hopefully we can switch out to that. And I can do a lot of. So the the architecture of Gatsby is really that it's it's a reactive application, so that, of course, means that. Perfect to react applications. That means it's also a node application. So we've got video of me and we've got a screen share. Yep, everything's perfect. By the way, all of this code is on. That getup, you are only right, she had just a short while ago. So if you want to check that out, please feel free to do that. What I thought I'd do. Is just have a look at the sort of work flow that you get. A. One thing we are not trying to assess, which has increased the mindless taxable got a second speaker here. So what I was gonna try to do was I'll just see if I can run this project as it is. I do like how with node and using visual studio code, you get this nice little menu here off the options that are inside of your package Stock J song. So each of these is a is a script from my package stock J something. So each one of these scripts comes up. Here's what I want to run script. I can just. Click it here and inside of my I.D., So some quaintness, integration. Just trying to run this slow, because my laptop is some. Trying to run Zoome and everything else all at once. Writes Finally, Ron. So what Gatsby's doing here is you can see. Currently, it's set up to pull some content out of the content, full content content management system, which is. Sort of, I guess, a competitor way to WordPress, although it's sort of permanently headless. So by default, content doesn't have a. A visualization like that comes with it by default. So this is my graphic. Well. So what's happened here is a. Gatsby instance pulled a whole bunch of data from the rest API on content for all and exposed it to serve running on local host as well as graphics well. So what I would want to do if I was gonna be rendering that content inside of. Here would be to actually create this graph, Kuo query. So I would be trying to fetch a post. So just go through that quickly so you can see what that looks like. So do a tent for. Blog post. And. It's all self documenting. So within a content full blog post, I'd have the. Title. Obviously, you have to select one first. So I'd want to use. Parameters here. Chippy. To. And I think I called one of them Engraft Keywell. So that one has to be equal to. OK. Well, I think I've taken up. Coming up on an hour or so, I'm going to have to call it quits there. Given the technical challenges, I just don't have enough screen real estate, so. All right. What I would suggest, if you want to follow along with what I've done, I would have created a little exercise for myself, and if I had another half an hour, I would go through it and try running this and actually works pretty well. But I'll leave it there for now and hand it back to Kevin so that we've got time for the other speaker and also for questions. So that'll be it for me. Thank you. Let's have a look at what some. What questions may have come in? I was just caught in the middle of putting up our Wallaby G.S. license giveaway. It's just stating, Enteron, that. And fix aren't my typos. One second. We got. Look at audience Q&A questions. I've done such a good job. Nobody's put any questions in. We've got a bit of commentary there on the on the livestream. So I think the general consensus there is that they say, yeah, absolutely. That accessibility has a few problems on those sites. So you need to have accessible names and things like that in your rendered sites. And then static sites are always going to be heaps faster. So like one of the one of the main comments that so, you know, unless you doing really, really small pretape different and things and frightened single single page apps turned by JavaScript, you're still going to end up having a fast initial low time there for your static sites generated through Gatsby. So thanks very much. Yeah. Any final closing comments? Yeah, I think that's right. Obviously Saddiq is going to be faster, but what I didn't realize I think was like WordPress. Obviously we saw some class. Page was actually doing just fine. My presence sitting in my class and being costly by means. Is that because it's not free rein and wound up with this? Huge collection of different JavaScript, CSX files and all fighting with each other for supremacy inside his weight. So even if it is live. When I looked at the Google analysis, this idea was like literally 30 or 40 different JavaScript files that were being served up, almost dozens of different plugins. So, yeah, there's a lot to it. But anyway, I'll I'll hand off now to to Aaron. And thanks for your patience. Thanks for listening. All right. That was great. Thanks so much for presenting and taking us through some of the benefits of Gatsby there. And, you know, if anyone's keen to follow up there, there's plenty of links there on your screen right now. Sarah can help answer some of those questions. And if you do have further questions and you didn't quite know what's lost in the moment, please feel free to add some of that stuff to slide out and we'll circle back around and still be able to have a chat with both our presenters. Thanks again, Sarah. And you know, that's a round of applause from everyone. Thank you very much for that. Sorry about technical challenges. That's right. That happens. This is this is the world we live in. And so I applaud you for trying something new there with the multiple streaming options and all sorts of fancy stuff like. Well done. Cool. So we'll crack straight into this. I will have to. Well, I'm not gonna go back to my slide deck. I'm just going to sorry. And pin that one P in my video. And here we go. All right, everyone. Now, the audience Q&A is is back up and the live polls are open, so if you want to get in on that, will it be jazz lessons? Please do go check out the slider. Aaron. Aaron Powell has been kind enough to jump in there after we had some unavailable speakers this month. Thanks so much for your last minute jump in. And thank you for taking us through, TypeScript and graph QOL tonight. Over to you, Aaron. Sure thing. Let's fire up the screen chair and I'm glad to be your backup singer for the night after everyone else was unable to attend. I assume that's come through because Zoom has vanished and I can't say anything else. So welcome to tonight's Session. We're gonna be just coming off a bit about TypeScript and Gref Cual and more appropriately, like the cogeneration side of things. So, like Sara was talking about that in her session, the fact that TypeScript gives you that tight safety in JavaScript is really exciting for a lot of people that come from that type, say, developing background myself. I came from a dot net background, so I was used to things like C sharp and F sharp, and you don't edits all that. And I like having typed. So JavaScript is obviously a little bit scary or a language without the type system as stringent as I strongly typed language. So that's where I've always graphite gravitated towards TypeScript. Now as I was, introduce myself, manage our own P&L. I work for Microsoft as a developer advocate. I am based in Sydney and I have been doing web development for to say, at least 15 years now. So I remember a time when Netscape was the browser that we were trying to target. So we've come a long way and this is actually all the flights that I've written for tonight was a titled Place Holder Sideway. I thought, I'm going to jump over and do some live coding. I've I've bought the font size and stuff like that. But I know that some people might still be a little bit challenging for you to read and things like that. So I've actually opened up V.S. Live Share on the inside. I'm running. Here's a QR code that allows you to jump into that, if you so desire. That will be up for about 10 more seconds while I quickly navigate across to to where I'm doing all the coding and stuff. But that's it's all gonna be done in Vegas code. And I'll put all the code up on GitHub at the end of the session and ultimata, other links out and tag bridge A.S.A.. Grab ahold of it and have a play around with it as well yourselves. But I said, without further ado, it's straight over to the escape. Now, what I've got here is a really basic application that has some graphic fuel in it. And if I come in through here and let's see, can I can I hide this panel across the top, hide video peddle? Hide floating control. That's better because I couldn't see the top my screen. So this is a really simple graph cual scheme that I have started to write. I as for a it's a trigger application. So I've got a question which has an identify for that question. It's got the actual thing that you gonna be asked. It's got a correct answer and an array of strings, which is the other answers, because it's a multiple choice. And then on the schema I've created to do operations that we can perform against, that we can even get back in question by I.D. or we just get a random question. That's what we've got to find here in our types. And they're exposing those as the typescript as far as the graphical schema to the query is just that type. That's def not defined above. And the backend code or the back in DataStore that I've got here is just that. It's a seamless database called Cosmos Davíð. But the so things like Cosmos to me and how they're run the graphical service of all that they're relevant to, hopefully what you're going to take away from this. Because I just needed somewhere for this stuff to live. And if we have a look at the way that the data is stored, it's slightly different to that model we had. Yeah, we've got an I.D. and we've got a question, but correct answer was got underscoring and incorrect answers has underscores in its ad so they can named a little bit differently. We've got a bunch of other properties which is kind of realistic, like the data model. You've got to represent your application. Might not be the same data model that you're exposing out through your graphical endpoints. And so for that, I want to make sure that we can work together nicely. But let's come back to our schema and let's start generating some typescript definitions for it. So for that, I'm going to use this tool here called graphical co-generation. So it's got a whole bunch of different ways it can generate code. And we're going to look at the back end type of generation. But if we've got time, we might try and get to some react front end. But if you're using view or ANGULAR, they're available. They're using other languages like C Sharp or Java or flow. You can also generate for those as well. That's graphical code generator, dot com. All right. So we're in here. I have a whole bunch of dependencies because you didn't need to sit here and watch me do NPM install and download like 100 gigabytes worth of data. But the most important ones that I have installed are the Coger itself, which is Grauwe Cual Cogen slash Selye. And then I've got a couple other ones that will be using from the code generator. So they will get Nunnally prompted for you to install on the way. But I pre installed them just to save time. So I had to run the coding error. There was a graph. Q Cual code. Genn code. Jan in it. So I want to set up the code generator. This is gonna just give me a bit of an interactive work through work. Step through of what I want to do. You see here, it's prompting like what kind of application are you wanting to generate code for? Well, we're doing a backend API, so we just hit there. Where is our graphical schema? So I can be pointing to an external graphical schema. So it could be running on a server somewhere. Or I can be pointing to a file on this. In this case, it's a file on disk and that's going to be in dot slash graph. QoL slash schema dot. Graph cual. And what do we want it to generate for us? Well, I want to generate some typescript types for me. I want to generate touchup resolvers. So if you're familiar with Gref, you're resolvers is the way that you handle the get all either the query requests and mutation's them subscriptions, etc. I can also get it to like generate things to connect into Mongo DBI if I'm using that or a couple of things that we can see in there. But I just want the touch up to the touch. Resolvers. So where do we want to put it? Are we going to put Intergraph Keywell slash generated dot to us? And finally, do we want to generate introspection fault? So this is gonna give us that sort of documentation until this sentence over that light while we're playing in the graphical playground or if where why? I wanted to expose some API docs that could be useful. So we'll generate those. What do I need the conflict file by default. It's it's code genda Yamal. You can use Jason. I would normally go with Jason because I just detest Yamal. But for simplicity's sake, I'm gonna go with the YAML file. It's also just it's a bit more readable, this conflict file, than the Jason counterparty is. I've done both. And as much as I hate to admit it. Yeah, the T.J.. Jason one isn't as readable as yet. And then finally, do it. Do you want to insert a script to do the Cogen rather than running NPE X every time? And yeah, we will. And we'll call that Jane. Okay, sir. No, you run, npm, install and pull down all the dependencies based of what you need and then you run npm run Genn. So npm run gen while that's running. Let's open up config dot Yamal. Yamal, where are you? Sorry, Codan code. Jen. Yeah, well, we just have a little what? This thing that it built for us. So this is the country, father, the generator for us. See, there's a schema at graphical schema diagram fuel. We've got no property there. I'll talk about that a little bit later. So don't forget those documents properly, but we'll come back to it. And then we've got generates. So this is all the files that we'll get to output. One is Gref dual sush generated up to. Yes. Which is the thing that we really wanted to output. And then we also have our schema, Jason, which is our introspection file. What plugins are we loading? There's a bunch of plugins doing the different languages, whether it's TypeScript or Java or Flow or C sharp. And then we've got some more and more content that we can do on that. So let's have a look, though, at what file was generated. And we have now a massive typescript file here. And if we scroll through it, it it just it's typescript type definitions and they're big and they're a little bit clunky. And you're like, what are they all representing? And the good thing is you don't need to actually read this file because you only come in here when things go wrong and nothing's wrong. It's a live demo. We know that those always go perfectly smoothly. I've started creating a resolvers file here, so it's just got an empty object here. And then it's exporting that and then consuming that. Here in my indexed rates on and creating a graphical server, it's running in Azure functions. But like I said, you could be running this in whatever like an express server or whatever it might be. Now, because this is Tushka, like the resolvers, it's just that it's an object. We don't really know what it represents. So I'm going to say that it's a resolver. And this if we just scroll up LEPs that has imported from careening completely the wrong location and it should've been resolvers. Anyway, we're going to import that from our generated. So now for hover over this, you'll see there's the type definition knows there's a query and it's the query resolver. And it's question because question is the type that we expose. And that's the mapping that we've got. So for the resolver to be complete, we need to implement both a query and a question so we can go control space. And we had Intellisense query Swit. And then what do I need on query? I need get random question and I have a question. Let's say we get random question. Now it's gonna take some arguments. The first argument is the parent of this handle function has being called. The second is any arguments, the main parts to it. And then there's context as the third thing that's there. Now there's no parent. So I'm just gonna underscore that and ignore it. Get Rhen question doesn't actually have anything past either. So I can just kind of ignore that as well. I'm just gonna double on the score because we can't find the variable the same each time. And now I need to go ahead and I'm getting some errors because. Well, and it's not supposed to return a void. This is supposed to return me a question. So you see that it's starting to tell me. Well, no. Like, you've got some invalid code here. And I can look at this and obviously tell that there's gonna be something broken in here. But it's that tips along the way that things might break if you aren't aware of them. So I can consider fixing some of the problems that you've got. I also just scaphoid out a question and this time question is gonna have an I.D. because we get that pass to it. If we have a look back at our schema schema, we'll see that when we use question. We have an idea it has three parts to it and that can't be NuQ. That I so if I have I.D., well, I know the shrink, because that's what I.D. from Grathwohl Maps to in JavaScript is there. Okay, so I could I could return something here and it's an object and it knows that is suppose to be a question object. So we'd have answers as an array and so on and so forth. But I want to actually grab the data out of my back and that's where I remember I forgot to install a dependency. I'm just going to install Azure slash cosmos. Thankfully, it should actually still pretty quickly because I'm pretty sure I had that cased. But I need I need some kind of datastore that I can get this done and download that data from. So I'm going to create a new file. We'll call that data that us. Whoa. They are with it. They stopped halfway through. That's cool. Yes. All right. So here we are. Here is. Yes. Yes. And I carried a snippet for this. If I can remember what it's supposed to be called, which I can't do, dude, cause as I need to go into my stuff, it's in the middle of what I call my own snippets. Dear. Yeah. I was totally going to remember this in, like implementation on the fly was I think that writing code fast because that's well that's how you want to go about it. Cool. Okay. Now, again, the important thing is really that what's happening in the code. So I want to just like quickly get it out there and talk about the specifics of it. So let's have a look at this. Get question by I.D., I think. So we're doing the thing which will get us there, connection to our database. So if using Mongo or whatever might be a back in, that's where you'll be doing here. This is getting me what's called a container. And calls must be from that container. I then provided a query. So I'm just gonna select everything which matched the I.D. that I'm passing in, and then I'm just gonna return the first one out of that because it's a it's really just it's going to return one based off of that. So it should be a slight one. I mean, Crannis DataStore and exposing it's out of here, but I'm gonna want that datastore in every single place that it's used. So, I mean, I could do like import us or from dot slash data if I want store. So I could do it that way. But it's not maybe the easiest from a testability standpoint, because now I've got to make sure that I'm mocking that appropriately at the import level. What I'd really like is to have it passed in. And that's what with graphics. We have context. So I'd like to do DataStore just like that, because context is the third argument to a resolver function in graphic. But this doesn't have a time. It doesn't know anything about this. And this is where L type generator can come to the rescue. So I will come back up to Kijang. We're going to now. I didn't hear config, so I'm going to add some additional configuration to the types that being generated. And here I want context and I'm just gonna have to check my notes to see what it is. I think it is. It's context, type type. And then we give it a path to where that context lives. So that will be in that graph. So it'll be dots. Yeah. Dot slash. Data slash. Yeah. T. S hash context. So what I'm saying is, here's a file that you're going to pull, oh, you're going to find an inside of that file. The note by the hash is it exploded. Touch your type called contacts. Come back to data. We'll say that I've already done that here. Export type contacts. So now back in indexed up to. Yes. Ended up in bed. I can hear now I can do context, and this time I can do DataStore. And we will import that from import. Data stole from data. So if we now npm run Djenne, so regenerate our stuff, I will have an era because. Invalid generates Conti. Oh, so I've got something wrong in by configuration. Excellent. So this is the kind of errors that you can get. That's right. I've put the yellow stuff in the wrong location. Oh, good. I did. You need to specify. No, that's not right. Yes, sir, I know what it needs to be right? What am I doing? There we go. Tab, tab in. Yeah. So it needs to be relative to the file that you want to use this conflict for. I'd forgotten to put it inside of that file. Easy to fix. NPM run. Chip. OK. Cool. So that's generated. We come back in here. We'll see that. We will have some more stuff inside of here. And it looks like that we don't need to have the Dotty's on there. So it's all already determining that. So we could go back and remove it from our Cogen. So don't need that anymore. We'll rerun it, come back into resolvers. And now for Hover Over DataStore, it's strongly typed. Excellent. So I can return DataStore Dot, get questioned by I.D. and we passing that I.D.. So now this one here. The question is, is working successfully cause that exists. But I haven't done the random question, so maybe we'll go and implement that just quickly. So popped out. Here we go. Random. Go. We don't need that for the moment. We'll come back and then return DataStore. OK. Get. Though I did write a code debate for this, I think, because I want to actually make it properly random, not just what I have there. And let's see. Maybe I didn't. OK, good. So we're going to do data as we want. So we'll make this amazing function because it's an asynchronous operation to get data from our database concert. Questions equals data. A weight data store. OK, get. Questions. So just get back all the questions and then we'll return questions. And then the index master. Floor master. Random star. Questions dot. Length. Plus one. What length correctly? Okay, cool. Um, boobs plus one. There we go. All right. So that's just going to randomly select a question out of there and return that. Well, that should all be working. So let's launch this up in a browser. And give it a moment's as it just starts up all the various Web servers behind the scenes. Fun, no, I'm actually doing this using GitHub code spaces as well. So I'm actually not running anything on my machine. I've only just started playing with GitHub code spaces. And it is so cool, like the fact that I literally have nothing installed on my machine that's running this code except for Visual Studio Code. And then it's just connected remotely into that. Yeah, it's. Black magic is the only way that I can describe it, because I just I don't like how like how this works. Yeah, it's it's pretty cool. So we'll refresh the playground because I had it up earlier, just as I was testing to make sure it was still working. Let's see. Are we there yet? Should be up and running in a moment. Check the port. Yep. There we go. Loading up our playground. Fantastic. So I should be able to go create a new query and we'll get a random question and we just grab the question answers and the correct answer. Executes. Now, unsurprisingly, this has exploded because it's a live demo. We'd always expect something to go wrong. In actual fact, what's happened is that it's saying, well, you can't return now from a non knowable field because I've said that the answers field on question. Come back to our schema schema. Answers is a non knowable array of unknowable strings. I've tried to do nothing, which does make sense because I have answers in my database. But if we remember, our database has things like underscores in them. So the way that is represented is not actually the same. Now, that's where you really want to work out how you can map better to your data stored in your back and and your and what your front is expecting to expose. We can do that again using our code generator. I'm going to come back up into our data and I'm going to inject a new type of question model. This is a new type of hip type that will represent what is this thing about database? I.D. a question category. Incorrect answer except for et cetera. And I'm going to say that when we do a query here, instead of returning back just in any which apparently does, I want to return a question. But to do that there. And we'll do it down at the get old questions as well. Cool. Oh. But now there's a very quick flash of an era. Come back up to resolvers. Resolvers is now saying quite a long, rapt, complex error message. But the crux of what that error message is that is saying is that this question model here or you're trying to return and is is of a question model. It doesn't map through to the type that's expecting return. The type is question. So what we need to do is we need to be able to tell our query that the queries are going to return something from our database. But the resolvers are going to the not that somehow into another type. To do that, I'm going to update my code, Genk, and I'm going to change the model that is used for how our data matter. So for that, I'm going to add a new config option here, which is mappers. And then on nappers, we give it the name of the type. So question. So that's the schema type is going to map to that question is going to map to. Is it dot slash data slash hash question model. So we'll save that and we'll need to open up a new terminal to come and do that generation, so do NPM run gen. Okay, well, give that a moment to update the code generator. Excellent. And if we copy to add generated now, we'll see that central question model. We'll see how it's used up here. It's imported. If we scroll a bit further down, we'll see that the resolver actually exposes a question that receives a question model rather than receiving a question like out, out. As the expected return type. So what that means is that this is working correctly now. Our query is now returning the tie we expect. But instead, we want to add a new question resolver. So how do we map that data model that's on our server to the model, on our client? Now, thankfully, we've got a couple of properties of the same idea question, et cetera. But it's really like it's answers. I need to work out how to do the answers differently. Well, we're going to we're going to create a function here. It receives an argument, which is the question model. And then here we return. Return. Question Dot. Incorrect answers, so it understands our model that we have in our database and then we're just going to kick cat question dot. Actually, as an array question dot. Correct answer. Now, look, you probably ought to do something with randomise that so you don't always have. The last answer is the correct one, but I'm just gonna be lazy here and then we can do things for correct answer, which will be question and we will now map return. Question dot. Correct answer. As the returns for that. So we'll save. Come back to our Gref Cual playground here. It execute the service, just rebuilding everything in the background. And at that, we successfully updated our mapping to return what we're expecting to return. And we've now got it fully, strongly typed. Everything from the code we're running in our data access layer to the way that we're mapping that through to what our queries are expecting. And the way that our queries are working. Without that, our access layer. And it's all just type script type generated behind the scenes. Now, I actually have no idea how long I've been going for because I forgot to start my countdown clock. So can Filtrated just be like, cut, cut, cut. You're all good. You're all good. You're on time. That's no problem. Go. I like because I can I can go all night talking about this sort of stuff. I like this is just it's it's so quick and easy to get this stuff up and running and included into an existing project. So that's how we can work with these questions and answers and stuff like that. There's more things that we can do with our outdated generation. So. You'll notice that with the resolver. I haven't had to map all of the fields. I only met the ones that I wanted. And if we have a look at that, it's because it's got an an optional type. So it's got the question mark on the back of that. So you don't have to define a mapping for questions. And you don't have to define a mapping for the fields of those questions. But you can override that in the Cogen as well. If we wanted to add a new config, we can do avoid options. So if you like me and you like to make sure that everything is explicitly done, we can set that to false. Avoid optional. Sorry. It's a true. By default, it's false. And then we do npm. It's NPM. Run it. And what we'll find is that the resolvers, once it picks everything up, it will start saying, oh, hang on a sec. You're you're not like putting all of the fields that you need are along the way. Option ls optional is not options optional. Looking at it, it's a void. Avoid optional. That's what we want there. Run the generator and then that should pop up an error at any moment. But I'm going to leave that off just for the sake of the demo because otherwise it can get by. We'll get errors kind of popping up left, right and center. Yeah, we've talked about how we can do data that's that's going out to the query operations. What if we wanted to do a mutation operation? For that, I'll come back to my schema. And we don't just trumpet job in a new tracking code. And I'm going to create a mutation, which is answer questions so I can answer the questions. Come back in the survey. Sorry. In our quiz, I forgot I'm in need to provide an I.D. for the question I want to answer. And then the answer and the answer. I'm going to leave as a nullable string because if you don't have an answer, then you still can submit that as not as a non answer. And it's going to return me and you type here code answer. Now we need to add that to our schema. So do mutation outwards mutation. Rotation, the rotation on comma mutation. There we are. I shouldn't have called my stupid mutation because it's just gonna order complete and inject everything everywhere. So we had a MPM ran gen. That will now generate me some new stuff. And if I hover over my resolve, the type will say it has a mutation in here. We just have and some model so that I can do the mapping for the answer as well. If I so desire and form mutation and mutation and then answer question. So the parent again, I'm not going to need the parents that that would be useful if you've particularly when we're doing like this, resolving how a question is resolved. I if I needed to go back out to the context, I could get the context also injected to this here so I could do like an additional database call if Naseby answer is going to have an answer. Passed in and then night datastore. If I was doing the right operation, but we're not actually done. I am gonna need the dinosaur. I need to know what question it is. And that will be again and I think function. And we'll contest the question. Oh, wait. DataStore, get questioned by I.D.. Grab that I.D. and then we'll return an object which has the question I.D., which is I.D. the answer the correct. Answer, which will be question dot. Correct, answer the submitted answer. So you can see what one you picked out of that. That will be answer. And then did you get it correct? Well, that will be whether or not question dot correct answer is the same as the answer you submitted. Because if you didn't case it correctly either, well, then that's your own fault. And it should. Should what. Okay. So I've got an error that's happening there. I think I might be missing a field. I forgot to add. Question. Question. I'm just so that you could. So you can see the question, the answer and the kind of all the responses as well. You don't have do multiple hops or have case data locally. So there we go. That's all running now. Let's grab a NUAN and we'll do a mutation. Submit, answer and submit answer I.D. of three. I know the I.D. of some action. Let's use this question here. What does C.P.U stand for? No, I don't have the idea of that one. Kathy, a new question. Let's find out. Let's go to a question I can answer. Well, I just I like keeping it. And like, oh, that's right. I expanded that. Normally I do this with just. There we go. I can I can tell the answer. This one. What does 80 stand for on the Windows operating system? I normally just do this with the with computing questions, but I've expanded my the data model to have video game questions in there and I'm not that much of a gamer. And the questions are all provided by open trivia database. If anyone's wondering why I didn't actually come up with a hundred questions that open open TDB dot com has a great set of questions that you can use for, and I find it really good for Derrius. Okay, so the idea of one and then we'll pick an answer for that. So I do a one. Then the answer will be, well OK. So what would happen if we submitted. No answer. Good question. Answer. Correct answer. Yes. Answer. Correct answer. And correct. Now did I get it correct by not providing an answer? The field is not what I call my mutation. Schema. No, it's like antique equipment to answer questions. Answer questions. That's an enema mutation cannot query a field answer on type answer. That's because it is submitted at sir. OK. So surprisingly, I got that question incorrect because I didn't say that it was active directory. That's what 80 stands for. And therefore provide the correct answer. We get the correct and we get it set properly. So that's all right. All done. Again, this is all type safe through through the stack, but this is just a seven point at the moment. What if I wanted to put this into the client and we can start doing this with react? So the last one we're going to do is we're going to add a new bit to our schema. And what did I call this? React. No country that I called. No man. Go to the effort of writing snippets and it's called react, react, and then you forget what they actually represent. Dammit, Nevilles that don't work. I'm just going to have to copy and paste all these lines. Disappointing, perhaps. And we have one last try. Reacts tab. No control space. Come on. Okay, fine. We'll copy and paste. Ju you do. Okay, so if we want to do cogeneration for react, let's just delete some of this stuff. So it's a little bit easier. So we are going to need plug ins and it's going to use some of the same stuff so we can use the tax free plug in. We're going to use the touch shift operations volume, which we have for generating operations. There's chat. I should actually open the chad. Let's let it go. Okay, good. Oh, good. We still seem to be on time, but now I can actually see that. So I know when I'm getting in trouble for being over time. That are just like everyone leaves YouTube either either. Let me get all these a perfect number of things in place. If we can wrap it up within a couple of minutes would be fun. I just want to let you be able to finish this thought and stuff and make sure that everyone gets that cool. I would just do a really quick generation of the toucher start also the react stuff. We want to have time to implement it. But I'll put that in the sample that I publish out at the end. Brilliant. So with this, I've added a new file that's gonna be output. This one, I'm gonna walk up from the current location and into the source folder because this is a create racked up that's going to sit here and there's the I say folder and generated dot tsx. So a typescript react folder, react file release typescript and tortured operation. So operation is gonna pull out the the appropriate files from the. I did like that mutation that I just did in the background and then I'm gonna use it to generate the react Apollo stuff as well. So I'm using Apollo as the way to do react communication. So it's gonna generate some of that sort of stuff. But because it will take a little bit to finish this off, let's go back to the parent directory. Check out actually that Skeets Dash. Check out Star. Let's just blow everything away and get checked out. Let's see. No. Get branches. Ranch's. Get branch, get branch, get zero. Check out complete. It clean, do all that good. Check out. Complete so all the work. Add in the stuff they wanted. Realized that I didn't have a safe point where I thought I had Ango Lipsey. So I hadn't actually completed I had actually committed with the right code. Fantastic. Anyway. Oh, I'll finish that off. Off stream and we'll publish that up. But. Here's one I prepared earlier. What you'll end up with is some code such as this for another project that I've got that works with like it's an online store using react as the back end. And if I can find the right file. Maybe, maybe not. No, I probably can't find the right file. And where we're digressing anyway, the point is it generates you react hawks higher order components or class components, depending on what style of reactor you want to work with. And then that will be again, it's just strongly typed. And if using Hauck's, then you just use them the same way as you would use any other Hooke's provided with the connection to your graphical back end. And then it's a gives you a really nice, seamless integration with with the way that you would be querying your back end. It's strongly typed, based off with your schema and based off of the of the operation. So your queries or your mutations are used descriptions that you have previously to fight. But that kind of brings us to the end of the time that I've got. Thank you for having me. Those are my various social media handles, my Web site, email address, if you want to shoot any questions off stream and. And see if I can answer them. And feel free to pay me. I also have I actually have done a Twitter stream about this topic in particular using React and Graf Cual and TypeScript. But I scream every Friday and at the moment I'm doing a bunch of stuff around Cervalis and Web assembly and on it. So yeah, feel free to join in. If Twitch is your thing. But thanks for having me on. Sorry I didn't get to the last bit of the demo, but I'll make sure that the repo is completed before I push it. And next time I will just do like a dummy beat rather than blow it all away and just hope that I backed by stuff up. No problem. Thank you so much. We've got a bunch of questions. We'll get through shock through oldest first. I think they're not in order. Call her. I'll go off. The first one that I found is the graph QOL code generator. Only for TypeScript was the question. So you can generate TypeScript Flow, Java and C Sharp. Those are the ones that they've provided. The way that it's designed and based on what they do is they generate a syntax tree of the of the graph. Well, for you. And then if you wanted to write your own like plugins, you can totally do that. They'd have to be written in JavaScript to generate them whatever language you wanted. So if you wanted them in my Python or HP or whatever my be, yeah. You just have to write the appropriate amount of JavaScript plugin that will turn the syntax tree of Graph Cual into the desired language. But yet they have four out of the box if you want to do that. Cool. One other one was this one specific to some of the kind you had there. Why are the incorrect answers a concatenation of the answers? Can you briefly explain how this maps? That was just for sheer laziness with inside the debris. Because I wanted to return an array of answers. I was just thinking. I think so. Incorrect answers is an array. Correct answers is a single string. So I just turned them into a an array. And then normally I just want like a solid function over that. That would randomly solve them so that it's not always the last answer. That is the correct answer because that makes it a little bit too easy for pub trivia. Makes sense. Take that one off. We got where do we follow up on line about the React book generation. So the best place to go would be to the graphical code generator website to graphical girl code generator dot com that has the Ive's all the documentation behind it. It's actually really, really well documented how you could set everything up. And like I said, I will make sure that I complete out this demo and push it up with an example of how to do that. I can also share a another project that I've done this before on it, as I see. So I did a twitch stream where I did it without co-generation. And then a bunch of people said, well, you talked about Cogen but didn't do it. So I then followed up the next week with co-generation. So I also tweet out the links to both of those videos on on YouTube where they backed up, too. So you can see how you can actually add co-generation to an existing project, not just. So you don't have to start with it. And what I found was when I added it, I actually had some stuff wrong in the way that I'd implemented my schema in the resolvers. Hmm. Cool. Yeah, the first. Sorry. The last one here was from Alan Lima. You are using just one file for resolver and it can become huge. What would be the best way to split resolvers in multiple files? So the way that I would normally tackle resolvers again be whether this is just cards that I've written for a demo and I want to minimize like context watching a stuff like that, I would normally put either the the nodes with inside the resolver. So I question answer a query and mutation's subscription and any other times I would move them off to a separate file individually. If then the functions themselves were starting to get too big. Maybe you pull the functions out to a separate file again, but I try and keep the X resolver function itself pretty small. It's just a shim between some sort of a back end. In this case, I just had that data still that I'd created and then the mappings that I need to do to return that into the UI consumer. But you add the other projects that I've done with this, I've always pulled the result was out to separate files. So the top of my file a B import, I query resolver, mutation, resolvers, etc. and then query and inside the object it's like query colon queries always, which is the result of that import. Mm hmm. Awesome. Thanks very much. If you've taken us through a journey and it's great to see these tools, are there do we want to help speed up our or our ability to generate pretty much entire apps, a bio demo that. Yeah, so yeah, it's real exciting stuff. And hopefully we'll be able to get some more questions to Off-line and through the stream and some of the other questions that were posted there and on Twitter and the rest of it. So that'd be good. Same with Sara. That'd be great to be able to get some more questions to everyone. So thank you very much. That's awesome. And just a reminder to everyone that while Wallaby. S licence question was in Sarah Smith's presentation on Gatsby. How was content populated into a build the source and the technology. And if you leave your name and email, you can go and score yourself a licence. So please do that. I'll leave that open for the rest of this evening. And thank you very much. And hi, Sarah. You're still on stream. Thank you for staying with us. Cool. All right. Now, I will just very quickly finish up by showing my last slide to that. Everyone has the links to be able to follow up on everything. Excuse me for a sec. Sharing screen. There we go. There's all the details if you want to be able to follow up with us. Please do consider sharing a talk for next month. It'd be fantastic to be able to get to get everyone's input on something that you're keen and you're interested in. If you've got particular suggestions, like you say, I've I've always wanted somebody to talk about this particular thing. Perhaps you could also leave us that you can make an issue about a talk request rather than a talk volunteering. Please do let us know if you if you have something like that and feel free to reach out on all any of the socials as well and make sure you stay in touch with process for next month. I've been Kevin Bacon. I hope you can join us next month. And thank you to Sarah and Aaron for hopefully see some more contributions to them and then some of the coming months. An hour. And we had a couple of ideas rattling around there. So thank you very much for contributing both those two topics. And I get up and I'll sign off. Everyone, thank you very much. And we'll see you next month.