Live stream🔴 Tour de Live Preview

yep [Music] who well we I love that intro music so much exactly and this is one of those this is only our second stream right so I was like okay let's click both buttons at the same time but I only have one Mouse so there you go that's why the music stopped slightly faster yes anyways we're here now and so um low it's you let's run yes so welcome to content T pulse for developers this is our second live stream I'm low I'm the senior technical product marketing manager such a mouthful every time again fast please senior technical product marketing manager it's it's not bad I like it no um Tim do you want to introduce yourself yeah sure so my name is Tim benck and I am the developer experience lead and with that in mind that fits really well for this stream because we're going to look at some developer experience Rel stuff right yep um with that in mind welcome to the tour du live preview So today we're going to cover all the different configurations of live preview we'll go through client side rendering server side rendering um middleware static rendering graphql hopefully we can get through all of it but we will see and then we'll show you after you do that configuration what you can do now that you have live previews set up you can use visual Builder so we'll get into that a little bit later yeah and I think it's well maybe it's time for me to just put my screen on here because we need to kind of talk about the basics first because we get a ton of questions about okay we want to use live stream of live stream sorry live preview and visual Builder but you have so many elements floating around for us to implement why is that how does it work and for all of those things there are reasons and that's why we have this dream to kind of just dive in what are the the differences what are the like what's the flow how does it work under the hood because the reasons for that is that it's everything contents that builds is super agnostic you can use one thing on its own and it kind of just works but with that comes flexibility you know um ways to set it up in a different way and that's why we might be showing you six different ways today but with that you should know everything there is to know right so um hi Brian yeah live stream on hi Brian shout out to Brian thank you for being here all right Brian so as as it this feels like old school now us three here anyways here we go so basically if you want to do live preview or official builder in content stack you basically have the content stack CMS with your entry editor that a lot of of you probably know and then your website sits on the site or in case of visual Builder it's the whole thing but it's an if frame and so we need to somehow communicate to your website that stuff is changing right and so because it's an iframe we use the post message Api which is like a browser native thing to basically talk to an iframe in a safe way so it's fully send booxed you cannot exploit it like the iframe cannot say generally what the website around it has to do unless you use post message right so it's security feature essentially and so what we do is content stack and the iframe kind of talk together through post message and we create a specific session hash just for you as a user doing that and the reason we do that is that everything you change without hitting save needs to be shown on the website right even though you might not even have the ability to hit save because of your profile or your rule sets whatever and so this hash is just for you and we keep a record of what you're editing even without saving to be able to show that and that's why we need it because we don't want anybody else to see what you're doing well there might be some features later on where you can do stuff together but for now this is how it works I think that covers the base right for that low yes I think so it's a good overview all right so now let's go into from how communication Works let's say okay now we're going to initialize and so you can already see a few fun um ways of saying stuff we see SSR here we see CSR okay so let's see what all this means so essentially on your website you have an SDK that runs in the client site that you call and you say content stack live preview initialize please and it has a bunch more variants and and features here and options but the most important one is to say am I in SSR mode yes or no and based on that difference the site will change or the behavior will change and so SSR means server s side rendering and CSR is client site rendering and as low is the technical product marketing manager low is great with work so do you want to maybe Define these two sure so server side rendering um is really good for when you actually need to sort of write to the UI right and it can be rendered and then you can cash it on the server um it decreases like your load time of your overall page for instance and you really it really excels in terms of like static rendering or dynamic rendering or streaming your data um whereas to client um sort of components or client signed rendering right this is sort of pre-rendered on the server and when you want to use JavaScript you can use it on the client side to like run in the browser for instance um and you can kind of think of client sign rering as like if you're going to for instance um write JavaScript or you need to take an input like if someone fills out a form and you need to grab that information from the form you would want to use client side rendering for that particular component it's also really good for like I was going to say really good for like browser apis like if you need geolocation or like local storage like so if you think of sites like I don't know like Zillow or any site that you can go in and type in an address and a math comes up that would be client side rendering most of the side yeah and in the context of live preview here I would say server side rendering basically just gets the data on the server renders it and then sends it to the user to the front end as a whole complete thing and you can do that exact same thing also from JavaScript without using the server and in this context maybe that's the big difference right yeah so you're essentially doing the same thing but you either do it with JavaScript or not in this context yeah and so um use something just happened to my screen I am back you're back so whoa this is very interesting so essentially I I think I clicked end on my keyboard so what yeah yeah new keyboard things happen so basically this initialized function saying SSR yes or no is sent to content stack and then content Su say oh let's get started I will give you back a bunch of information and so one is that hash that we just discussed that specifically for you that's all about if you use this hash we know in our draft API preview endpoint what to send to you once you're typing all the time and so with that it also sends you okay your your content type in this case might be a page but it can be an article a video whatever you want and the ID the ID of the entry you're actually editing and so it's sending this information back and with that your front end of your website knows what to get to actually show whatever you're typing in content stack live on your front end and so a super important distinction is even if you set SSR to true this content SE live preview in it function and this SDK that we use there is always a JavaScript function you can use it in the server but it just won't do anything it needs to be in JavaScript to be able to talk to the CMS through this post message thing so it's really a client side script so this is one of those where you can just bang in a script tag on the top of your page and it just works right which means if you have a PHP site or if you have a net website that doesn't have like this whole fancy nextjs JavaScript thing going this still works because you add a script Tack and it just talks to content stack and it runs yeah and I think sometimes people get confused right that like it needs to be either or but these things kind of work in a flow right you can have server side rendering but then also need client side rendering and vice versa it might make more sense to also have some SSR within even if you have a majority client side you know yeah thanks for complicating that but that's true next for example and n and a bunch of others they do both and we're show you a few of those differences and so once you're now initialized when the communication is there how does editing actually works right so based on that method that you chose different things can happen so you make a change in the CMS it sends that information to the if frame and so if it's this SSR So This Server thing it sends you the query parameters of your live preview hash your content type uid and your entry uid as query parameters on the URL and in your SSR script or wherever your codee is you look at the URL and say oh those are this is the information I now need to ask the API from content stack for to render my stuff and every change it's made every time it refreshes the page with that information you show it but you can also do it in client s side and in that case it's a little bit simpler so that live preview SDK has a listener that's called on Entry change and every time there a change is made the page doesn't get refreshed in the like the SSR mode but it just fires that on Entry change function so it's like a listener so that post message goes from CMS to the iframe and in that you can do whatever you want based on something that changed let me just update my content and then you can just do a fetch call or whatever you want to do or maybe talk to um the SDK to get that information back and so here's one important part we need to talk about as these two as the things are quite separated right so we have a contents that delivery SDK that always you can just query content stack through that and it just shows you a page you still use that in live preview you just tell it live preview is turned on and based on the fact that you say okay I'm in Europe so you said your region let's say to Europe or the us wherever you are and you say live preview is enabled the content St delivery SDK will just use a different API endpoint that is oh it's preview mode so let's get that draft stuff based on all that information information like the live preview hash and the content type view ID and the entry ID and it just kind of magically gets stuff from another place without you having to actually know that of course if you don't use the delivery SD but you just raw dog it on the API we will show that in a second you can still do that does that make sense L yes it does some some of our customers are just fullon we'll just it's an API right let's run and so we'll show you how that works as well and so that's all there is to it right it's it's not too um wide ranging in that sense but with this setup you can do a lot of things yes there's a lot of flexibility here exactly so maybe we should just start with the basics yeah let's get into it just for a second so right now I'm going to show you the most default one in N 15 with the app directory like most people will probably use and then here we have live preview on the side and there is no icon I probably have to refresh Where's My Life preview icon this is very interesting here it is I was in the wrong place I was actually in visual Builder nobody needs to know we'll we'll C that later we'll be back to that we'll cover that later yeah I was confused I was like oh no this looks so good where's that ion anyways so entry editor on the left website on the right this is an ey frame you can see it even has a URL so now when I edit something it adds it directly here and this is using currently client site so it's basically as live as you want it right you just do this and you see it literally going and so of course there's a few things we do so we if you still type it it doesn't do it every letter because that would be basically um denial of server attack our own server right that's too much so it it waits for like a few characters and then it just changes and so you can also like change a bunch of stuff up like for example here layout left or right and then it will just do that because whatever it's doing um this is now saved to the draft endpoint and it sends an event query that thing again please it doesn't even tell it what to do because it just stores it in that database and then the front end knows what to query so that's what why this works and that's is client side too right like because you're doing you're making changes you know essentially you're creating an input right and then it's listening for that and then it updates exactly you know what I might show the visual Builder now and then we dive into the code so you can see that it works this way but it also works this way and so now that we're in FAL Builder you don't really have that form here right well you can but you can also just click on the title and then start typing and now now this is saved you can see a little syncing here on the left bottom and this is now this is doing exactly the same thing as we did before in the entry editor if you want however you can say well let's open the form here so I can start typing here you see this is basically the same setup but you don't need the form specifically if I wanted to change this image to I think me playing guitar yeah I have that here that it just works in line I could have also just chosen the file in the form and then do it that way right so this gives you more flexibility and on top of that if I wanted another block and just hit the plus button make another block and run and so those kind of things are really pretty interesting and I'm going to ignore that error for a second by the way we'll look into that after the stream yeah and the thing about visual Builder right is like this is something that really is sort of live preview and hyperd drive right and it also gives a great experience for editors in terms of if you have these pre-established you know blocks then the editor can go in and choose and add a new one without ever you know sort of involving us as a developer because we've already created these things yeah and that makes this like a much cleaner experience and also one thing that we tend to forget when we talk about this let's say there's a reference somewhere to let's say another thing if you click on it here that form changes to editing that reference so you don't have to refresh the page and go there that's a super interesting thing as well it's a time saer right yeah exactly so I'm going to exit this because I changed a bunch of stuff um let's have a look at how this all works right so um let me just make that full screen so this is just nextjs out of the box normal page and so I have this so this is the one of the simplest ways you can get this running and so there's a lot of explanation here but without it like this is about it this is like 50 lines of code in total and so what we do we have we have a bunch of environment variables with information about our API keys and such you can figure that out on the docs and so we make our content stack stack so here we're using the delivery SDK so this stack we can now use to query like give me this page or give me that thing so you set it up right and here live preview is enabled and of course this comes out of our environment variable so enabled here and so now the content stack stack that you are querying knows oh there's live preview and then you can also even give it you know um the preview token and so combined with the token and that hash that you send and then of course there there might be a host that you want to set because I'm personally in Europe if you're not in Europe it goes to just a different place and so if you you don't if you're not in Europe but you're just on the default you might even do this and it just because you're actually setting the region where you are this stack knows what direction to go to query your stuff even in live preview mode this and you can see the host is actually different like there's now rest preview content.com or in this case in Europe but normally this if it's not preview it's actually just our CDN CDN yeah and so the the delivery SDK kind of just deals with that for you but because I'm in Europe I actually had to just set that up this way so this is now our delivery SDK is now ready to query stuff from the live preview endpoint instead of just the CDN to deliver normal content and so then we have this little function that's initializes the live preview and this one is the one that is loaded only in the JavaScript on the client side and so we'll show you in a sec how that runs and so here you can just set this SSR thing that we saw in our slide right here let's see if I still have that somewhere uh that's this one that we looked that uh let's go back to the code here um and there there's a bunch of other stuff you can actually say you know what I want to load this stuff but I want to disable it for this instance maybe when I'm on production or whatever and then there's just a few other things like we don't have to talk about those now they're all in the docs and this is also annotated and then there's just a simple function to get my page and this is like we're talking to the stack to give me a page for the URL homepage and it gives me the stuff so those are the three functions in this case that you need this might not be production stuff but this is at least the minimum that you need so you just put this in your context run this is the basic functioning exactly and so when we go to the page itself we get the home function right and so if we go to this the browser here um well we can just go to Local Host here so that's that's basically rendering this page here um what we do is because we are in client site mode right because SSR here is set to false of course nextjs has server sight and client site mode or CSR in one but in this case we're using the live preview we set that to client side live preview and so what we have here is initially we have a state for the page and it's initially empty and so when we use use effect this is basically like my document is ready JavaScript run and as you can see there is use client here so this means this runs in the server and in the client so this this hydration thing happening right and so sorry go on L I was just goingon to say it's really important to remember like just because you have client side um denoted it doesn't mean that it you can't also use server side I think sometimes there's confusion about if you have used client then that's all it does it's just saying we want this available exactly so this basically means also please hydrate it with some JavaScript that's what this kind of does and that's why we can fact and that's why we can use the state F and so what it does and content stack the moment you load your entry page so the moment we go here to this entry it sends this event that we just saw so it sends this on Entry change directly just the moment it loads you open Live preview this is what it sends and this is actually a function get content which actually does this get page function that we just looked at right this one so I'm getting the page for a specific URL which in this case is just slash give me the homepage please and then it gets that information it sets the page but because live preview is turned on the stack knows oh I'm going to go to the preview API now yeah rather than the CDN and you also of course have initialized live preview on because we are in in a document ready for the client and so this now the whole thing is just initialized and it waits for this function it gets the content renders the content and there you go and then every change you do it goes through this one again gets the content but that page for slash has upgrade has updated because you change something and every change you do this is fired and then it just renders the page it's the nature of react basically it's reactive to whatever change you have um I think this is the basics for when we do CSR is there anything else um L except for saying hi to Angie I know hi enie very nice to see you thank you so much for joining one thing I think that don't forget to initialize preview to get and preview token inside of the content stack app um sometimes you get through all of this we have to talk about this you're so right yes you go here and your go to live preview and you say well for what environment do you want live preview because content stack has multiple environments I can just make 15 of those with different based URLs for different locals for example right and so um for this one we can go to tokens yeah so we have the delivery token for preview and this also has a preview token now because we turned on live preview this is actually fital so thank you love for pointing it out you have to turn it on yeah it's just uh from a level of pain I've gone through all of this and setting it up and then I'm like why isn't it working I because I totally forgot to initialize it inside of the exactly so we say to our stack for this environment that we're dealing with and the environment is actually if you look at it we look at our code and we go to the inst instantiation of our stack we say environment here right and for me it's in my environment variables and here it says preview and so this can also be production it can be anything you want development stuff like that and so for this preview we have a a stack API key a delivery token for the CDN delivery stuff and a preview token for the preview API endpoint delivery stuff and so with all this you start to get this type of magic and so essentially now when I change it it goes through um those uh functions that we just had a look at right so it goes through oh we just made a change well let's get the content and the content then reeners and so I think with this we have the base in place let's now look at what this would look like when we have SSR mode rather than CSR mode yeah okay so we doing okay on time so far I think we're gonna first one took a second right when we had to talk about it a bit more and then now will should be good but let me just render rather than this one I'm just running it locally now so we can have a look so local uh for now so let's go to SSR oh that should interesting oh I think this is it we will get there I promise I made so many so it sometimes it takes a second to find it SSR here we go are you were you ever like a constant LS like listing where you are or PWD like where am I yeah all all kind of these ones or we have this one or we can do it like that right yeah that's my jam all right um so actually now it's SSR mode right so let let me go quickly back to Google of Google so I mean Chrome let's just reload this one so now this does exactly the same thing it loads this on the same URL and this website also looks the same but look now it says SSR mode detected for the people with a key9 you could just see that so it says Hey SSR is true now so now when I change this well it still looks like it's instant because next GS on this thing is super fast and our API is super fast but this effectively reloads the page and you can see here are these three things we talked about in the beginning in our slides right so this is what it's sending back to you so in an SSR mode we have these things to be able to refetch our stuff well that's what happens here so I just took the liberty to just put that in the website so you could see it but this essentially when we actually have inspect can we do inspect here yes we can so when we look at the iframe oh that's really slow for you I apologize small for you but you can see in this URL when we let's just open this in a new tab this is what it's loading live preview hash content type page entry ID is this and so with these parameters I can now query something again and so if it's not client s side so it's it's slightly less magical you have to do a little bit more work but so the only thing you have to do when we go back to the code like you can see in this one the page doesn't have used client like the page is just an fully servici side rendered page but you get your search bars so we get live preview and all that so what you basically have to do is if live preview hash exists you just tell your stack this is my live preview query this is what I got from the browser from content stack and now the stack knows what to query again and then you just load your page exactly the same way the function is identical as we showed before and then you render your page and so we still needed to inst you know initialize live preview here in that client right that little script tag so when you look at how react wants to work we just in our layout that renders just the basics there's also a little fun little component called content stack live preview and so that component kind of just like okay I'm use client here so I can use the use effect so when the Dom is ready and I'm ready to go my life preview is enabled let's do this init live preview function which is identical the previously but SSR said to true that's the only difference here right and again you see CSR and SSR working in tandem right you need the client side because you're taking input from the live preview component but then once you get it you can then put it into your server side rendering by just calling that component exactly and the funny thing is this is this whole file is identical other than SSR set to true the page became a lot more simple because we don't have a state we don't have to listen for events none of that we just get the page and then this get page function asks the stack give me this thing and we also tell the stack this is my live preview information and with that we run and it works um so there's not that much different here and other than in the in the in the you on the HTML here I'm just putting this in so you can see what that hash looks like right right I just did that for just you know for clarity let's see can we show that here to show what you did and visual experience like the Builder works the same way so I can just hit this and edit stuff and it actually just refreshed the page just now but this API is so fast just kind of work can't see it yeah yeah of course if you have build bu a website that's slow you're going to see the refresh happen this is this is just a fact of the game it is what it is um so now there's a few more things I wanted to show so we're half an hour in and there's actually there's a few more ways we can do this so I can just let me open the folder so in here I'm hope this is big enough you can see I made a bunch of variant we don't go into all of them I promise I promise we won't but so we just did the normal next one with CSR so the client renderer we did the one with SSR but there's a bunch of other ones like people do sometimes still do like the Gatsby approach right the G right the static yeah yeah so we have static rendering and static rendering looks basically identical to um the stuff we were just looking at with one or two extra things so let's just do this one quick because I do want to talk about graphql and if you have a middleware in between so if you don't have our SDK that's an important one we also should get to so let's first quickly get SSG out of the way so in this is the interesting part about static rendering a gam stack site within next because what it does is by default on the build let's say in content launch or in for sale or wherever you run your website it builds all the HTML Pages already so when you go to the website it serves that static HTML page is already created but there are scripts on it to do a hydration step to add JavaScript on top so when you click on a link it suddenly just becomes a single page app that is fully clients side rendered does that cover it L I think so yeah otherwise it's basically the same yeah exactly and so you have the HTML but you hydrate it and so in visual Builder or in live preview you can set this to client site modes because it has hydrated the page so one once it's loaded once it becomes a single page app after it fully client JavaScript so what you can do is the only big difference we see here is you have this get static props function and get static props is used by the build to get the initial information from your fetch from your endpoint to render the page and so get static props will just render it and then add this data as props to your index function and so I have the page here this is all the Json that I need for the page already because it it did that before and so now when I go into hey in client mode I can just set the default page State already to what I queried here which makes this very simple because this will render the Page by default because it has the state then when you make a change in content stack it fires that get content thing again which gets again same same as here the page from the the live preview endpoint and sets the page so the state is now updated and it renders so the only difference is we add this thing yep and I think that's a that's that's the base of it there's not much more here yeah oh and by the way for this example for fun if I zoom in you see I Ed the pages API rather than the app directory app router yeah I did that just because I could because some people still use this one so we need that example as well yeah I just love that router so much and we're so used to it right and then you can do the revalidate thing and all that fun stuff that we used to do with ISR and when it wasn't yet like it's then you have to document in the app thing this is still a little different but I wanted to do that one also and of course when you use app directory you can still do the static stuff I would suggest you might just want to do a cache so you don't have to do the whole static but sure you can still do it like it's still alive there's many ways let's go into something that's slightly more complex because sometimes four years ago you built a middleware endpoint that queries content stack for you and then your front end has no idea about content stack it just wants to do something with the data it gets from your middleware well with that you can still do live preview and that's what I want to show right now yes let's get into it so this goes slightly deeper so let's go one back and then instead of SSR we go to middleware so this is running now um let's just quickly reload the page here and see if that starts to work and in middleware it's also SSR so you'll see oh SSR mode enabled and so this now essenti works exactly the same as we saw before but it now queries a middleware layer and it doesn't use the delivery SDK at all and so this is why for sometimes this seems like hey why is it so Overkill why do you have so many variables and things going on well this is the reason because you can have built this in PHP use this little initialized function for the live preview and it all just works like magic so this is basically very similar to the SSR setup that we had you can also even see in my layout there's again this content deck live preview component component that runs the init Life preview and if you look at that one it says SSR is true in this case so this has to run in SSR mode and so when we look at the page it's really quite similar it gets search params but it doesn't have the stack because we're not using the delivery SDK right right so we need to somehow tell the stack or well we don't have the stack we have to tell our API please load this stuff from the preview endpoint rather than the normal CDN endpoint so we now have to do that by hand where normally the delivery hdk would just do that for you and so in this case I just coded a little bit of stuff for our um example here like if I don't have an entry uid I'll just hardcode it this is just for this example so what this does by if if we're in live preview uh let me show you here you can see it has these three right again um I also made this work for if you actually um oh if you don't add the query parameters it still knows what to load that's what basically this if this doesn't exist let's just fall back to something back right yeah I just had to code this in so you can also use it without live preview anyways we have again a get content function but in this case it doesn't talk to the stack and say give me the page instead it just does a fetch to any URL anywhere and so if this live preview hash exists right if I do this and um oh it opens in a it open you already have it my bad that's my own fault let's just refresh if this exists it will now actually be able to say okay let's go to my API middleware this can be any URL by the way I just put it Local Host now my content type uid my entry uid and my live preview hash with these three things I can query the content deck API and get all the information that I need just this is exactly what our SDK does internally we're just now doing it ourselves and if there's no live preview I'm just not giving the live preview hash and so let's have a look at what I made here so this is just a simple route again this can be your that endpoint somewhere you can build this in go whatever you want rust maybe do Rust I don't know maybe maybe not moving on moving on so I just have a simple get function in here for the next server and um so essentially what this is doing is like okay let me just grab the URL stuff because to be able to know what to return I need to know hey is this a page what it's is it ID and do I have a cash for live preview yes or no and so what you basically do is you make a bunch of headers in which you say okay I'm going to you know do this in Json my API key is here my access token and my preview token is here as well and then you just make a host name and in my case if there's no live preview if I'm in EU it's going to be EU CDN content stack.com and if you're in the US it's just CN cdnc content.com this is what the delivery SDK normally also does for you we just have to to do it by hand now but if we have this live preview hash then you just add that hash as a header again and then you change the endpoint right you add rest preview content.com or the EU version of it and then well we we need our environment but all that comes from this this same thing here right and oh and then you concatenate together your host name your API endpoint for my page with this ID and for this environment this is preview in this case and then you just fetch it and you return it and what this is we talk about in aack when we talk about visual Builder so what this returns is exactly the same as that function we just saw like get page with the stack give me the page for this URL this is what that returns and so we basically built our own little delivery SDK in a node GS headless how do you call this like a serverless function or something function yeah and I think with this right um it can be a lot if you try to do your sort of custom middleware right it can be a lot to maintain but can you sort of explain like what are the reasons why you would choose to do middleware for instance in lie of the other options were shown because it could very well be that you have to query 16 services to get one page you might not only need content stack which means you might have built a middleware layer where the website say give me some information about this whatever events page that we have so the middleware then says okay let's go to content get this little bit let's go to another service that has all your event data let's get that or my payment stuff get from there make it into one lovely piece of Json and send it to your website or sometimes you might want to avoid a lot of API calls to content stack and you want to cach it yourself because you might have some rules for your from your it team that says we cach our own data so we don't have to talk to content stack all the time I don't know there's many reasons why you might make your own endpoint maybe you just don't want to use our SDK and you want to do everything in Rust yeah could be right and so there's a myriad of reasons why you want to do this maybe sometimes you don't like the stuff that comes out of content Stacks as in terms of its structure you might want to capitalize the title well then you do that in here I say maybe that's not always as good to do but you can definitely do it and then if you wanted to still live preview you just get that information from content stack from another endpoint and that's literally the the only thing you do is now if you have built something like this without live preview you're just getting that information from here the CDN yeah if you want to do live preview you just get it from here with the preview in it and you add a few headers and you're done so if you're your middleware layer has flexibility to say well in this context I'm quering it from this URL and in that context from that URL you can Implement Life preview yeah and I think this highlights a like really important aspect in terms of planning out you know how you're going about your builds so thinking about your overall architecture right and how many different data points you might have that you need to bring into content stack can help you figure out what method you really want to use like Tim was discussing earlier like if you have middleware because you have all of these different endpoints that you're quering it makes total sense that you would choose a middleware option yeah if you're only having a singular sort of query that you're fetching from it may not make sense to use middleware unless you just want added security right but that's up for you to decide but you need to like weigh all of your options and think about your overall architecture and environment yeah and there's also this interesting thing of like if you're historically used content stack as this super headless CMS of course right now we're much more right but back then we just did that really well so you might always wanted to have build a middleware because that's just the way you build it five years yeah totally fine and so um you also have a ton of people that we know that other departments in their um organization like an IT team would build a middleware and all the other marketing teams would just talk to that middleware so you have like a lovely scoped thing um I think if we want to finish on time I will quickly show how this works with the graphql and then after that we have there's a few things we need to talk about for live preview in visual Builder because how does this thing know when I click on on the title that it edits the title right there there's some magic there that we need to talk about so let's first quickly go to graphql we we'll go over it quickly I think we can do it it's not that different but we do need to um show it yeah there's some important distinctions yeah there there's a few things you need to know right so let's open the folder for graphql and so um the graphql one can also just work with client s side or with server side both is fine and you see this looks very much similar un of course the only thing is when you qu get the page you don't actually use our deliver SDK but you just literally send graphql query and so when you look at the page of this this is literally identical to most of the stuff we show today right with on Entry change the in a live preview the setting of the state this is identical so the thing that's a big difference is is the following get page doesn't use the delivery SDK so in a sense this looks a little bit like the middleware we're just looking at yes but there's a little bit more magic that help you because when it's in client side mode that live preview hash you just get it as the OB on the object of the content St live preview SDK you get that for free you don't need to use the query parameters on the URL you just have it because that's the context of the of the the live preview in client site mode and so of course normally when you query graphql you have to go to the graphql endpoint not the rest endpoint but if you have preview mode set to True which is this one and you have that hash so we're in live preview and I want to do live preview stuff because of this environment variable I'm going to be loading graphql preview content stack.com which is identical to like that rest preview content stack.com but now it has to be a graphql endpoint because it's going to give you different information and so you always have to give it your access token in the header but if you have that hash you also have to give that live preview hash and the preview token preview token y you see how close this is to the middleware thing and so super close yeah you basically just concatenate your graphql endpoint with the base URL but you see this is a slightly different endpoint thing and now you make a new graph ql client or you use Apollo whatever you normally do and you do your query and then it just works there's one gotcha though but we need to talk I think that gotcha we can talk about when we talk about the official Builder what do you think L yes I think so because it'll will connect it it'll make I think a little bit more sense because this just queries your data returns and you render your page as you would normally um now this is a lovely bridge to visual Builder so when we look at this thing again when you click on this how does it know to edit the title and when I do this how does it know that that title changed and how do I know that this happens or in fact how does this know that this is a rich text and therefore I can click edit all the fancy rich text how does it know this is an image so I can replace it in a fancy way so there needs to be something in your HTML that our live preview SDK can attach to to know what is the field I'm dealing with right and so for that we have a very fancy function and so um let's see where are we now let's just go back to the normal next one so we can show you some stuff so we're in the code now we're running it okay zoom in a little bit so what we have and I'll show you that in our HTML actually this thing has some metadata attached to it and so you can see that here I'm not sure if this is big enough let me Zoom yeah zoom in a little bit tiny little bit what you can see here is there a data content stack live preview so cslp my page my my entry uid my language and the field so now because we have a data tag here on the HTML the JavaScript of the visual Builder knows hey this is that P it's a page type with the entry u ID that I'm dealing with which is this one and it NOS it's the English version and it's also the title Field title now when I click on this it knows oh I'm editing the title field right because when you open let's say the form it knows I'm editing the title field like when I select this one you see it focuses the description and so that's how it knows what we're connecting right and you see it changing to changing that ban too like is it edible now yes they clicked on it exactly and so that's a pretty nifty way to just tell the system what you're dealing with and of course in production you just don't render that bit and so how do you now get that stuff that's where it gets important right and so what you can do in your get page here we do all the same stuff but if live preview is true we have this content stick utility that's called add editable tags and so what this does it will enrich whatever data you get from the stack query with all this extra metadata and so I think the best way to show you is literally just to put it as a Json in the page yep so let's do a pre- tag we can just dump it all out exactly so we stringify our page and then we just do something like this and just in case folks don't know what is the stringify oh this is basically just I have a bunch of Json and I want to make it look um as one string rather than a JavaScript object that you can use I just want to show that that whole thing that's what string IFI does you also have a parse function so you can give this Json or you give it a string and it tries to parse it as Json so you can use page. Tile For example uh let's say did we just do this how it's maybe easier to just go like this and so what it just did is it this is basically our whole page right and let's just go and find the title here let's see where do we have the title and there here here we go there it is um this might not have been the best one to look for um there's just like okay it's is actually relatively easy so what it does it adds this dollar sign and for there's this dollar sign in the root now and then there's the title field that we're dealing with right so normally it would be page. tile and that would just show our title which is in this case our title but page. doll. title will show you data CS willp is page. ID language block title so in this case it's actually the title of this block it's this one yeah that's what this is showing and so what you now can do you just have to what you want is that the the HTML for that header one or whatever that title is has the attribute data csop equals this so you want this as an attribute on your HTML so when you look at your code and we look at that title you can just say and this is lovely about react you can just do this and say okay do I have a dollar sign on my page in the Json yes then just EXT like do this and say page dollar title and what comes out is the following so we actually go all the way to that title and then inspect what that does is the fact data DP equals that whole thing that's the stuff we just saw here right this stuff yep and so it just adds it and that's all there is to it and if you wanted to do slightly more for example um for let's say a block so we have modular blocks here so we have multiple blocks that we render these blocks there are two blocks so I just do a mapper I Loop over the blocks and I render them so what that means is um for each block I render a div you just use the map function in react essentially and so I do a whole bunch of things if the image is left I do a different CSS class and also here I can just say for each block I want which number of blocks it is right so we have block one block two block three and because it knows which number this is when we go back to the browser you suddenly get um let oh we in we're not in visual Builder you actually get these plus buttons because it kind of just knows hey this is this is this is a few blocks so when you also look at the form for example for this one um let's just go to all the blocks here you see it also knows it's multiple blocks so when I can hit plus I can do it here you can add an additional block it here and that also means because it knows these numbers I can just move this one down and the other one up for example and so that's like a lovely extra thing and then you also have one that surrounds the blocks so you can when you hit edit that you can just do everything with all your blocks right and if you don't have any blocks it gives you a button to say add a block please and that's what all this meta data basically does for you and this this stream is not long enough to really dive into what all these um properties actually do but you see it's relatively simple and so I'm looping over my block itself and my block image has block dollar image you see the block itself has a dollar again and so if it's normally block image URL you can actually do block. dollar. image. URL and you can edit the URL or in this case I just click did image because you might not want to edit that URL specifically by typing it you actually want the image itself so the whole object so you can get this lovely stuff right up new stuff like that and so that kind of is the gist of how that works and maybe in the last five minutes we can have a look at how that actually works with graphql because there's a gotcha there yeah let's do that I think we we've got like five minutes we can can do that so this is the next one let's see I think this is the graphql one yes so let's talk about that image that we just saw so in my schema I have title URL image right but an image is a separate thing so when we go back and we have a look at um our data model the page has an image here right but images live here so right if I add an image to my thing here to my entry this is actually a connection it's making to that assets folder right a reference this is a reference to an image and what we've done with our rest API we've just simplified it's just dot image you get all the information about the image but in graphql you have to follow the spec of graphql and the spec of graphql says image is a connection so each connection has potentially multiple edges or one edge with multiple nodes because this could be 25 images and then this one would have an edge with multiple image nodes in it and that's just how graphql works so what this means is you're getting this image connection edges Noe get the first note get the URL that's how I render the image but live preview thinks do image is all you have right right so when you want to update your image is just image dollar URL in this case or just image dollar or whatever that comes out here so basically it thinks it's image not image connection connection exactly so um this is where you have to do a little bit of flattening whatever you get out of um graphql this is something we're working on but this is just the current state of it so what I've built here is I have the full page that I got back from my query right so everything I want to render my page is in here so what I do when I fix it for editable tags I just say well initially just give back this whole thing so there's just this thing is just this original query but I'm adding some stuff on top so rather than having to do image connection edges zero Noe to render my image I just say my image is this thing so I've simplified it to do image page. image is now this whole stuff which means I can do page dollar image and now I can inline edit it and the same goes for the blocks because blocks have images too right if we look at this one in my modular block here I have an image which is again a connection so I have to go over all my blocks and then for each block I return whatever the block is but I flatten the image so I say image is actually block image connection edges note it's just that note that it has here which is the title in the URL I believe is now image and now everything starts working and then additionally on the root of the object it needs to have the uid and the content type like this and in graphql you get them from system in rest you get them on the root and so essentially our live preview for visual Builder is really at the moment really catered to if you use rest and it's not per say a bad thing this just works fine so what will likely do is this add editable tags thing that we have here right now it adds that dollar metadata stuff to also to this image connection stuff so any reference you have it just adds the dollar to edges no we don't need that we just need it to image and so this function will at one point soon get an update so you don't have to do this whole Magic right because essentially what you're doing there is data mapping right you're mapping page. tile to image connection Edge node and then all that stuff yeah so you essentially get all this stuff but what you what you actually wanted was this right this is what you wanted this is what the rest API would output what graphql outputs this so we have to map it to this essentially that's what that code is doing and so this is just an extra step you have to take for now this will if it's up to me and it probably is be solved fast oh boy I just spoke for one whole hour I know but it was necessary we covered a lot of ground we did um we didn't get too many questions we did have a bunch of our friends actually show up which is super lovely and I really appreciate that um this stream we will cut it up and put this on the documentation so if you have any questions you can just go there but we'll also have a Discord server so maybe loow how about you do the do the honors about Discord yeah so we have a Discord Community please join we have lots of events planned we're actually having open Office hours um next week on Wednesday um where we will talk a little bit and then we're answering all of your questions so if you have any content stack related questions um please come on in the Discord you can hop on audio or video and we'll talk to you through whatever questions you have and the point is that this is a super safe space so any question you have we're just here to experience that with you you just saw on the screen we had a few errors right this is part of the game we learn in public everybody's together so these office hours are really for you the Developers our community to just ask anything but also maybe you want to show some stuff that you did maybe you found a really a much nicer way for graphql to work than I just showed you right so that's an open forum for everyone um yeah that's about it I think next week there's another um open Office hours and then the week after we're all in Austin so we won't have a live stream most likely but we'll keep you posted on socials for everything yeah we'll see what happens let's see do we have an outro let's see let's see we have an outro all right cheers everybody thank you so much for watching bye everyone