The best Nuxt 3 GraphQL setup

what is up welcome back to another video so a few days ago I tried out a CMS called KC CMS and expect a video on that zone and they actually only have a graphql endpoint API to talk to the CMS and build your front end and I had not used graphql probably in I don't know three four years it's never been needed and it's always like an optional thing and there's lots of people that say we are over graphql it's no longer viable but actually in using Casey I realized how handy graphql is especially when you set it up correctly in your front end and that's what I want to show you in this video this I think is the best way to set up graphql in nox3 all right so I will not be going into what graphql is in this video I'm assuming you either have an opinion or you actually used it before and so what do you want to do with graphql is query exactly the data that you want and that query language is pretty neat and it feels like hey there's a schema here maybe I can do something with typescript it's pretty interesting to see how all these things play together and so I wanted to have the leanest cleanest simplest most elegant interface to graphql from next three and I don't personally really like the Apollo server with all its overhead and all these lovely features that I probably won't use so I found this amazing tool let's go to my browser here so there's the next graphql client and let's go to GitHub so we can give proper props to the person who built it and this is by this as I decide whatever you know what I mean um this thing is so cool so it actually has a zero configuration what we love about nox modules it has full typescript support multiple client support so you can actually go to Daisy CMS High graph CMS SpaceX and then connect all those things separately so be super clean and then we have hot module reloading for graphql documents I have to learn what those are I'll show you in a sec and then it's a super minimal client and it does code generation which to me is the magic that I hadn't seen before at all and so let's just have a look at how I set up my next environment to make this graphql thing feel kind of like out of the box magical and super simple to use all right so here is on the left side my vs code with my next setup as you can see my config is very empty I just have next graphql client and on the right you actually see whatever came out um on the front end and so what this custom this client does it actually connects to your schema and then based on the queries that you have set up figures out all the types and all the schemas and data that it needs to be able to query that in an easy way and then it makes you actually composables that you can use to just query that data which to me was like mind blowing because it's only fully typed it's so cool so essentially what this thing allows you to do you have an environment variable here where you just set up your endpoint your gql host put whatever you want there I have a high graph one it can be case it can be SpaceX you know all that stuff and so what it then does it looks for a queries folder where you put your queries well I have a products query that is literally just getting my product's name and slug from this endpoint that I put in my environment variables file and based on this it will now on yarn build or NBN build or run def whatever you do to get your stuff running it actually does a bunch of code generation so when we have a look in the next folder there's now a graphql folder with a whole bunch of stuff all about what it was able to find out about my endpoint right and then there's a whole bunch of types and it actually now made a function called gql products and if you look back if you have some eagle eyes before there is a products query here so when I now go to my app.view to query these products I just have to do this I have a top level await in my setup function and I do gql products done and it even adds things like mutation so if you have variables of like a where a slug is this or stuff like that you can just add it here and do what you need to do and so then I just get my data and I run it here which means all my data queries happen in this graphql files here which is so clean because it's all in one place and look at this magic let's say I want a description right hit save and there it is so there's a hot module reload for these queries and it just does the query for me and this is just magical and there's a few other um composables that they offer you which um I'm not really showing you here but we can kind of go over them like it's really interesting where you have these graphql functions like the get users for the user's query and comments and like mutation stuff but then also there's a bunch of different composables so you can actually with your graphql instance do a bunch of stuff or you can do an async data call and then actually set some cache and do some other things so there's a bunch of little extra things like imagine you have to have a token to be able to query something it offers all this and it's just magical because my next code is so clean the only thing I have is the component or a module then I have a graphql file where where I query things and that's it and of course when this grows it gets more complex you can do fragments and all that other stuff and you might need a token to be able to connect to something but it offers all this out of the box and it's super lightweight anyways this is what I wanted to show you and I might actually start to be a bit more excited about graphql because this setup is so nice it's such a clean nox3 setup that I just enjoy working with it anyways cheers happy coding