How to use Nuxt 3 with Hygraph and GraphQL

this is Tim from hgraph and as you can see I come to you fully branded today but it's a hgraph video so we can make this work right so in our last video we looked at to how to add any rest Source into hgraph so we added def. two blog post as a remote Source into hgraph and you can then query it either from a Content schema in the CMS or you could just query the graphql globally and get all your deathto two data through hgraph well in this video I want to actually show you how you actually query it put it in the code and get it on the screen and so I'm using Nu 3 for this example because it's my personal website but don't worry if you don't use nu but you use nexx or Astro or anything else there will be other videos in this series that show off different Frameworks all right let's go into the browser so we can have a look at what we are working with today so as you can see here I have my query already set up and it's looking at my username how many items I want per page and then also a collection ID that's something that d.2 has you can make different collections that are series and in this case these are just my work blog posts and for these items I get a whole bunch of things back we saw this in our previous video so actually have a link in the description or one of the cards up here to watch that video so now that we know that this exists let's actually have a look at our code and so this is an outof thebox nux 3 setup with a few modules added so there's nothing super fancy going on what we need to especially look at is this so this is the next graphql client let me just zoom that in for you uh like this and um this does a whole bunch of lovely code generation magic typescript magic there's not that much you have to now add yourself for graphic to just work out of the box this is really an excellent module and so the way it works I don't have any options here as you can see so I just have an environment variable to my graphql hosts which goes to my high graph fast performance endpoint and other than that what you can do is you can actually make a queries folder and I inside queries here I have articles. graphql and this is kind of all you need for this module that when you start running n it looks at this it does introspection of your endpoint off high graph and it makes functions for you code gen typescript lots of fun stuff and so as you can see this is a very similar query to the one we just saw on the browser right so we have the username per page collection ID here they variables of course and then whatever we want to get back and this is the beauty when I now hit start and run Nu which is currently is doing you can actually go into the Nu folder and you see there's this graphql folder here now and so inside it actually created a bunch of types right the Articles query the article iCal query variables our username per page and collection ID and then when you actually look here it actually made a module for nug that exports my functions graphql articles when I fire this function with the right parameters it will do the query for me and there's nothing else for me to do this is just awesome and magical so um let's go to the article page here and so I've started by doing something relatively basic so this is not the cleanest code we'll get there in a sec this is just to show you how you could do it and so from that graphql module that we just saw we can just grab our variables types and then make some options right so these are the query variables we want to query with and then you have your graphql articles function that completely understands what it needs to get and it just returns whatever we need so this is the lovely thing about KN and modules that the complicated stuff is kind of abstract it away and you as a developer can just run with it but it's open enough that if you want to break this open you can however for this video we won't because this is just so simple and it works so incredibly well so we have our articles that come back from this article collection articles right so article collection articles and then we have all our stuff and so I just made a little um list here and this list is just using some Tailwind to make that work and so we loop with the lii of the list item over the articles that we got and then we check do I have the title well let's render a title do I have the link well let's render the link and so there's a few things here um that you would do normally in fugs to make this work and so let's have a look at what that looks like go back to the browser here and then this is what we just got and of course that link going to my death two article and you can see here I'm work collection these are the 18 boasts I have in my work collection and that's what this is showing us now other than that it's only showing 10 because that's what I asked for all right so this is what we have now so this is relatively simple you don't have to do that much magic other than just queering it and firing this function and this does all your n three caching with use Asing data and all the fun stuff you don't need to do that much here it just works so let's see how it can actually look slightly cleaner so let's remove this one cuz I did a few things on my own side to make this easier to work with so I made a component called articles list and let's well when you refresh now you see it's a little bit more Rich it has a few more things guess that's what I wanted I wanted to date and this design and there's like work articles and the C all link will actually go to this def. two and so let's have a look at what this articles list actually does I go to components articles list so it has a bu bunch of props right because I might want to show how many P page do I want in this list do I need a title for the list do I need to show more like there's a whole bunch of things that are just normal few related things however the props for username and per page in collection ID coming in you can see those here per page username collection ID in this type it's 20 as you can see and then what I've done is I made another composable myself um that makes this thing a little bit cleaner to look at right I want to get articles and you know give me the Articles query with the options I'm giving it now there's nothing else I do here and the rest is just you know rendering the list and I have an article card and that card itself render some stuff with a date that makes it more fancy and just it does you know um lazy loading images this is just relatively simple HTML here but where the magic is is actually this one one uh where were we not article card but in article list we have this extra composable so let's have a look at that so I have a used graphql query composable and in this one I know all the queries I have because I literally wrote them here in this folder right and I get all the types for the variables and this thing can get page talks videos and articles and it has a bunch of different property types as well and so I kind of just wrap this in a super simple if and so if it's articles do this you know query articles with the proper variables and get the stuff back that I sent into it but the lovely thing is here I just make a data prop that kind of traverses into the array so I don't have to do that in the front end of my code so all the you know the smartness of how you query things just happens here so if I were to write unit test which I likely will I have to do that here that's it and then so my articles list is super simple I just add some props to this thing and run with it so this is the next way or there's a few ways of course in next but this is such a simple and elegant way um this is great this way to to call High graph because when you have a look at like there's articles there's Pages there's a playlist for my YouTube videos there's talks all the information about what I query is here and then I have a few functions and ready to rock so um in the the next few videos we'll look into other Frameworks to also do this but this was one of the first ones CU I'm super familiar with n and there you go anyways that's what I wanted to show you today and feel free to join us in our slack community at slack. hyra.com to talk about all this stuff and do not miss out on like new things we're pushing out and product updates and all of that stuff anyways happy coding [Music] cheers