Bryan teaches Tim Next.js with GraphQL and Hygraph

[Music] we are live yes it's amazing how this how this technology works technolog is always working and we have our first comment already thank you BBA yep hi to you see again welcome so um most of our colleagues are actually on an on or off site it's an onsite right Brian onite yeah technically onsite so they're just in the office let's call it half the is over in Berlin uh Tim and I weren't able to to travel for it and uh we're here with you instead and happy to be I I love streaming so so I'm I'm excited go so let's see because I did like um a post a scheduled post to Twitter which went wrong now I'm gonna check our slack to see if my schedule post actually worked it went in the community the slack Community is good to go with no Then I'm assuming my LinkedIn post worked also I'm just putting putting the called oh look at the ctas we have ctas nice but if if you're curious about uh about knowing um when these are happening we post about it in the community in the slack Community regularly as well so you don't have to follow us on Twitter don't have to hit Tim's LinkedIn just join the community yeah the community slack should be enough and so BBA um generally it's going to be on Wednesdays and so U is actually saying he'd love to join so I think that's GNA be a good one probably not next time because because you're out next and I think it's just gonna be me and low working on some stuff we can plan for it I like to like figure that out we'll reach out with our official people who help us with this stuff which we have now which is cool it's amazing anyway so um now that the some of the viewers are pouring in let's talk about what we'll do today because as we're saying our colleagues are off well they're not off they're working hard but just not here with us and so we felt like Tim doesn't know react very well and why not take something in High Ground something with graphql that's not like the easiest like off the bat thing that just works but something that requires just a little bit more and just have him struggle I talked about myself in the third person and it's weird just have Tim struggle yeah I I'll say it we have Tim struggle I'm down for it though so what we came up with is like last week we actually built like a load more functionality or pagination with Astro using a bit of react and high graph and graphql so all those things together are not super easy but as you look at our stream actually worked pretty well but now why not try that in next and react because there's different flavors of how you could build something but essentially it's probably the same thing right Brian what do you think yeah exactly and the the fun thing is we're actually so that that demo that we gave last week uh it's going to be an official High graph starter and it will actually also uh be in these multiple flavors right I've polished up the Astro one uh Tim has been working on the next one we'll be doing next today and we'll polish that up as well so that anyone who wants to kind of try this idea out can and see the differences in the Frameworks the differences in the ideologies even because in just those three and we might do more right but in just those three there are distinct ways of handling these things and they're all similar but they come with their own strengths and weaknesses and honestly we were talking about before the stream yeah little little behind the scenes right Tim actually has already built this um but there's actually some things that I want to change from his code and the way he's doing it and we're gonna we're gonna work through that as well but in looking at it um whoa whoa we have people from Berlin in the office nice um but in looking at it I actually as much as I know next pretty well and know react pretty well we were talking about it and I actually wish it were more like the Astro version and we could code it to like the as version that we did uh but that's not really the like the next way at least as far as I know it so we're going to do it in a more next e way and we might talk about when we get there like here's here's the difference between the asro thing and here's the the drawback but the benefit that we get from it as well yeah and when I was because I was just wanted to practice at least a little before this stream like I just wanted to have something on the screen and you could see my brain is fugs and the way fugs you would like to like rehydrate or reender reactive props and stuff and the wording is relatively similar we have used something as well there's a used state in n and but it just works differently slightly differently and we have yonas as well from the home office welcome and the thing is my brain just works a certain way and when I did the next one I just did it because I knew how would probably do it yep and had a very small amount of lines and I felt like yes this is the thing then again it's super black boxy if something goes wrong you don't really know why it was very convenient but then when you do it in next and react obviously it's is there's going to be a whole bunch of um helper features as well that are also a bit black boxy but at least it's really open and you know every detail it's just JavaScript and typescript where of course view is the same but under the hood there's all this magic and Magic is great in so many levels until you have to debug it and that's I mean there's there's all sorts of drawbacks in react and in next uh but one of the things that has long been a react staple is trying to make it where you end up writing your code and you write everything with just some help um which is a good thing but it's also there's a lot more that you have to write there's a lot more that you have to think about in the front to get to the point that view and next give you without without thinking about which is just again it's it's it's benefits and drawbacks and trade-offs and they're all all good in their own way I cannot wait to do a spel kit one and then have a look how different that is and then we go to remix and then I there's so many we have solid we can try what else do we have something with fancy pointers and stuff angular I have not done angular since they first came out when I looked at it I was like nope I did I did angular when angular was was a was a like the first of the good ideas um but then yeah like then other things came out and then now there's a whole bunch of they got signals and all sorts of stuff now so uh there's a lot of good stuff uh I don't know any of it so we'll have to find somebody you know what what I'd love to try also is just do this with vanilla JavaScript and jQuery 4 that just came out and render a template in the client oh there's so much we can do but just do uh do vanilla components there's something talk about writing all your code from scratch like all the boiler plate there look apparently angular is cool now I I've seen some cool kids talking about it uh I just haven't done the exploration needed to actually know anything about it yet same I used it when it first came out and it kind of looked like few one and few one came out after angular because you just looked at it's like hey that's handy let's do this and it was all dumb and we had to put NG app on the HTML tag all that stuff was fun but let's not go down memory lane too much and show the folks a bit of cat perhaps or at least oh wait maybe Brian do you have um a URL that you could share with the finalized product I realized I didn't actually come up with that yet that's a great question Tim do I have that um I will have it probably let me just go to my for sale and find oh yeah I have it yeah to at least see the uh the uh Astro version of it all all right let's see now I can share my screen and you know what this is actually not the Astro version this is my next version nice but again all the same it looks exactly the same and it's actually used in the same data set in hgraph the same the same studio in high graph so yeah and so we have Enrique welcome up oh and so Barry says here the new version of angular is you like all right the these learn from each other so much I actually love to see that sort of thing like it's it's amazing to see that happen yeah anyway so this is the next version and they all look the same and they all come from hgraph and so we have a micro blog project in hgraph and so when we look at the content there's a few posts and each post has a few Fields so we have a slug and some content it's it's that simple and so we're just literally just querying all the posts so one things I'm gonna do real fast is I'm gonna go grab this this is actually a clonable project uh a tiny tiny uh uh project in high graph but you know what like if you want to actually have the data set that we're working off of I will provide that I gotta go grab it though yeah so this is basically what we're querying and this is the query it's very simple obviously oh it says assets here but it's going to be posts but because this is posts um with a loot more we're actually doing it through here so post connection and we talked about this last week so maybe um Brian do you want to go over why we do it this way yeah I'll give the the tldr for this right the tldr is that when you're doing pagination pagination involves a lot of things that you want helper functions around you want little little pieces of help to get information so you could do all this via the post query right you could we have like first and last and skips and all the things that you would need to do some sort of pagination yeah but the post connection query uses the relay connection spec in graphql we we've built it into every model that you make in high graph gets all four of these queries that you can kind of see here a little bit um but the connections query gives you uh a few things it gives you a cursor per page it gives you Page information you can see down on the on the left there end cursor is the last ID of the post on this page which you would then pass to the next query that you make has next page will let you know that do I need to show a load more button or not uh and then we also have this idea that uh if you show the aggregate real fast we won't use aggregate today but somebody asked in the community you can also get the total count for all for all pages together right all the posts together are aggregated in that so if you needed to give kind of a status IDE idea in there you would get it uh here let's go for the first three with Aggregate and all the edges and all the things so what you would get is three items and then the cursor here the end cursor is the ID of the the final one here and then oh that just moved and then well there is a next page because we only got three and the count is seven and so when we now query um with a cursor of the last one and query three again we get the three next ones we would use the after the after argument in that and would say give me the next three after the end cursor which is again that's what we that's what we're going to be doing right when you click the load more button we update the cursor so we get three posts after this last post which um let's see what is the the here can be short y so now um also Rich Tex so this is like the next one yeah the next three that we get the next three and we still have one left now Y and so that's exactly what you're see being here right so we have the first three and then we have three more and then the last one yep so that's what we're dealing with here today and so this is what I just did before the stream where that's all we have folks but now we kind of know how this works and we went over this super fast but of course we can go to where do we have that here in our documentation where Romina who's actually in in the chat here from our Berlin office she works on that stuff and so you can actually follow all this here and find out how this works so should we do some codes yeah let's code some and and the other thing to mention is that we we did go over in more detail the relay connection spec in last week's stream available on our YouTube channel all that good stuff and we'll make some shorter form content also so you don't have to watch an hour stream to learn but for now you know when there's some time anyways all right so let's let's talk next real fast because I know I know that you know a little bit about this uh but if you're not a next person uh there is this idea of the new uh app directory the app router as opposed to the old Pages router that existed uh this came about in next 13 um and is is now the the default way of doing things in next compared to how we're in next 14 now next 14 now what's the difference do you I wish you wouldn't ask that because I don't I don't oh sorry yeah uh I was literally about to say I don't I don't know what the big changes were between 13 and 14 but they exist and I'm sure obviously there's a lot of optimizations and things like that maybe it's all in Rust now or anyways doesn't anyway so in the app in the app router we have this app directory and the app directory is where all of our Pages end up being um so you can see we have page. TSX which has that main that is generating the index page right that is in this in the app directory this is our slash route our index route and then we also have a a layout. ttsx and that is where the layout that everything's gonna fall within goes so all the purple that you saw in Tim's original one uh the H1 that say my micro blog all that is there and then you'll see that little children item there underneath the H1 that's where the page the content of the page. TSX all the components all the HTML flows up into that children area and you can change these these can kind of go down you can have layouts within layouts hey look my name's on the micro Blog the thing is though this is me as a fugs oh wait we we have a comment let's have a look oh here buba is saying oh it's speed and stabilization as it is generally yeah thanks BBA so to me as a few def like I'm looking at these these names like home and that root layout do those need to be that name is it name naming specific spefic or like where is layout. TSX even called like how does this work a lot of this is is file based um so you call your file layout. TSX in a directory and all of the pages in the directory and in any subdirectory that don't have their own layouts uh will import that and use it and it's all in that sex so there is there is again some some kind of magic happening here um the like the name on the home function absolutely has no meaning like make it whatever you need it to to to make it except for don't put semicolon in there that um so this doesn't matter at all okay exactly um so it's all kind of there's a whole bunch of file names that work in nextjs right now there's a there's an error page there's like 500 404s there's all all sorts of different pages you can get based on the naming convention you can also do them in configuration uh but they they did a lot of work to make these uh file name conventions work so there is some black magic yes but as long as you know it we're good and we do and it makes sense to be honest and when you we're not going to do it today because it's kind of against the the pagination piece but when this is finalized right one of the things we'll actually have in in this directory will be a subdirectory that will be called post uh and the post subdirectory is how we'll render the U individual posts because you won't be able to click on those post pages right so then you would make something like this right so it's variable with a yeah a slug TSX inside and then it can it can also have its own page. TSX and that page if we wanted to change the layout we could change the layout there or it will inherit from the level above it uh so a lot lot of good things in there especially for somebody like me that is much more of a static person and like that's actually in some ways how like an 11d would work not the dynamic routing but like the the directory structure makes me happy that makes sense because we all came from that at least people our age let's say the the olds yeah and so I don't see any components in here yet I'm I'm sure we're going to make those so this is all server redner right there's no JavaScript here involved correct this is this will all come down at response time but also like caching and all that like next has all that built in it's it's basically static coming from the cache uh there's a lot of things that NEX optimizes around for that I like that I do have like a little button here that turns off my JavaScript because I'm an old school nerd who tries that on websites oh yeah and if I do it's still the same that makes sense yeah that's that's that's uh HTML being shipped to the browser all the all the stuff on the index page we will get into client side uh client side components as well uh we have to I guess yeah let's go ahead and uh and maybe get some we probably need to do a query first to get data from hgraph exactly um recommend on this that maybe we copy and paste it um and and walk through it because it's a lot of typing so I have a function here on my screen I'm just GNA copy paste it for for you guys so you can have a look at what I made and then we can maybe just optimize it a bit so in if we are talking uh next can I just yep paste this and this works yep the only thing like you put it in your in your component function if you need items from the component like honestly all this stuff should be eventually optimized out right like it should be refactored and brought into its own files and all that and then imported in uh what we've done now and for the folks watching that know everything about like code gen with with graphql and like the react query stuff that cleans things up a lot we're not doing that today to just keep it open and also for me to understand the basics and that's what this is we're literally posting a fetch to the endpoint which is high graph and we're just going to say this is the query and this is what we were looking at before but we did some extra fanciness y a a few things to note in there that we are passing in two variables into our query and this is graphql like Basics but it's some something that's important to talk about because I know not everyone is a graphql person so the the do inside of our post query the dollar sign indicates we're we're receiving a new variable from our uh post object uh so cursor is going to be a string which is that that ID that we got or that we will get and the amount is like how many we want per page yeah um and so from there we pass those in to the post connection query so we're saying after cursor so if there is a cursor we want the post to come after it get the first sum number so in this case it'll probably be three and then order by is we don't need to change that it'll be ordered by the created at descending so like the time that was made in descending order to get that kind of uh timeline feel and then all the rest of that is what we basically did inside the API playground which is get the page info get the post array and get the individual post data off of each of those nodes the the one lovely thing I learned last week about graphql is when you just do posts callon means that you're naming this thing posts rather than edges and here post so we are now talking in pages with posts and a post it's a lot easier um than then edges and nodes and all that they work but yeah they feel so graphy you know yeah in our regular API right in the regular like post or posts query you don't have to worry about edges and nodes you just get the data uh but when you do the the connection spec it's it follows the actual relay connection spec on that yeah so hgraph has simplified this thing like when we don't have this connection one we actually don't have those notes and um edges it just makes it a little bit easier for a beginner to understand I think exactly all right so we have a query now and I just put it in a little function called get data and the amount I just set to three by default and the cursor is going to be a string yep but sometimes it's not going to be there so because the first call you don't have a cursor yet yep and so here I just set it to null if it's not there and the important bit is is when we actually have a look here for the cursor um oh wait I can see that here um there's no hashbang here so if it there's if this is here we have to have a cursor and without we don't and so I like the coder in you Tim that's an exclamation mark like it's it's not a bang it's an exclamation mark anyway you're right you're of course you're right oh we have here yeah and and again this is the power of graph ql right is that we could be doing code genen to get all the types and all that we we will do that in in setting it up for actually being a starter but in terms getting this ready for today yeah you want to see the code I did this afternoon to learn look when I put that here you will see that there's a Javascript file that does all the introspection so and actually here I think oh here's my graphql and it made all this lovely stuff for me so we know it exists but we said it on the beginning of the stream like let's not do that now because it it just goes deeper we don't I just don't know enough about next and react now to also be worrying about all those things you know what I mean exactly um and in fact like when when I when I write a lot of tutorials I'm not even using typescript um but that's me yeah I I was being a bit annoying to you today and I actually added some typescript in here so we'll see how far we go with it's all good it's it's it's an important thing long term of course and the whole point for now is though let's get that data in so we have to get data function yeah so and and you'll notice uh in in our fetch uh we do pass two pieces of that object the query but also a high graph is expecting variables if variables are defined so in this case we're passing in the amount which we know is going to be that three that's in the in the argument and then the cursor if it exists and if it doesn't exist it won't be there yeah so then it's just the first Whatever item it gets back and so this is the way actually you do um graphql you post to something and in the body you have a query and variables that's kind of that attracted out in all the different things you can use whether it's Apollo react query uh graphql request whatever packages you're using it all boils down to a fetch in the end exactly so then I just get the Json back and then I grab the data that comes out which is that Pages thing so from pages from the data that comes back I get pages and from there we can have the end cursor and the next page that come out of page info so this is just a bit of very easy abstraction here and it returns them all yep so do we just do this console console yes no I was hoping you were going console log uh but yeah um so this is different from from the old way of doing it in next right uh in the pages router You' be setting up a whole bunch of stuff with like get static props or get you know get server props remember this this is true it's all it's all boiler plate and it was it was not necessary especially now that we have react server components so in this case the new way of doing it in the app router is to make a function and then call the function in your component and get whatever data you need uh so that's what this is right yep that's exactly what you're doing so yeah passing yeah three well I actually if I didn't pass anything in it should just work right uh do you said are you saying default up in your yeah so I say three and cursor oh it does you know what we'll just do this because I do want this and then the cursor is going to be I think okay look at the typescript of this it needs it expects a string but this is where it gets weird right because when I don't give it it says null but can a string be null or should I have done this well we don't want to be a string and all that that I'll say this I know that your code was working oh it was clearly working so I would say keep it to null I think actually a blank string will error in the query I think it will it will assume that we sent a blank a blank string and we'll get nothing back I think we would get actually an array with zero items so what I'll have to do probably I'm just I don't know jsx very well but I think this is going to be correct yes I like that you're trying to like format it at the same time um I don't know because when I hit save it will just format so that's just me old school self I think it's going to be this just to have a look wasn't that something like this yeah I think that's it's been a while since i' since I've spit it out like this but yes that should work oh or it's this I can never remember the order of it to be honest no same it's not happy expected one to two arguments just yeah okay let's just see what happens it's really not happy is not assignable oh I know it's getting posts ah yes off the object I think it's it's this yeah oh let's see yeah clearly not uh yeah the other way the other way we for us I bet or you can just do post and see what we get okay we definitely are not getting something uh we are getting let's see just just console log it yeah without the W I told you you're were going to see me struggle right and this will be this will actually be in your uh terminal not in the browser oh all right it's super unhappy with that Jason thing scr so you're getting an array and then the array has uh each page those are technically p uh yeah posts so we do have them let's not let's not worry about the Json parts let's not let's let's instead uh because uh what we actually want to do is Loop through it so let's go ahead and do a curly uh curly brace curly bracket and just uh yeah post. map and then we're going to we'll put eventually a component here um but for now let's just get something on the page we'll take the post to make it not complain we go like this I imagine yeah until we actually get our types and all that um but we you'll need to wrap it in something and you'll need to put the instead of doing the brackets do a parenthesis to just uh automatically return a compon or a jsx component like this yep and wrap those in the curly braces curly brackets no and then you'll still need one more curly bracket at the end there you go so why would this complain let's see post that map parentheses Arrow function expected comma where do you expect the comma this is why one liners are Terrible Tim I so agree let's just make it a little bit rougher okay and then parenthesis and then bracket at the end so this should do it right and wrap wrap that in parenthesis I guess you wouldn't take key yeah it it is a uh it's an A List it's an array that we're mapping over and react wants keys for everything it'll add yeah post. cursor is fine okay this should do yes like to me it's so funny because I'm not used to jsx right a map should return something it's not a const here but of course it returns into this function as a thing so to me that's just it's slightly odd but it works they're all the cursors now all the data for for that live one level deeper uh so each post has a post object on it that we we named in our graphql query uh so if you wanted to like show the um slug for each of them for instance it would be post. post. Slug and then we save it there go so we have our first three uh but in reality we actually want to pass these into a component where we'll add some interactivity to it um yeah this this components need to re like these need to render like something nice looking right yep so to start let's move into a new uh a new file in the you could put in the app directory you could put it in the in the root directory uh components slash and we'll call it list post a list yeah because this right now we're at the list level oh we do the list first and then we do posts inside I mean you can do it in whatever order you want it's fine either way it's just your brain work Capital right yeah Capital you don't have to make it capital but it is the convention and I imagine I have to do something like this but then maybe not a sync it is going to be a list list and then it will it's a function it will return out a uh the um jsx something jsx yes and then you'll import it on your page. TSX and you'll put it in line yes people this is the level Brian has to teach me react get there oh typing's hard too I understand oh it is hard for me 100% now one thing that that we won't get into today but one nice piece of syntactic sugar in in next would be to configure your um what do they call it uh your Alias for your components you can actually tell it what directory be in and then you do at symbol slash and it's that it's that directory isn't that by default done for components if no if you set it up to be that way it's part of when you run the CLI it's one of the options you can say yes to um and then it'll work there it is so there's that so we can basically move what you've got in your page. TSX into that component that okay but then it just needs to get post as props yes so we can already just post equals curly bracket posts all right and then you want structure it's like this right oh almost almost yep so what what that's doing there is you've got the props coming in but we already know we we're only getting post so we can actually uh just get destructured in the argument area yeah exactly do I then do this yep yeah and you'll need to wrap it either in a in a in an element or you can yep do that and that's a this is the strangest thing ever to a fugs developer but react wants everything inside of an element uh even things that you don't want wrapped in an element and when you um when you don't wrap it in an element you do what's called the fragment it used to be you'd have to import react and say react. frag fragment and then wrap W everything react. fragment they put some to be honest um fugs does this too it just doesn't bother you with it they do it with commments so fugs has something like this in the HTML to be able to parse to so they all do it yeah in react you just have to consciously do it yep and that's that's again that's design decisions uh for for gonna be horrible we're just gonna oh that doesn't work just yeah okay so now we should see the same thing basically yeah the goal should be yep yeah cool so no more something hey Tess one of our one of our amazing folks on the people team there we go so all right we have something now so I do have because I practice a little and we've done a few streams before where we looked at the micro blog I have a post um component in react already because we did that last time I just took it from yours yep so I'm just going to grab that for a second and let me find it post you don't you don't want to watch Tim type Tailwind classes to make it look no nobody is ready for that and no one wants to see everything looking ugly either so it's a it's a delicate balance here on the make post. TSX yep right and I'm just going to paste this in and so just going to have to get you see we have the any here also so we're going to grab a post and when we do something with like the created ad dat just to kind of like make it look a little decent y so so basically all that's happening here is we're getting getting the data from the prop we're converting it into nice strings and then we are uh setting we're getting HTML for our content from hgraph from our Rich Text Editor we are dangerously setting inner HTML on that we do have a react um renderer for our Rich teex which would be the better way of doing it but we're not going to get into that today for now ex and then we're saying the time for each of them so that you can see it in a nice way for when that was created so what we could do is rather than this actually well actually start start typing VSS code will actually do this for you so go to your return statement or at least it should do it for you we'll see if it works out and delete delete all of that for now and then start typing open angle bracket uh open post and let's see if it gives it to you there hit that hit enter it automatically Imports it for you from where it is that's cool I like that do we we add Keys here too I guess Yep this is this is a list anytime you map and react You're Gonna Want to add a key to it the thing is in fuds they don't tell you to do it well there's a warning rather than an error and then you just don't do it for a while and then you suddenly realize why is this so weird and it doesn't work and the caching is weird turns out you didn't add a key so it's good in in in next or react at least here like you have to add it it's very so we should be seeing something better now maybe nice so again this was just this was just the prettification of it all yeah so we we skipped the part of me struggling with Tailwind glasses I'm kind of happy we didn't have to struggle with that exactly and In fairness we didn't struggle with it last week when we did an astro we copied and pasted again um exactly so the main thing now is now it's basically now is going to start because we have to this button here which is going to be in the client because we have to bind a click and then do something so here here's where we deviate from where we were in uh in Astro so in Astro we rendered all these posts the first three in HTML and then we moved the state into the more button so that we could keep the way the Astro wants things and have it actually render his HTML and not render our HTML on the client but more in this style we actually want to move State up so in in next we're going to move the state up into our list component and have our list component manage that state and put the button in there as well exactly so do I just go for button you absolutely can yeah let's see how this looks okay so you know what I'm going to quickly do is is steal those styles from the other one so it looks good immediately and so there's also this loading State we have but let's not worry about that for now yeah exactly 20 20ish minutes so exactly so there's an unclick already let me just remove that because we're going to write that together now so load more is going to is going to look a lot better I hope oh of course it expects expression that Mak get rid the whole thing y there we have a lot more button it justes but here we go I like it so what do do we make a binding now or do we go in a different direction like what is the best way to go here so I think what we want to do is we're GNA go ahead and move State into here um so let's go ahead and this is going to instead of being a react server component we're gonna make it a client component instead and there are plenty of reasons to talk about the the pros and cons of this right uh this will not this will load on client load however we're not going to fetch content on client load at this point we're fetching it at the server level it gets passes Jason into our page as it goes down here and then we'll take that and render the first bit it still requires the client side JavaScript to do that but it's not a page it's not a it's not a server query right it's not it's not a fetch request well query right now all that's rendering on the server and then this all this information on the server is giving it to my list and then the list is client so it just gets the post and renders it but this client doesn't query not yet at least and the reason this has to be a a client component is we are going to be using State and we're going to be using reacts use State functionality which doesn't work server side uh it is a client thing exactly so what we can do is we can go ahead and start making our various State elements uh so there's a few things that we're going to need uh and you can go ahead and start typing them if you want uh we're going to need our posts so we will const post set post and this is yep and this is the way that react wants it and you can actually use vs code yep um actually delete that real there you go oh Quick Fix look at that good job I've been doing it like this because I just don't know react so it's helping me fix things it's very good uh so we're gonna use State on that uh we can uh yep grab the posts that will automatically populate the current state will this not break that this is post and this is oh actually well it will yes so what I would recommend doing is one becomes post list uh and it can be whichever one you think makes the most sense on that I'll just do it like this oh not list list list list it's GNA list list we'll take a post post and and then yeah it becomes set post lists there we cool and now honestly we could just do this and it should work right it should work and that's actually good a good part to test uh but now click on your your fancy little JavaScript button JavaScript and still works well refresh it hard refresh you know I'm learning something today look at that you apparently don't need JavaScript apparently it actually does what I want it to do there you know what it might actually look at can I do something in the server with this client component and then just does it and then hydrates after that might be what we're seeing here might be IBA are you still in the Stream if you know Post in the comments um but yeah I honestly didn't test that and I didn't uh didn't expect it maybe I sometimes think less of uh of react developers than I should uh that's great that's amazing that's a absolutely what I want to have happen yeah this is very nice yeah so it's it's like a hydration thing probably so I imagine they try to run this on the server as well just to see if it works somehow and if there's if it's hydratable so we don't touch window or unclicks or but the thing is there's a use state in there we're g we're gonna move past the amazement we're gonna move past this problem I'm just happy I expected it to be blank um and actually great um so I'm very very happy with with the next team there uh all right so we have our post list but what else do we need uh so we need a few other pieces we will need to know the cursor uh the next cursor that we want right not the which is the current end cursor right the cursor that we're gonna start the next query from so next cursor yep and then we each of these will be set as a function and and for those who aren't uh react folks or who are maybe uh junior in this uh each of these is a variable that stores the information so in this case post list and next cursor and there's also a function that usate gives us on how to update that variable in a reactive way yeah exactly we'll also need a loading or a has next which is going to be a true or false it's gonna be a Boolean to uh to know whether we need to load the button or not the load more button and that's also going to be a use state in this case and we do need be setting um some default States on these Tim so on next cursor I set it to a um do what that's going to be the uh oh it's the final post do next uh H or that next cursor I'm not sure that's in posts sure because what we're sending is posts so we don't have these oh then we need to send both sorry this is this is what we talked about before the stream where your brain works slightly differently than mine you broke it out and cre created your own object in my mind I just passed everything and just took everything your way is um but yes we need to pass those as props as well you could pass everything but let's pass it cleanly as as props let's do it like this for now yep not though this is not really yeah everything's explicit Tim everything is explicit you type you know what if I write this while I'm learning and I look back tomorrow I know exactly what the heck is going on what's Happening you know what each thing's name like this yep but how does that work with these like shouldn't it be like this nope C case oh yeah it's jsx so they can choose whatever the hell they want yep that's kind of cool though yep so now in our U State the uh the next cursor is going to be end cursor oh look yeah this is where we run into issues right and again that's why you might want to rename it as it comes in um this is kind of cool this way so now we have all the information as a base y that's cool and so now let's let's let's do this uh let's wrap our button in a conditional that is around has next and we'll do it in the in the fancy like new JavaScript way which would be has next and end this is like alien subject matter for me when we're talking react and versus few you could write this out as a full conditional or as a uh a turn area or anything like that kind of like the shortness of this this feels like do you remember when you're doing WordPress with PHP back in the day with their they didn't really have a template language so you would figure out the shortest way you can write PHP with Echoes and things like that that's basically what we're doing here which is cool yep and and in this case it just it's short I actually really hate it it took me a while to to like put it in my brain but it's short um yeah exactly so if there's a next page potentially only then we need a lot more that makes a ton of sense uh and then for now since we only have about eight minutes um let's go ahead CRA let's go fast um let's get our button set up um so let's add the onclick and let's make that that function so onclick and we'll call call it what do you call it handle load more and this is where we look at where we want to put it we're not going to put it outside the component because we want to have access to some of the functionality inside the component some of those Setter functions that we've got so in this case we're going to add it in the component which you're already working towards and uh and it will have the information that it needs inside of there if you spell function correctly yes yes um so yeah inside of here we can then do basically the same thing that we did for the homepage right we can do a fetch requests we can probably grab all that and again you'd probably want to abstract that out into its own file and use it so essentially do we wanna oh no we're not going to do this now because we have the cursor yep and the amount we're just going to keep at three for now yep so yeah this is not the cleanest way or you want to abstract this function away elsewhere Som abolutely and and like the the work's already done on that right like you've made arguments and all that you can use it wherever you put it in another file export it and then import it into the files you needed in so for now we're just going to do this yep and this is yep we're just basically changing these things out that we had set manually on the homepage into the very stateful um variables that we have what you doing I'm gonna well I'm getting back to next cursor right I'm gonna set it I thought we were in another part of the file [Music] uh yeah we're just going to go slightly faster now so basically what this is doing is just setting that thing in the state here yep and we also need to set the post list and this is yeah that might be the most important one this is where we do the fun thing that we also did last week where we need to pass in the current set of posts and the new set of posts so that we can continue what I remember from learning this thing for that you actually get the posts here as a function true and so let me see if I have that in my previous code also yeah it's like this yep I'm just copy basing just for this sake of fastness yeah so we're saying we're getting the previous set the the previous state which is something that's passed into the function that we get into that posts and then what we're doing is we're immediately returning uh a destructured version of the last posts right so the actual posts from the array and then we're putting the new Post in at the end of that so that we keep the state moving downward is that Pages then uh it'll be it shouldn't be Pages Pages posts yep so why is this not happy hold on oh yeah ah I added typ script and then do not look at it how about that for just for now we have a few minutes theoretically this should work theoretically famous I hope so we got five minutes okay errors are fine errors are good destructure property content of post. post as it is undefined um so let's go into this component and let's log out what post is I think we're making a bad assumption yeah so somehow this posts lists this stuff is not correct so um you wna we cannot console log here right go back to the era real fast because I I think we're in a different spot than what what you're thinking uh we're in okay no you're right you're right so let's uh let's log in our um in our fetch in in our handle click right let us look and see what the data we're getting back from high graph is because I think that's where our problem exactly I think that's definitely where it's going wrong so yep JZ let's just have a look what this is yep and yeah open up your open up your console all the way down well but this this will actually be in the browser because this doesn't happen oh you're right yep so console and and console and zoom okay that doesn't matter for now yeah click click the button all right you can see we got the log the log is all the way at the top page info and post what do we call it I think this is an a naming issue 100% so Pages has posts and has page info all right so after set post list uh console log post list oh oh no actually yeah this is this is exactly right thank you than you chat uh we have to destructure pages. posts as well per yeah exactly we do the destructuring on both yep because they are both arrays and so really what we had was we had three items comma an array of three items so we we ended up accidentally nesting it yeah you're totally thanks that is the way well let's see because it's not gonna error until we click there they are we did it yep okay the only thing that we don't have in this that we had in the other we don't have necessarily time for today so we don't have that loading state but that loading state was just a div like it wasn't a fancy loading State uh and there are probably some protections that we need to add in as well um but yeah this is this is what we did last week but in next as opposed to in Astro and uh I'm actually very pleased with what I learned today because I learned that uh that next actually is putting putting the HTML in the browser like that's great I really didn't anticipate that happening good job forel team like yeah so they put the HTM million and then they just hydrate if it's a client and otherwise they don't I like this a lot yep that's kind of the few approach or the N approach anyways it's it makes sense yeah and so um we didn't do everything but we didn't have all the time we had last week so thank you so much Brian I learned a lot the only thing that wants me to take a shower is that I have two big queries in two files that do exactly the same thing and that that's why it's and Max is bringing up uh could you use get post as a server action on the client probably I haven't done enough research on on server actions at this point but yes that would be probably the ideal way of doing it the the very much um very much next way of doing that exactly so I still have something to learn but once we'll sit together and figure out the best way and then we push this on and so once this becomes a starter you get the clone from hgraph which is the micro block with all the things do I have this on the screen no it just fine we don't's anyway exactly and then once we have that then you can just choose I want my next I want my next I want whatever we're going to do a few of them that's very nice I'll actually grab that link again I'll post it in chat it's too long to put up on the screen and has people type but if you are interested in the data that we're working from at least uh it is there um and we'll be we'll be making the front ends available as well as they come in so um with diing in mind um everyone who's here hopefully is also on our slack community and if not feel free to join us and just ask away and tell me I cannot do react for if you want to I don't think it's needed be nice in the community being nice in the community is important of course we have T's and C's in the community yes we have guidelines and all of the things anyways no it's um I'd love for you to join and ask your questions but also show off your work because then we'll put you in the Stream if you want to and show it off Y and um Brian you want to take the next sure uh it's always good to sign up for for high graph uh but again I would recommend it in the chat grabbing the link from there which is that micro blog and playing around with the data set but if you just want to see we have a whole bunch of other starters in there as well with different data sets app. hyra.com signup uh to go there and start playing around with our graphql native CMS exactly and then lastly all of this stuff you can also just find it in the docs if you wanted to and so this is our CTS out of the way we're at the minute time box where Brian has to flee so we're good um thank you so much um we will see you next week not with me because I will be in Amsterdam doing other things but we'll have Brian and low I imagine yeah it's gon it's gonna be a good time I actually don't know what we're talking about yet I don't know if we promoted it or not uh if we haven't I've got some ideas oh yeah this is part of living on the edge of a startup and then doing the content as it comes and this is like the nature of devil we love being reactive so um thank you everybody for watching and we'll see you soon cheers next time I clicked the button