 Hi everyone, it's my first speaking event ever. I've never done public speaking before, so I'm nervous as hell. I will talk faster the more nervous I get, so I apologize for that in advance. So I've been over at Technicrack for the last sort of six months, and this has just been a little passion project of mine on the side, so I thought I'd come and share it, and hopefully somebody gets some value out of it. So I've been sort of around agency land for about 15 years, and spent a lot of that time in Melbourne, so I'm sort of down there. In Melbourne, come to the Melbourne Meetup, say hi. And we'll get started. So this isn't a code dive on GraphQL. I mean, Adam did that yesterday. I don't need to show you the code. I don't think that's what this talk is about. My talk is mainly about, like, how do we build GraphQL schemas, how do we build them quickly, and how do we build them for front-end developers, or how do you get your front-end developers to build their own GraphQL API without having to dig into all the code? So hopefully by the end of this talk, which is, I'm going to say, 65% live demo. We'll have a schema at the end of it. I thought I might just put this slide up front. You might not need GraphQL. If you've got an established Dribble website, just use JSON API. It's there. Your Dribble is in a box, and you've got what you need. If you're transitioning from a coupled to a decoupled site as well, and you've got pre-established Dribble architecture, just use JSON API, use REST, use whatever's comfortable. But if you're going full headless, then this is an option for you. But I just want to get the preconception out of the way of it. You don't need to use GraphQL. I'm not trying to sell or push GraphQL. I'm just saying it's an option, and use what you want. Take what you can from this talk. Sorry, stay close to the mic if you can. So I thought I'd just start out with the regular introduction of what is GraphQL. Well, GraphQL is typed query language, typed to give you structure and definition, meaning, enabling you to create reusable fragments of code, and reuse that to describe your objects and reduce errors, and it's just nice having typed. If you're a PHP 5 dev, types mean nothing to you, and this maybe isn't the talk for you. But if you're working with TypeScript or you're working with PHP 7 or you're working with Dribble in general at the moment, then you've got a lot of types, and this could help. Two, what is GraphQL? It's easy to use. Developers know where to get their data. It's all in one endpoint. It has introspection, which allows you at the time of development to look at what you're building. So you can use tools like the GraphQL, which is built into the GraphQL module. It's built into other tools like Postman. So they can go and fetch your scheme before you and get all the complete happening. There's extensions for PHP, Storm, VS Code. There's cool stuff out there. It's really easy to use. There's a little bit of how easy it is to use. And then three, it doesn't overshare, so you chase APIs and you rest APIs. They just return too much data, and Adam went into that a little bit yesterday. That's kind of like, if I ask for A, B, and C, I get A, B, and C back. I don't get vomit of data on the screen. I just get what I want. You get it all in one request and you get exactly it. So that's kind of the A, Bs and Cs. About four years ago, Dries put up a blog post weighing up the differences between GraphQL, JSON API, REST, and evaluating each one of their positives and pros and cons and that kind of thing. He kind of landed on, well, JSON API is the thing that suits Drupal the most. And if you are building Drupal, like a headless Drupal, just use JSON API. That comes back to my previous points. Way up what works for you. I did leave a nice little sort of statement in there. There's some cases where GraphQL is a great fit. So what are some of those cases? I like to think microsites. You can build a decoupled platform, agnostic sort of front-ends. If you have complex data that requires flexible queries and mutations and you want to minimize over-fetching and under-fetching, then GraphQL may be a good fit if you've got campaign sites. So Jacob Rockowitz also wrote a blog about this in recent months. He's the guy behind Webform and schema or blueprints. And the full quotes sort of is along the lines of my mistake when approaching GraphQL was starting with the Drupal GraphQL module, looking at how to implement the backend API, which is a bit complex. He should have first looked at how easy it is to use. So that's a great quote for him. Also a terrible photo. So how do we make it easier to use? Well, as Ursula Varus about six months to a year ago started building GraphQL Compose, which took over the version 3's built-in schema generation stuff. And then I came on about six months ago to help write a patch and then end up rewriting it. So that's the Drupal community. And so now we've got like a version 2 beta out, which only really works with PHP 8.1 and Drupal 10, because I just don't want to support all the way back. But here we go. So it's time for live demos. So I want to sort of just start off with the GraphQL Compose. We'll go from there. We'll build a schema. I'll show you how to query the data. In fact, I've got slides explaining what I'm doing. So we're going to add some entities, add some fields, use the voyages that have had a look around. What is GraphQL? Like how can I use it? How can I get going quickly? We're going to then make some queries and fragments and some routes. And like if I've got time, because this is going, time is going quicker than I thought. Get in, like this is all trees, by the way. I just mid-journey AI is fantastic. I just said make him look like a frontman for a 90's hair metal band. So there you go. Get into GenQL. GenQL is cool. So GenQL can create TypeScript script from your schema. So you basically plug your URL endpoint in and it gives you back just functional JavaScript which you can go and build cool stuff. So if you get a chance and if I don't get to it, GenQL.dev, excellent tool. So I think we're now going to go into my demo mode. I apologize in advance. Screen mirroring setting. Okay. I have a thing. So I've got a basic sort of page here and I've gone in and I've set up in GraphQL, GraphQL Compose. I've just sort of got a couple of the modules installed. So we've got Compose module and you can start there. So if I go to web services, GraphQL, that one GraphQL Compose settings. Okay, cool. So we have a basic page. I want to enable GraphQL. I want to load that with a single query. I want to turn on the body fields. Let's say I want to enable images. Now images is a media field. So I need to enable the media entity across the image. And that on enabled query. I don't need to have an image. Save configuration. Go back to my shortcuts. We built this just by clicking those boxes. So we have a node page query where we're going to ask for something. It's going to return a type of node page. A node page has body. Body has text summary. Text summary has process. Header image has a media. Media can be a type of image. Image has image. Image is image stuff. So we've got our type data. We've got a union sort of tying our entity types together and we can start to explore that data. So if I go to home. I've got a content page. It's going to copy this UID there and go back to... I actually used the shortcuts module. How about that? Voyager Explorer. Okay. Here we are. So in the right hand side I've got this little query box thing. You can see that. You can use this to sort of explore what we've built as well. So we can go into query. We see node pages. Node pages takes an ID. Node page will return node page. That returns body. Body text summary. So it sort of mirrors that voyager. We're going to go in here. All right. Node page. ID. That. All right. Don't refresh. Come on, nerds. Okay. We've got a title. We exposed our image. So we have media. We're going to hit image. Inside that was a media image. And then we had image. All right. Cool. So that's the beginnings of building a data set. So now we're like, all right, cool. I'm not going to remember all these UIDs. That's impossible. If I wanted to build a small app, it's a one-page thing. So it was like a hospital landing page or a charity fundraising page. And you only needed one thing. And you're going to build a completely separate front end. And you knew that that was the data API. And you knew you had your data model. Then you could just do that. That would be fine. But most of you are going to want to build things with menus and routes. So we can go and just enable them. Okay. Well. So we've got menus, routes. I'll just turn those on. We'll get going. Structure. So we'll go back to the shortcuts. We'll take a look at Voyager and just see if anything new has come in. So now we have a menu query, which will return items. Items are a menu item. A menu item has children, which could be a menu item. So it's nice to see. So click all. Click all. Yeah. Think. Inside that we have a route. A route can have a type of thing, an internal, an external, or a redirect. An internal item has an entity type. An entity type. An entity type. Unsupported because we haven't enabled anything. So let's go back to GraphQL Compose. Check some boxes. Enable loading by route. Right. Back to our Voyager. Now we see route entity union returns. Page. We're back. So we don't need to have this noodle. We'll take some noodles away. I'll just skip past that though. Or just keep going. So what I'll show you here is this little explorer. We can use this to speed things up. I'm going to have a route. A route path is going to be at the home page. On a route entity internal, I want the entity. I want the node page. I want the body. I want the processed value. I want the header image. I want the media image. I want the ID name image. Whatever. Ural title. Things. Got that. So that's schema is now building. And you can start to see a sort of pattern there. It's we enable a module. It has a checkbox. You click the checkbox. Your Voyager shows you more noodles and spaghetti. It gets nice and it just gets bigger. There's more stuff you enable. So if we enable more kinds of media. In fact, we'll go to demo 2 now. And we'll build a little slight content model. How am I going for time? Okay. Okay. So in this one, I've done basically the same thing. It's just picked up where that one left off. But I have paragraphs. So paragraphs have a type image and a type text. So we'll go turn those on. Short cuts, graph, you can pose. Paragraphs are cool. I have an image type image. I've already enabled this. Image and image. So if we take a look at our Voyager, we start to get. Okay. Route internal goes to node page. Node page has a type content. That's a type paragraph. So we have an entity reference paragraph union. Paragraph union returns image. We're back. So if I go to the explorer. We started that. We just added these bits. So we've got content. Type name. On paragraph text. Get this. On paragraph image. Get that. There you go. So that's now using paragraphs to pull your content model in. If we go to the next sort of extreme on that. I'll show you something different. So this is GenQL. I think I've got enough time. I've got it here in a little Lando file, but basically we're just going to run GenQL so it pointed at the thing that we just created and now put it into the dribble folder. I've already run that because live demos start with these kind of things. So that's created in one command. Schema in TypeScript. So when you're building. And this can be used in GraphQL. Sorry, this can be used in React and Vue and whatever you want, whatever your flavor is. It comes with some little handy utilities. And without going into too much detail. We kind of build up query like this. So it becomes on route internal. That's your sort of fragments of some sort. I guess you're saying on that type of thing. We're going to get your type name, the entity and the node page and then in we go. So we get these tools that come out of it as well. So on is route internal, is node page. This is going to TypeScript that into a type route content. Anyway, I'll just see if this runs. Lando. Yeah, let's run. Cool. Anyway, so that's the TypeScript stuff. So then extreme sort of variations of this. I have two demos. I've got GraphQL Drupal boilerplate, which is my boilerplate. Drupal boilerplate. Yeah, cool. I've broken it. It still works though, sweet. Oh, wow. Anyway, so this has node page. Node page has paragraph union, which is going in weird stuff. We have a whole bunch of different paragraph types and we've just got noodles everywhere, right? But if we take a look at it, it's pretty much just paragraph types. And we have accordions, blocks, media, quotes, sections, tables, whatever. So in the content, if I go to edit this home page, this is just using layout paragraphs. So I have a paragraph type of section. Inside that I have things and then inside those things are paragraph. So on the side of this local post, is little view app. This is decoupled using the GraphQL and if I drag that across, yeah, hit save. Refresh this bad boy. There you go, it's down there. So this is now using Planeo, GenQL, GraphQL and you can rebuild and restructure all that information out of that. So this is on my GitHub that's available. I mean, I'll put up a slide in a sec with the links to that. But if you've got Lando, you can go Lando start and that'll give you a full working demo of this content model. And then you go Lando dev in front end and then I've got sort of a bootstrap, you sort of, you know, GraphQL build going for you. And I think if I go back to this slide, I just want to kind of leave on this note that with GraphQL you can create data that's predictable and you can sort of reduce errors other than the giant error that you saw on my screen, which was PHP. You can reduce errors, you can make it easier to maintain scale applications over time, but the point that the GraphQL can pose was to get GraphQL schemas quickly and give that to developers quickly without having to write any code. So in that time I built a schema that was usable by front-end dev. They can use the tools like Voyager and Explorer to go and just use the documentation built into the API and get going. And there's a whole bunch of, part of the great thing about GraphQL is the ecosystem around it. It is vibrant, it has a lot of tools. It integrates well with things and front-end devs want to use it as opposed to GraphQL, which is, sorry, as opposed to JSON API, which can just be a confusing, overwhelming thing. So at that is, there's two libraries or two packages in there somewhere and you know, you can get going. Thank you. Questions? If all questions? I can't see anything. Those two lights are really good. No questions? That's good. Go download it. I don't know. And help me get through the issue queue. I'm trying to get security clearance, but I keep getting knocked back. I may have missed it, so I'm going to ask, but can you build a view and then use GraphQL Compose to expose that view? So there's a whole bunch of extra modules in there that I didn't go through because I don't have time. But it's got views integration, so if you're going to build something in Search API, it's got that. I've done one mutation into the comment module, but at the end of the day, this is a read-only library. Well, it's a 98% read-only library. If you're doing mutations and that kind of stuff in GraphQL, I feel like that's business logic for your business and you should be writing those things. Or, you know, use the amazing stuff that's already there. Use REST and JSON API shortcut. Just use that service to post the data. I don't know. It's there for the read-only sort of side things. So yes, there is views integration. That works with contextual filters because I've got the view field, so you can embed a view field in an entity and then you can get the context out of the view field to do a sub-request. So, yeah, contextual filters work and filters work, so you could build a whole bunch of stuff. All right, thanks.