Improving the Database Experience of your Deploy Previews with Xata

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

JASON: Hello, everyone. And welcome to another episode of Learn with Jason. Just kidding, it's Bopping with Dom, it's not Learn with Jason.

DOMITRIUS: I wish it was music in my headphones that made my movement make sense, but there's totally not.

JASON: Hold on, I can totally do this. Wait. (Music playing).

DOMITRIUS: I'm telling you, devs that dance would be a really fun show. I'm just putting that out there.

JASON: That's enough. Sorry, I missed everything you said because I was so loud in my headphones.

DOMITRIUS: Devs that dance would be a great Twtich stream.

JASON: Maybe for you, I don't know if anybody was watching what I did, but I don't know if you call that dancing.

DOMITRIUS: They want to see. They need to see the awkward dancing of someone else to feel comfortably, like comfortable enough to awkward dance in real life. I think you're right.

JASON: So welcome to the show, everybody. I don't know if we're going to get anything productive done because I think this is a solid signal of what's about to happen here. DOM, thank you so much for being here. For folks not familiar with you and your work, you want to give us a background?

DOMITRIUS: Yeah, sure, for those not familiar with me, congratulations. You've gone this far without having to know me. You did it. Now, that is ruined.

JASON: Condolences.

DOMITRIUS: I'm a career transitioner myself, I started about 7 to 8 years ago now with just absolutely wild, to think about. Bootcamp graduate, retail for ten years, spent the first three to four years doing UI development. Missed being connected to like the people that I'm serving. And like, in frontend roles, it takes a while to get while to get that connected to that. I didn't want to wait. I was doing community stuff and a dear old friend, I think his name was Jason Lengstorf said why the hell are you not being paid for doing the things you enjoy? And so, transitioned over into devrel, spent last year at Netlify. And now, I am the head of developer experience over here at Xata.

JASON: What a wild ride that is. And congratulations on the new role. I know you're about 3, 4 months into that.

DOMITRIUS: 4 months in, yeah.

JASON: Nice, nice. Well, cool. So, you know, you and I have known each other for a long time through different adventures. The last time we had you on the show, you were talking about Cloudinary.

DOMITRIUS: Yeah, I think that's the last time.

JASON: We're not talking about images, we're talking about data. So let's talk a little bit about what that means. So data, in general, I think, is something that is pretty it can be overwhelming and intimidating, especially to somebody who spends most of their time in the frontend. And it feels like recently, at least, we've had a good, like, influx of companies that are trying to make data less challenging, right? Like, there's a I'm not going to try to do the name game because I'm going to forget most of them. But it is cool to see that so many companies are starting to show up and saying, like, hey, you build for the frontend and a lot of what's happening in the world on the internet right now is, is heavily frontend. Here's a database solution that doesn't require you to SSH into anything or understand how to manually migrate things or in a lot of cases even know how to write a SQL query, you just have to be able to use JavaScript and typescript and we're going to do that part for you so that you're not you never have to learn what things, like sharding mean. Or, you know, whether or not that's something that I said that should be censored on this show. [ Laughter ] Like, it's just there's just so much of so much of that world that I don't understand at all. So I'm very happy that these companies are coming. And so, Xata is one of those companies. So do you want to talk a little bit about the, like, what is Xata? And what is it here to help with?

DOMITRIUS: Yeah, to touch on a couple of the points, too, I think the landscape of databases, serveless databases, data platforms, there is this really cool influx of different ways to do it. And I think that is the coolest part for me of getting to Xata.

JASON: Mm hmm.

DOMITRIUS: I got to come in as customer zero as its peak. I am not a database, you know, developer, engineer, Admin in any sort of way. I've used databases throughout my career, but I've never been the one managing them. Why would they trust me to do something like that? So I think coming to Xata, it gave me a chance to, A, kind of see a little bit more of the landscape. I'd already played with, you know, Planet Scale and Supabase and other names you hear in the data space, and even, you know, using Amazon for their database. Like, I've seen enough of the landscape to have an opinion of what the experience should feel like when I got to Xata. And so, I think when I got to Xata, I got to dig into, like, how does this feel as somebody who is coming into this landscape? As somebody who has not graded data modeling or connections through tables and joins and primary keys and all of this kind of really daunting information to learn? Kind of gets and that can be a good and bad thing. But kind of gets taken out of the way for you to get up and running quickly. I think Xata does the best job at starting someone from scratch and making them feel powerful with the database behind their application. And so, like I got to experience that firsthand, as I said, customer zero. So the UI is great. And I think a lot of people focus, every time I talk to somebody in public, it's like, oh, the spreadsheet, UI, looks like Airtable, that's great and a good comfort zone for somebody like me who maybe doesn't know databases so well and can kind of move around this application and feel confident with what I'm doing. But as I dug deeper into actually building stuff with Xata, I got comfortable with the CLI. I got comfortable with the SDK that we generate for you. And I started to realize that, like, I'm actually building a database. I'm confidently building with data, I'm confidently and what we're going to dig into today. I'm confidently able to ship a new feature. One of the big things for me, that's where Netlify won is they have this really great ideology. And honestly, a lot of the deployment platforms now have this ideology of removing friction from collaboration. Because that's the hardest thing that we face day to day, and we're uniquely positioned to do a really good job at that, not only our database offering and the UI and all of that. But being built on top of Elastic search and not having to reach for another tool to do your fuzzy searching, you semantic searching for AI. Gives you a lot of powers that most, like, developers don't have out of the box unless they've been doing it for decades plus.

JASON: And I'm excited to see how this plays out because you just said several things that I have no idea what they are. So I'm really looking forward to learning about these. So you mentioned a couple of things being baked into Xata. And so the, you know, there's that old joke that if you start working on something that needs data, the first thing you have to overcome is why can't this use Excel?

Yeah. Because really, at the end of the day, Excel is probably one of the most full featured database offerings out there, right?

DOMITRIUS: Yeah.

JASON: What do you think are the major differentiators? Or actually, let me back that up, before we talk about that, let's talk about like what are the scenarios where Xata is the right tool? What are the points where I should think to myself? I'm building X. I should reach for Xata.

DOMITRIUS: For me, off the top of the head, and this is like every, every tool is going to point you in this direction. But I think e commerce is an obvious, easy win for us. Being built in with filterable data searchability, and also, just being able to ship into new UI features through our kind of like new workflow that we've built really gives a lot of confidence towards building e commerce applications, especially when you're a smaller team and getting started. Honestly, every app at some point needs some search and I think that we, you know, one of the biggest players in the game has been the absolute winner for a lot of the at least the Jamstack space as far as trying to find a search solution. And I think it's really cool to have that built in, you know, into the SDK and usable right off the bat. And it's really easy to put together. I think one of the really cool things that we do with our SDK is that we don't assume a ton of knowledge as a like a database expert. We just are like, here's a really great generated typescript client. We'll do a lot of the heavy lifting for like the methods that you're going to use, the way that you're going to boost fuzziness, and in the UI, which we'll get to see when we log in, we have a tool that generates the code for you based on the search that you put together in the UI. So if you're in the UI and want to build out this really great fuzzy search dedicated to X and Y options, we'll generate the code that you can literally copy and bring into your app and you have search built on top of your data right out of the box. I think it's one of those things where removing friction is the biggest thing I think Xata does. And it may not be the selling point of Xata, but for me as customer zero, I don't feel I don't feel nervous to get started with building something full stack that has a database now. And I think that before

JASON: OK.

DOMITRIUS: Using Planet Scale, I always was like, I never use SQL, right? I never was a SQL writer. I can go to Chat GBT and generate SQL queries I've used before to use inside the console, but I always felt like there was a stopping gap of knowledge that I had to consume before I became an expert at using some of the tools that I use in the space. And so, I think we do a good job of removing that friction. But it also, on the flip side, right? If you are a database expert or at least have experience writing SQL queries and stuff, that might be something that you're feeling is missing from our platform and something we're working on, actually, right now, to meet you in the middle of. I think we're good for that developer finding their way in the data space. And for developers who are educated on the development of databases, like, we take a lot of the headaches away. I was talking with Voss in San Francisco and looking to build something for a Chat app with AI, and there's a ton of resources how to get started with PG vector and how to manage embedings and this wacky AI stuff. I was like, hey, try out AI, I think it removes that friction. And he was able to get up and running within a day and basically, start building the Chat app because the heavy lifting was out of the way. He now can focus on building just the thing.

JASON: You've mentioned two different things about AI here. Is Xata and AI is it an AI database? I'm not quite sure I

DOMITRIUS: Yeah, we have compatibility for storings and embedings and doing the ask endpoint, which is using vectors and embedings to piece together answers based on your own data sets. Chat GPT is only knowledgeable from 2021 and back. So if you have new documentation or new, you know, ways that you do things, that's completely lost to the space of when it was fed. We let you bring your own data in and then train the chat bot on your data specifically. So a lot of documentation sites are popping up with their own kind of like ask our docs workflow. We built in a feature recently that supports that. We're not an AI database, but we definitely have the offerings of being able to support that type of workflow.

JASON: Gotcha. OK. Cool. And you also mentioned something, which is one of my favorite words, which is fuzziness. Big fan of fuzziness. I seek out fuzzy things in most of my daily life. And

DOMITRIUS: That's why we're here.

JASON: It is why a quick aside here, there was a side chat happening in the on Twtich here where, first of all, we got called handsome.

DOMITRIUS: Oh, my gosh, you stop it.

JASON: And then, people started suggesting you should shave your head.

DOMITRIUS: Shave my head?

JASON: Because then we'd be twinsies.

DOMITRIUS: I want to show the before and Jason can be the after. [ Laughter ] See, people also don't know about the picture that was taken on our All Hands where we had absolutely no reason to be matching and we looked like father/son.

JASON: Exactly the same outfit. That was not good.

DOMITRIUS: We need to post that. The world should see that father/son duo.

JASON: I don't know where that went, where it is.

DOMITRIUS: I'll find it.

JASON: OK. So, what do you have in mind for today? What do you want to build today?

DOMITRIUS: So, we're going to keep it pretty light, use next.js to build out a blog and then, we're going to add up to each of the individual blogs. We won't dig deep into error handling or any of the flush you would usually build in for this. And usually, you would have an upvote that would stop and you'd be able to unupvote it. We're going to do unlimited upvote.

JASON: Can we take a minute that Dom called it fluff. He was like, air handling, fluff.

DOMITRIUS: Yeah. But
[ Laughter ]

JASON: The unimportant stuff in the app.

DOMITRIUS: Let's not act like that's not the truth. Like we don't get the thing running and then we build in the niceness. [ Laughter ] Suspense handling, error handling, that's all for after.

JASON: I gotcha. Yeah, that's all later. That's, you know, that's after we find

DOMITRIUS: When you hand it off to someone else and you're like, look what I built. Isn't it so cool? Make it better. [ Laughter ]

JASON: I know that all too well.

DOMITRIUS: You work in DX, we don't how to code, I thought you knew that. What are you thinking, dude?

JASON: Yeah, Ben in the chat said that's future Jason's problem.

DOMITRIUS: Thank you, Ben.

JASON: For future Jason. OK before we go too far down this rabbit hole, why don't we switch over into the pair programming view. And I'm going to do one of these buttons before I do that so that there we go. Here's what we want to be. And this is this episode like every episode is being live captioned. We've got Diane here from White Coat Captioning helping us out today. And that's made possible through the generous support of our sponsors, we've got Netlify, NX New Relic and Pluralsight kicking in to make this show more accessible to more people, which I very much appreciate. We're talking about Xata today. Actually, before I do that, let me send everybody a link to home page. I don't know, just in case you want to look at it. And then, we're going to go to Xata search Xata. That's not it. What just happened? I like searched my own website with that. Fascinating.

DOMITRIUS: SDK, baby.

JASON: Arc sometimes helps and I don't understand how it helped, it just does a thing. And I'm very confused. Anyways, I'm at the Xata website.

DOMITRIUS: Whew!.

JASON: Now what?

DOMITRIUS: Sign up unless you don't have an account, we can sign up for one.

JASON: Let's find out if I have one. Do I get to sign up with GitHub or anything?

DOMITRIUS: Yeah, you can sign up with GitHub.

JASON: All right.

DOMITRIUS: Or just stop loading.

JASON: Let's see what happens here.

JASON: I have an account. I created an account. So

DOMITRIUS: It'll bring you through a bit of a wizard, but this will be your work space that you'll begin working out of. You can name this "posts."

JASON: OK. And we've got Europe and east and west coast US, US east 1 because when the rest of the internet goes down, you want to be a part of that party. Create my first table.

DOMITRIUS: We can also name this post.

JASON: OK. I like you have the CLI stuff to make this work.

DOMITRIUS: Yeah, that's usually the best thing to do is before we do anything else is just getting the CLI installed and then all so we're good to go. Don't you like our onboarding? Isn't this nice?

JASON: This is nice. This is interesting, I've never been to this website before. Oh, you gave me a whole thing.

DOMITRIUS: That's your work space, like database.

JASON: Got it. I thought this was telling me, I thought this was your place holder. Because it scrolls off the side. [ Laughter ] What a neat website?

DOMITRIUS: Yeah, we send you up something right away.

JASON: That is very cool. So I'm is that what I'm doing?

DOMITRIUS: You can actually go to start building and we can go through kind of authorizing and setting up the CLI. If you haven't installed the CLI, we will want to do that before we get into anything else.

JASON: We'll tackle that next. Can I do that right now?

DOMITRIUS: Yeah, do that, I would get that out of the way and start adding like the columns and all of that. But once we know that the CLI is ready to go, the rest of it'll be pretty straightforward.

JASON: Got it. I'm bringing this over here. I'm going to NPM install?

DOMITRIUS: Yep. Dash G. And then, at Xata

JASON: To actually see what's going on, Dom?

DOMITRIUS: No.

JASON: If you hover over the composite window there, there's a context menu that you can click on and copy the quick embed link into a new tab and that'll be full screen so you can actually read what's on the screen. Probably should've told you that before we went live.

DOMITRIUS: Love that. Love that. That's so much better. Yes, we're winning.

JASON: OK. Yes. I'm going, I'm doing NPM install G, and what's the name of the package?

DOMITRIUS: @Xata.io/CLI.

JASON: Got it. Installs Xata CLI.

DOMITRIUS: And Xata auth when it's finished and that'll bring you to the authorization flow and making sure the CLI has the access for your credentials.

JASON: OK.

DOMITRIUS: You need elevator music, we need that on point all the times, I'm sure this happens all the time. (Music playing).

DOMITRIUS: You know I want an excuse to dance, right? (Music playing).

JASON: OK. That's enough.

DOMITRIUS: I want an excuse to dance. That's really it. I'm sorry. [ Laughter ]

JASON: I think our viewer count dropped by half.

DOMITRIUS: As it should.

JASON: Abridgewater shared an emote that's like the same dance I was just doing which I'm kind of scared
[ Laughter ]

DOMITRIUS: Other people need to see that dance from you so they know they can do it. We'll do Xata auth.

JASON: Xata auth and shows me what to do. And this is Xata auth log in.

DOMITRIUS: Yep.

JASON: Create a new API key in browser. Do I need to do this off screen?

DOMITRIUS: Yeah, unless you want people finding you.

JASON: Type a name for the API key and call this one Xata CLI

DOMITRIUS: Yep.

JASON: And I'm going to pull this off screen to click this button. Oh, I can't put a I'll show this real quick. Apparently my apostrophe is not allowed.

DOMITRIUS: You've ruined everything. Leave it to Jason to find our bugs.

JASON: Only alphanumerics. Oh, OK. No spaces either.

DOMITRIUS: All set.

JASON: Yeah, it worked.

DOMITRIUS: Yeah, it didn't

JASON: It didn't show the thing.

DOMITRIUS: Yeah, it pulls it into memory for the CLI so it has access to it. So also from here when we generate the SDK, which we'll do in a few steps, you'll see that there's actually like no telltale sign it's using the API key. But it's also it's all done behind the scenes, it's really nice. So now, from here, we can I say we spin up a new project and get it,nd, get it all set up and deployed and ready to go. So we'll spin up a new Next project.

JASON: OK. I'm doing NPM create, is it next.js.

DOMITRIUS: I think it's create Next app.

JASON: Like that?

DOMITRIUS: I thought so.

JASON: Let's try it. There it is. OK. What are we calling this? Xata posts?

DOMITRIUS: Yeah, sure.

JASON: I like to use typescript.

DOMITRIUS: We're typescripters now, Jason.

JASON: You know, it happened, I resisted it for a long time but now I just write typescript. Tail wind, do I have to?

DOMITRIUS: You don't have to, but I do.

JASON: I'm going to

DOMITRIUS: I like that, I like CSS links.

JASON: Is this if I say no.

DOMITRIUS: I would say no, and we'll use the app directory. We'll use new features that are baked into the app directory.

JASON: Doing a bunch of stuff for the first time on the show today.

DOMITRIUS: Yeah, I like that.

JASON: The default

DOMITRIUS: No basically just @slash. If you ever want to go back and it's in your TS config, but for now, we'll leave it as a basic add alias.

JASON: Cool. And I'm going to move in here.

DOMITRIUS: You've got me super hooked on using the GitHub CLI right now.

JASON: It's real good.

DOMITRIUS: Really good.

JASON: I'm going to get in it, and I'm going to open this here. This one here. And so now, looking inside, we have the app directory and then, we've got few things like that. And so

DOMITRIUS: This is all pretty new for you, right? The app directory, next.js stuff?

JASON: This is the first time I've ever used the app directory in Next.

DOMITRIUS: This will be a little bit of an intro around server components, client components, what that new structure looks like. And I was actually like we were talking about Astro a little earlier, I think it's really great that Astro rose to fame in the way it did because it got me really comfortable with understanding this new paradigm that React and next.js was pushing. One of the big questions I had for Lee when they released this app directory in the new ideology, how do you handle education around this, right? Because this is like such a paradigm shift for React developers. I've been a React developer for so long now. I've been through, you know, the class components, functional hooks and this server first approach. And I don't think without using Astro, I don't think I would have been as comfortable transitioning over into this new, like, island kind of Iology. So shout out to Astro for making it easier for me.

JASON: Absolutely.

DOMITRIUS: Let's get this deployed to Vercel.

JASON: OK.

DOMITRIUS: Have we created a repo for this yet?

JASON: I initialized a repo. Let me see where I'm at. If not, not committed anything yet. We'll get at all. And I'll get commit, and we'll say initial commit. Create.

DOMITRIUS: Astro is pretty dope, yo.

JASON: Repository name, and choose the org out of that dropdown list, isn't that neat? Make it public.

DOMITRIUS: Boom.

JASON: Remote, yes, do the thing.

DOMITRIUS: Look at you. You're a coder. Don't let anybody tell you otherwise.

JASON: Were people trying to tell me otherwise?

DOMITRIUS: Mainly me talking to me inside of a conversation with me. [ Laughter ]

JASON: OK. So I've got a repo and now, I need do I have the Vercel CLI? I do. How long ago did I use it? I don't know what the current version is. I'm not sure what information I thought it would give me.

DOMITRIUS: I'm also unsure. So

JASON: What's the command I run?

DOMITRIUS: I think it's just Vercel. That runs Vercel deploy, I believe.

JASON: I think when it's like this, the command line, it's nerdier. It's Verkel. O.

DOMITRIUS: That makes sense. Vercel, great, you did it.

JASON: Got to run the Vercel. So I can deploy. There we go. I'm assuming that's my team.

DOMITRIUS: I'm hoping so, that's your name.

JASON: It's got my name on it. Find out. To existing project, I don't think I have any existing projects, I'm going to say no. It's keeping the default name in which directory is your code located? I believe this one. Do I want to modify these settings?

DOMITRIUS: Basically the settings above you. I think you're good.

JASON: That's all good. OK. Queued, building.

DOMITRIUS: I felt just as weird to me to start building on Vercel, again, but I was happy to have a lot of the similarities in the stuff I've learned through spending so much time with Netlify coming to Vercel and using them a bit more. So it's just nice to have those types of parities.

JASON: Yeah, it's interesting how all of these nothing like this existed, and then, they all were like, oh, we have to do it exactly like this, right? And so but it's good. It means that we converged on good ideas. And that's the outcome.

DOMITRIUS: The whole idea of the ecosystem, right? Everybody wants to turn everything into a war, the framework wars, the deployment wars, at the end of the day, it's, you know, the more I hung with a lot of the framework authors, like Ryan Carniado, Fred, and you know, I spent time with them and I realized like, it's not a war. It's finding the cool stuff and sharing it with everybody. And I think that's kind of where we're getting to a little bit. Not if you looked on Twitter. But in my viewpoint it is.

JASON: Depending on

DOMITRIUS: Depending on your Twitter feed.

JASON: What happened? What is things are I just like created so many new arc windows when I was trying to do that. What I wanted to do was go here.

DOMITRIUS: They're doing the MySpaceify your browser, right?

JASON: Sort of. I think for me, the bigger thing with it is it has like this really nice way of letting you just kind of build spaces. So like, you can move between projects and stuff in here.

DOMITRIUS: That's nice.

JASON: It's very nice that way and you can pin stuff up here and

DOMITRIUS:. And it gets out of your way.

JASON: And you collapse this down and you're looking at the internet. For me, this was the killer feature. It's just clean until you need it until you don't want it to be clean and then it's, you know, then it's here. And just kind of do just do whatever you want. Whatever's in your heart.

DOMITRIUS: Things and stuff.

JASON: Bobby Tables, this is Yabai. It's in my doc files if you check it out on GitHub. I've got a site. I've deployed it. I've done nothing else.

DOMITRIUS: Cool. Yeah. Great. Now, we can actually go and configure our database and get that set up for development.

JASON: OK.

DOMITRIUS: OK. So really cool thing, you can be right here and create your columns. If you press the plus button right at the end there, it'll show you what types of column support we have. I actually like to go, if you go to schema, you also can do it from here and it gives you kind of a nice, collected view of what the scheme is and not just the rows are. So we're going to be creating a few different columns. We'll create a string. And it'll be called title. And then, we're good to go.

JASON: OK.

DOMITRIUS: And we will create tags, which is going to be a multiple select. An array of like different values.

JASON: All right.

DOMITRIUS: And we have a slug, which is a string.

JASON: Do we want to check any of these boxes?

DOMITRIUS: No, we'll generate a new column. Flying at the edge of our seat here. And text, for long text and call it text or body, either one works.

JASON: OK.

DOMITRIUS: And our final one will be "created at" and that'll be a date.

JASON: Does it matter casing or anything like that?

DOMITRIUS: No, I usually go underscore, but I think it's all preference.

JASON: We're going to do it your way today, you're the BOTSZ.

DOMITRIUS: Somebody's got to say that. Great. Now if we go back to the posts table.

JASON: Back to the post table here.

DOMITRIUS: Yep. And really cool thing, you want to get up and start it quickly, generate random data.

JASON: Oh.

DOMITRIUS: You can pick however much you want, I keep it small so I don't have to write pagination or anything like that. But

JASON: Let's go 5.

DOMITRIUS: We generate all of the things for you. Real quick, click that get code snippet. As I was saying, we have this whole kind of ecosystem set up to be like, oh, we know exactly what database you're using, what you need to emit from and you can click through the paginated queries, records, that's all things built knowing your table. And so you could literally copy and paste that into anything and you're off to the races, any node environment and you're off to the races.

JASON: Cool.

DOMITRIUS: We won't have to worry about any of this just yet. But this is one of the cool DX experiences that I love about Xata's. We really want to show you how quickly you can get up and running with your data bits and nothing better than just showing you some code. Great. So now, we can initialize data and generate our typescript client inside of the projects. Let's go back to the code.

JASON: And in here, we will do a Xata init. Should ask you which database, we've got our posts.

JASON: I'm pulling posts.

DOMITRIUS: And generate typescript code.

JASON: Does it matter typescript or ES modules?

DOMITRIUS: Go generate.

JASON: OK.

DOMITRIUS: I like to go lib. Lib/Xata.codegen.ts. This is something that was taught to me. This lets you know, hey, don't touch this file, this is something that's going to change a lot. It's a code gen, you know, keep it as is. Add it to your get ignore, great, we love that.

JASON: OK. Now, we have

DOMITRIUS: Yeah, buddy.

JASON: There it is.

DOMITRIUS: Yep.

JASON: And all sorts of stuff, posts, columns, this all matches stuff we've defined in the thingy. The dashboard.

DOMITRIUS: Yeah, what your table looks like and also exports some types that you're going to be needing as you're moving around and using the data it generates that for you, as well.

JASON: Very cool.

DOMITRIUS: We're good to go. Great. Let's go into our page.tsx.

JASON: This one.

DOMITRIUS: Let's delete everything from the div and down. Great.

JASON: OK.

DOMITRIUS: And the image import, we don't need that anymore either.

JASON: Get out of here.

DOMITRIUS: Now we'll do import. Brackets. Get Xata client.

JASON: Get Xata client. And these are curly bois, Dom.

DOMITRIUS: My bad, I'm a terrible human. Anyway
[ Laughter ] We're going to we're also going to create a new components folder right in the base directory.

JASON: Components.

DOMITRIUS: And post.tsx component.

JASON: Post.tnx.

DOMITRIUS: We're going to render out the data we'll be getting from inside of our posts inside of here.

JASON: We'll do like post.

DOMITRIUS: Yep.

JASON: And then, that's going to oh, wait, I'm doing all of this wrong. You're like this, oh, my God.

DOMITRIUS: You're yeah, don't let them tell you otherwise.

JASON: Here and we're going to do kind of a thing with a I don't know maybe for now we just dump it?

DOMITRIUS: Yeah.

JASON: That's our baseline thing. Is this the sort of thing that I can like can I import a type out of the Xata code gen to make this stop being squiggly?

You can.

DOMITRIUS: It'll be post records.

JASON: We're not going to let me grab that. VSCode, type post record.

DOMITRIUS: Posts record, that's why.

JASON: What is that?

DOMITRIUS: Because we're not sending anything what is the error on the typescript?

JASON: I don't know what it's doing. Oh, wait.

DOMITRIUS: You're reassigning it to post record.

JASON: All right, all right. Yeah. I need to make this a and then like that. And then one of these.

DOMITRIUS: Boom. We're typescript developers. Come on.

JASON: Look at us go! And if I do one of these, we get all of our bits.

DOMITRIUS: Boom, love that.

JASON: That's good. Happy about that. I need to get this post in here and so

DOMITRIUS: Inside of

JASON: We want to do a thingy but we can start it out like this.

DOMITRIUS: Yeah, yeah, yeah.

JASON: Figure out how to make a post that exists. But, yeah, let's do it. Let's get some stuff.

DOMITRIUS: Right underneath, right above return, we can just do const Xata equals get Xata client and invoke it.

JASON: Get Xata client.

DOMITRIUS: And below that const post equals Xata.db and you'll see .posts. And then, we'll do a you can see all of the many variables you can see here. We'll do a get all.

JASON: Get all. Not dot all.

DOMITRIUS: Perfect.

JASON: Any arguments for

DOMITRIUS: We're off to the races.

JASON: All right. Here we go. Post.map post and then we're going to send this little buddy out. OK. Why don't you

DOMITRIUS: I think it's because we are oh, we forgot to await. Let's turn this into an async server function. You can do export default async. Yep. One of the new cools things of server components. And just React 13, deal with class components. And so now, key

JASON: Key prop, key is fine, we can do that.

DOMITRIUS: You've got the keys.

JASON: ID.

DOMITRIUS: Look at that. OK.

JASON: We've done that thing. We're going to come out here, we're going to look at this thing.

DOMITRIUS: OK.

JASON: And didn't do anything.

DOMITRIUS: Is this the preview from Vercel?

JASON: Yeah, yeah. OK.

DOMITRIUS: Two brains, dude, I'm telling you. [ Laughter ] What? Together? Father/son duo, we are coders. [ Laughter ]

JASON: So it says it compiled. Oh, wait. Only got the one? Hmm.

DOMITRIUS: I think your console will be in the console because it's a server component. Yep.

JASON: Yeah, there are they are. So what have I done? I have done something wrong.

DOMITRIUS: Is it just how we're rendering inside of the post component? Is it because we're stringifying? DOM.

JASON: This is something to do with Next did on the we're going to get rid of the classes. Because I think they did something silly with the styles that is causing us pain.

DOMITRIUS: Yep.

JASON: Look at that.

DOMITRIUS: Look at us. We've done a thing with things and now I can style this up a bit.

DOMITRIUS: And once you've done this, let's go in and enable the integrations inside of Xata for GitHub and for Vercel.

JASON: First title. Curly bois in there. And then, we want paragraph and it's going to be like dangerously set in HTML, and that's going to get some of these. And actually, this doesn't really need to be HTML, does it?

DOMITRIUS: The text? You can render that out since it's a really big string.

JASON: That's true, it's just a really big string. Go post text.

DOMITRIUS: Yep.

JASON: What else did we need?

DOMITRIUS: Really, that's it.

JASON: Should we leave it at that for now?

DOMITRIUS: Yeah, we're not going to build in individual pages where we use the slug and create the dynamic pages. We won't need to dig into all of that.

JASON: OK. That's kind of the basic setup for us here. We've got probably make this into an H2 since we've got a bunch on one page.

DOMITRIUS: From data to project pretty quickly once you're up and running.

JASON: Mm hmm.

DOMITRIUS: So from here, I think we're successful with at least rendering the code, let's go prepare ourselves for the workflow that we'll be engaging in. So let's head on over to the Xata website, again. And then, inside of here, you see settings up at the top. Boom.

JASON: I do.

DOMITRIUS: Go ahead and enable your GitHub.

JASON: Become Xata.

DOMITRIUS: Something, we have to manage the idea. There's an identity that we use for authO, when we authorize you as a repo. And even if you sign up with a GitHub account, you're going to have to authorize your GitHub integration so it has a little bit more access to your repos.

JASON: Right, right. So I need to install this?

DOMITRIUS: Yep. It'll ask you where you want to go.

JASON: Put this on and we'll put it on the one we just created.

DOMITRIUS: Perfect. Xata posts.

JASON: OK. There it goes. Auto complete for me? That would be neat. Yeah. All right. There we go. Here we go. We're doing the thing. All right.

DOMITRIUS: Cool. We'll connect. Boom. Now, we can go over to Vercel. We have Netlify as an integration partner. If you're a Netlify user, we also have you covered.

JASON: Oh, what do I use for oh, probably this. There's no, uh oh. Continue we mail.

DOMITRIUS: What happened?

JASON: What account am I using here? OK. Vercel help. I want Vercel help. How do I check what account I'm using? Vercel, who am I? OK. So like an auth thing?

DOMITRIUS: Like a log in?

JASON: Yeah. Log in or creates a new one. Is there a way to go to the dashboard so it opens for me? That would be neat.

DOMITRIUS: I think you can do is it browse, or I'm still getting used to the Vercel CLI myself.

JASON: Teams, who am I? Vercel, open.

DOMITRIUS: Interesting. Let me look up Vercel CLI

JASON: Break how on earth did I get because I don't have a GitLab or a fit bucket. It has to be GitHub.

DOMITRIUS: What's it saying? There's no account linked with this GitHub account?

JASON: Yeah.

DOMITRIUS: We just were on your GitHub, so you're definitely signed into your J Lengstorf.

JASON: Yeah, it's got to be linking. OK. If I just want to see

DOMITRIUS: John, thank you for the shout out on the pricing examples, that was just launched with our website redesign. I appreciate that. I'm going to read some chat while you do this. The red firefox, welcome, what's going on here? Father and Son issues deploying apps. Is the I think dedicated title.

JASON: I'm legitimately confused as to how I have

DOMITRIUS: An account linked through your CLI but can't log in?

JASON: Yeah. There is no account linked with this account.

DOMITRIUS: Can you do email with your

JASON: Open the link we just sent to email. How do I move this over here so I can look at my email offscreen?

DOMITRIUS: Look at your email on screen. We want to see all of that. What are you doing?

JASON: Complete, verify. Log in success. Whatever. Here we are. Now

DOMITRIUS: That looks like an account thing.

JASON: Who knows. Let's go over here, again. Projects, good, add integration.

DOMITRIUS: Great. We made it.

DOMITRIUS: All right. We'll connect two Xata posts.

JASON: Connect twice.

DOMITRIUS: I don't know why there's two. That's a UI bug. We love those. [ Laughter ] All right. So now we're connected to projects, two projects Connected.

JASON: That might also be because I tried tiny stall four times.

DOMITRIUS: Yeah. Maybe. We can bring up the repo later. But basically, for those watching, the same as if deploy previews, puts it in your GitHub repo, we'll have something similar for your branches for your database, as well, that every time you do a new push, inside of your PR, not only your deployer preview for whichever hosting provider, a comment from Xata in a similar vein. We can push this out of the way so we start moving into a branch, we have the base app that we need.

JASON: And everything I've added here is OK to add? The RC and code gen and all of that should be committed?

DOMITRIUS: Yeah, the code gen is good to go. And we bring your migrations down as files, as well. So that gets committed to source code and you basically can manage your migrations through that similar pattern.

JASON: OK, so somewhere in here, we should be seeing so I didn't do a pull request or anything, should I be looking for a

DOMITRIUS: No, you don't have to worry about that right now. That'll be when we do our branching. You'll send a comment in your PR branch. So now, we're good to go. Great. We've got posts, great, everybody's happy. Now, we want to add upvotes. We want each post to have the unlimited upvote count. That's what we're building today. New feature, great, cool, what do we do? We start an original branch. We'll do fit checkout and do an upvote branch. Up votes, exactly. Now that we have our upvotes, we are going to create a new branch in Xata, as well. Xata branch

JASON: Oh, right here. Xata branch. What's up? Hello, everyone.

DOMITRIUS: Create.

JASON: Create.

DOMITRIUS: And it'll be Xata branch create, add upvotes. And then, dash, dash, oh.

JASON: Oh, no.

DOMITRIUS: Hold on, let's go to the UI, and let me see it can create it should automatically create from main. Sometimes it doesn't, so I add the flag to be 100% sure. So you can go back to the database itself. Let's go click in the branches up top left where it says main. Great. And go to add upvotes. And so, yeah, so it didn't actually we can actually we'll delete this and just start it over, again, and we'll do it from the CLIs. Let's delete this branch. You should be able to get up to you see that button in there, manage branches. Yeah, there we go. That's migrate. Click into branches.

Click into branches. And then, you can delete the upvotes branch there.

JASON: Got it.

DOMITRIUS: Philadelphian, instead you betrayed me. This guy. Coming in hot. Hey, buddy. Oh, Kelvin here's, what's up, buddy? Jacob Mann coming in. With a party of 50, what a gentleman. What an absolute scholar. Because he's bearded, as well. I'm telling you. [ Laughter ] So we'll do from equals main.

JASON: OK, from.

DOMITRIUS: To say, hey, we want the branch to copy the exact same columns that our main branch has.

JASON: Anything else before I hit this button?

DOMITRIUS: No, you're good to go. What is it mad about? What did it do? From main

JASON: What the hell. Hold on, I did a whole thing. Xata branch create, add upvotes from main.

DOMITRIUS: Blame Jason, everybody.

JASON: This is definitely me not understanding how anything works. [ Laughter ] I mean, that's been my motto for at least a year and a half now. JA this is just how I live.

DOMITRIUS: And now you see how all of our columns are already in place. So now

JASON: I do see.

DOMITRIUS: Copied over the exact same structure. And we're working on right now having the ability to in your branches bring over copied data so that you're working inside of a, you know, environment that allows you to have that data on hand when you're actually building these things. Great, cool, so we've got the branches ready to go. And so, now, what we're going to do is go back to our code. And let's go to the dot env file. So in the dot env.

JASON: Things that shouldn't be shown?

DOMITRIUS: Yeah, it's going to show your API key. If you want to do this off if you want to do this off of screen, you can. And then, I'll explain what you're doing and why. So the reason we're going to go into the .env is for local environments, we have an environment variable that gets set called Xata branch and points your local environment to the proper branch inside of Xata. This is done in the production environment itself, in local, we have to do it ourselves. Now, we're going to want to point it at upvotes instead of me.

JASON: So what I have done, I've done that in the .env. And I'll get over here.

DOMITRIUS: And brought it into copy.

JASON: So this is a copy so we can see.

DOMITRIUS: Yeah, add upvotes. This lets you point locally to that branch so that when we're seeing it in our local dev environment, same as the preview environment.

JASON: Got it.

DOMITRIUS: And now, we will, inside of here, we will do in the console Xata pool add upvotes. This says, hey, there was changes that were done. We haven't made the changes. Nothing actually changed here. Go to the schema, again, for this new branch. I skipped the step.

JASON: Dumb.

DOMITRIUS: You're screwing up, I can screw up. Schema great, everything's the same, and now an integer number. And if you want to call it upvotes, feel free. JA ya why not?

DOMITRIUS: We'll do a not null and default value, and this is for zero down time migrations, when you do a non null column, we have you add in the default value, which a lot of people yell at us for. So now, cool schema's changed and what the heck do I do now? Now we do the Xata pull add upvotes and this will say hey, this was made inside of this thing. Your types of client so you're not aware.

JASON: Look at the migrations.

DOMITRIUS: And so now, we can do do we run it, again?

JASON: I did run it, again. Pulled one migration.

DOMITRIUS: Yeah, great, go over to the Xata code gen, and you'll see upvotes, type integer and not null with the default value. And let's go ahead and create a new component called upvote button. Or upvote button. Love that.

JASON: OK.

DOMITRIUS: Now, with the new way of building React server components, we now have to say, hey, we are going to use a client based component. We're going to use some state here. So inside of the upload button, we'll at the top in quotes put use space client.

JASON: Yeah.

DOMITRIUS: Perfect. And then, we'll import you can import the used state from React. OK. And so, technically for this button, we'll only need the upvote number, so upvote count. And then, it'll just be a number. So you can just change that to count number. And so we'll set some state, we'll set up a basic state for upvotes. We'll do const upvotes and set upvotes. This is going to allow us to do some lazy optimistic updates so we don't have to wait for server actions every time.

JASON: Oh, my God.

DOMITRIUS: Used state, and then number, we're going to have to set it as a number. So you'll

DOMITRIUS: Yeah, see, typescript guy. And then, we'll actually make the default state count.

JASON: Oh, right, that makes sense.

DOMITRIUS: And all we really need to do in here is have a button.

JASON: Everything is fine. We've got a button.

DOMITRIUS: It's OK. Yep. And I like to say, and we'll do we can render the amount of upvotes next to upvotes.

JASON: OK. And

DOMITRIUS: We'll want to render so we can make an update to it. Perfect. All right. Cool.

JASON: To start put this in a decent space. And then, we can do one of these little

DOMITRIUS: Yeah. Oh, yeah.

JASON: And account, we can start it at zero.

DOMITRIUS: We actually have access to the count now. You can do post.upvotes.

JASON: That's right.

DOMITRIUS: Yeah.

JASON: Perfect.

DOMITRIUS: If we start it up, it should all be zero. That's what we're hoping.

JASON: Filing and it does work? It doesn't?

DOMITRIUS: Yeah, yeah, yeah. So we forgot to generate some data in the new branch, as well.

JASON: Right. That tracks. OK, so we go back to post.

DOMITRIUS: This is more for local development, again, so we have an idea of what the new data looks like. HENZ why we change that environment variable earlier. And

JASON: And we got random numbers, which is going to be we yeah.

DOMITRIUS: Yep. Cool. Everything is successful. I'm loving I'm loving that. So cool, we have added a new feature. We're in our branch. What the heck do you do next? You want to push up to this PR, get it started, right? That's our next we want to make sure this new feature is working inside of a semiproduction environment.

JASON: OK.

DOMITRIUS: We'll create a new PR, push up the changes and create the PR.

JASON: We're not going to make this thing work, are we?

DOMITRIUS: Nope.

JASON: So we are going to get where are we at? We just updated the Xata stuff? We've got this let me delete this. We've got our post, the code gen and great, we can work with that. I'm going to get everything and get commit and work in progress.

DOMITRIUS: Upvotes. We should've put a vote emoji in with the component. You dropped the ball there.

JASON: You need to push this before, can I do a PR open and it'll push for me?

DOMITRIUS: Yeah, you can do GitHub PR create. There you go.

JASON: I've got to make this bigger. That's why it's ahead of me. Yeah, we should. And then, yeah, we can call it upvotes.

DOMITRIUS: We're going to look back at this recording and be like, that guy Domitrius has ADHD because he will not stop moving. [ Laughter ] We've got a PR.

JASON: We've got a PR.

DOMITRIUS: Boom.

JASON: And things are happening on Xata?

DOMITRIUS: No deploy preview for Vercel, though? Let's go check our Vercel account?

JASON: All checks, all Xata. All right.

DOMITRIUS: All right. Oh, this is why, it didn't

JASON: What's happened.

DOMITRIUS: (Inaudible) of the repo. We connected it. It deployed it but didn't connect it to the get repo locally. You know how with Netlify when you do a deployment, you can set

JASON: What the hell is hazmat?

DOMITRIUS: What's happening?

JASON: I have no idea.

DOMITRIUS: I blame the world. I don't blame you for once, buddy.

JASON: Appreciate that. This is the one.

DOMITRIUS: What does that say?

JASON: Can only be connected to projects in teams. [ Laughter ] I can't use Vercel because I use an org. [ Laughter ]

DOMITRIUS: OK. Well, so, then, we have 30 minutes left.

JASON: Hold on, I can move this to my personal account

DOMITRIUS: I don't mind walking through

JASON: It's totally P fine. We've got it. We can

DOMITRIUS: Whatever works for you, buddy.

JASON: I will transfer ownership, choose an owner, it is me, I am the owner. I'm going to copy/paste this so I don't have to write it out myself.

DOMITRIUS: Good call. .

JASON: That's doing a thing and the other thing that's going to break here is I'm going to have to add more

DOMITRIUS: Repositories, right?

JASON: GitHub account, this one.

DOMITRIUS: Yeah, yeah, yeah.

JASON: This one. This one.

DOMITRIUS: We don't have much work to do left. That's the good part about this.

JASON: That's great because we're spending it all on Vercel. There we go. [ Laughter ]

DOMITRIUS: Boom. OK.

JASON: Now, the other thing that just happened is I just broke

DOMITRIUS: Xata.

JASON: Xata stuff.

DOMITRIUS: Let's see how we handle it.

JASON: Install Xata GitHub app here.

DOMITRIUS: Let's wait. Before we select this, let's go back to the integrations, the settings page inside of Xata. I want to make sure that we disconnect from anything that does exist because I'm unsure if that's actually going to let's go do a disconnect. And then, yeah, let's do that, again. Just to be the safest.

JASON: Good call. Good call. OK. Connected.

DOMITRIUS: Cool. So do you want to just try and add the functionality and do another push so we don't have to push an empty commit?

JASON: Why don't I close this one? And then

DOMITRIUS: Start it up, again.

JASON: Watch this. So then, I also I need to bit remote get origin I need to change that origin, doing a get remote origin.

DOMITRIUS: That guy knows his get. Get at come on, you can do this.

DOMITRIUS: Get at it. That was corny, the worst thing I've ever said. I'm so sorry. I know what I am.

JASON: Post.get. I'm going to get push origin as a posts. Don't you lie to me.

DOMITRIUS: Don't you lie to me.

JASON: Where are we at? I can get push. OK. Get commit all, and then I can push origin at upvotes.

DOMITRIUS: Get commit M, mistakes were made.

JASON: Create. And is it already doing the thing? Am I on my own?

DOMITRIUS: He is coding like a go getter. Ban that guy from the chat immediately. I can say that because I know him personally, chat. I'm sorry if that sounds rude.

JASON: Who were you attacking? Wolfen wizard, new coder to the space, shout out to him, going through the bootcamp right now, really excited for him.

JASON: Nice, nice. OK.

DOMITRIUS: We did it.

JASON: We have it, I think. Is this view deployment? My deployment?

DOMITRIUS: It should have a OK, look. Cool. Everything worked. You don't know how much of a sigh of relief that is. Let's go to the Xata dashboard really quick. We've got to minutes.

JASON: Xata dashboard.

DOMITRIUS: Go back to database. Great. Click on that dropdown menu where it says main. So now, it has two in there because we added up two PRs that spun up two different ones. But, OK. This was really cool. So you know how when we created the new branch, didn't copy over any data, it was just empty. When we do a deploy preview, we create a new branch for you dedicated to the preview you're seeing inside of the deployment platform, right? So that point, we bring over automatically your main databases, a copy of your main database's data so the production data inside of this preview environment. So if you go to main, again, you'll see so title here as George Iguam, right? We should see the same thing.

JASON: Without, notice, without the upvotes.

DOMITRIUS: Exactly.

JASON: The migration got applied from the branch, from our like code changes that, then, leads to the production data getting migrated, hitting the default, which is why they're all zero, and we get a preview.

DOMITRIUS: Yep.

JASON: Very cool.

DOMITRIUS: Sick, cool, success, love that. Now, last thing is adding functionality to the upvote, right?

JASON: Yes, so I can close this down, actually, let me open up this one. And then, we're going to do what? I'm going to start this thing? And now, we're going back to the upvotes.

DOMITRIUS: We're actually going to create a new folder. And we're going to call it actions. These are the new things in the Next.js called server actions. Saves you the round trip of having to create an API endpoint for everything you need on the server side. You can create actions anywhere. You can keep it co located in app, you can keep it in the main folder like we do with lib. But basically, these are server only actions so it's really up to you on how you define the folder structure and all of that and what your nomenclature is.

JASON: Does that mean if you're in Next, you can't create a subroute of I don't maybe this just needs to I'm not going to ask you next questions.

DOMITRIUS: I think I understand what you're asking. Basically, what is going to donate that it's a server file is that we're going to put used server above them. It defaults with React server components and next, defaults all components to React server components until you use that used client directive. And so when we're passing functions around, that would usually be API routes, anytime we need any interactions with the server, serverful environment, we build an API route. In this instance, we're skipping having to do routing and any of that, like, fetch and client BS that we would usually have to do and we'd just create a server action for the incremental. Do indetection.ts. This will be our big file that we write them all in. Top of here, we're going to write used server. Everything in this file has to be a server based function. And for Xata's client, it has to be based on the server, it won't be able to be used in the client because your environment variables built into it. Now, we'll do an import to get Xata client, we'll need the Xata client. And we got to minutes. We've got 20 minutes, dude, we've got time.

JASON: We've got nothing but time.

DOMITRIUS: I love that. So now, we're going to do export, async function, increment upvote. And the parameter is going to be a post ID, which is a string. You can actually do that in line instead of how you do that before. Yep, boom. And cool. Now we'll do const Xata equals, you can do this inside of the function or outside of the function, as you have more needed actions, you can do it outside of the function. But then we'll do

JASON: Is this ddooping itself. One of the things that's interesting is when you create CLIPTs, you've go to worry about how many connections did I create? And is there a point where I've created too many connections? Are you kind of managing all of that

DOMITRIUS: You won't have to worry about all of that.

JASON: Love that.

DOMITRIUS: Now return await, Xata.db.posts.update. And so this lets you do a partial update on a record. And so, the first argument is going to be a post ID, which we're bringing in from the parameter. Second argument is an object.

JASON: Doesn't like that. Hold on, what do you want? No overload matches.

DOMITRIUS: This is something that I was just keep going. We'll fix that in a second.

JASON: Fight it.

DOMITRIUS: It's the typescript fun. And this will be an object. So your curly bois. And upvotes. Upvotes. And then, this is a key of another object. So more curly bois.

JASON: More curly bois.

DOMITRIUS: And dollar sign increment, the SQL balance knowledge of the types of updates you'd want to do and it'll be 1, because we only want to update by one. It's all good to go now. No longer going to agree with you.

JASON: I understand.

DOMITRIUS: Any questions? I'm happy to

JASON: I don't think so. Just to walk back through this. We grab Xata and we're updating the post with this post ID and we're saying that for the upvotes, we want to increment the value by one. Which is great, this saves like in past projects, where I've wanted to do something like an increment, I have hit that challenge well, you've got to query the thing and then, get its values so that you can then update with the current value. So this is a it's little things like this, I think, are eventually show up in all database solutions. I think one of the reasons that SQL is still such a power house is because it's been around for so long, we found the edge cases, we figured out what people are going to do. And it's all there, right? And so, I'm happy to see that the ideas like these are going to make their way into all of the other providers, as well. I think this is under the hood?

DOMITRIUS: Yeah, postgres.

JASON: That makes sense then, all of the benefits of postgres with a really nice DX layer on top.

DOMITRIUS: That's the whole thing. Is that a lot of the feedback that we hear. And we're a fairly new product on the market, right? I'm actually loving hearing, especially as a non DB person myself, it's nice to hear all of these kinds of needs from people who are a little bit more connected at the lower level of databases. But at the end of the day, it's a postgres database, yeah, there'll be people that want the access to the raw SQL so they can manipulate in the way they know how to. But the DX experience that you're getting from not having to deal with any of that and getting to think strictly as, like, a frontend or full stacky typescript developer, that is what makes Xata stand out from me why it's really exciting. And you know me, I couldn't work somewhere that I'm not excited about the product. It probably took a month or two of really onboarding. Feeling comfortable, getting better at typescript, I sucked at it. Once I got past those hurdles, I was like, oh, wow, here is the real value. It's this layer of DX over postgres that we really get to start to dig into. So yeah, cool off to the races.

JASON: All right. So we've built our thingy.

DOMITRIUS: Yep.

JASON: If I come back here.

DOMITRIUS: Here's the cool thing about server action. Server actions can be passed one of two ways. First one is inside a server component, it can be passed as a prop. From a server to a client component. But in this instance, we can import it from our actions folder and have access to a server full function.

JASON: OK, so I do

DOMITRIUS: Do your import first.

JASON: It was increment.

DOMITRIUS: Upvote.

JASON: Upvote?

DOMITRIUS: Yep. And so, we're all probably going to want to move this into a handle upvote function, just because, unless you want to write it inline. We also want to do set upvotes and do a pre plus one so we can do that optimistic UI update.

JASON: This is async, right?

DOMITRIUS: Yep.

JASON: Handle upvote. We are going to need we're going to have to pass in the post ID. But we can solve that. And for now, we will increment upvote and we'll need that post ID. And then, we're going to set upvotes, upvotes plus 1, right?

DOMITRIUS: I like to stay safe and do the pre do the anonymous function that lets you get the previous state and derive from the previous state the new state. So do prev equal arrow. Yeah. Just lets me know that I'm properly updating what was coming from before. From post, we'll want to add a new a new prop. Which will be post ID. You'll add to the type, as well. See the value of this interaction, if you want to take more ownership of the DB at some point. That's what I was saying. We focused on really that out of box DX for developers who don't need as much kind of like low level access. Our whole developer team right now is focused on the other side of the story, which would be someone like you who wants that a little bit deeper than access. Stay tuned, join our discord, that's where we post change live updates every week. So definitely feel free to come in there and worship.

JASON: I've got a post ID going in. Post ID coming out. We are updating the value. Do I have to do anything else? I need to await this, right?

DOMITRIUS: Yeah, I think we're good, I think we're off to the races.

JASON: All right.

DOMITRIUS: We can test this in our dev environment because we have test data from our branch. Excuse me.

JASON: You still working? What have I done?

DOMITRIUS: The output on the pings side of the little blurry. But I can see it on stream a little bit better. Oh, so this is our you're in the preview, you were in the preview. Not the local dev. Oh, are you in the local dev?

JASON: That's layout CSS, we don't care about that.

DOMITRIUS: We're not actually seeing a problem.

JASON: Not seeing a problem. Are we seeing anything in the network tab? Let's take a look. This should be theoretically sending something, right? Oh, I accidentally, this is my fault. So we need to go to next dot config.js. And we have to add because this is still an experimental server actions are still experimental. So what we're going to want to do is in here, mine in my project. We'll do experimental, totally my fault. And then server action's true.

JASON: I don't have to tell it where it is. It just knows?

DOMITRIUS: Yeah, it just knows and we'll probably have to restart the dev environment, as well. And then fingers crossed, we have ten minutes.

JASON: I have the utmost faith.

DOMITRIUS: I'm nervous by default.

JASON: We're nervous by default. But also, we're rocking like, so much beta software out of right now. Beta features beta features.

DOMITRIUS: The really cool thing, this works in the same pages route flow that a lot of people are used to. I think this just the thing that server actions does is makes that DB interaction point a little bit easier. So I like to show people kind of what is to come for database interactions, especially from the serverless provider like us.

JASON: Look at it, friends.

DOMITRIUS: We moving? And so those are optimistic.

JASON: They're not because we're waiting. We're doing the await. It's not optimistic, we're awaiting until that finishes.

DOMITRIUS: One more piece of the puzzle. And this is a next convention now that we have server routes. And page.jsx, and this will be before we do a push, at the bottom below the component itself, we're going to do an export const dynamic equals forced dynamic in quotes, yep. Dash dynamic.

JASON: Force dynamic.

DOMITRIUS: Right now, it'll compile on build when you don't do that. And so, this gives you every time you refresh, you get that new data instead of sale data.

JASON: Nice. Cool.

DOMITRIUS: Now, we can push it up to the PR. Off it goes. And in here, go out to our PR. Which is now doing things.

DOMITRIUS: Doing stuff and things, for sure.

JASON: OK. We've got a we've got our existing we didn't make any changes to Xata itself. So we don't need to make any changes there. But we have

DOMITRIUS: It's server side. This is the confusion of the new paradigm of nets. We are calling the server function inside of a client component, but think of it similarly to how you were thinking about API routes, right? API routes happen on the server, we call them from the client, but it doesn't actually get access to any of the variables we're calling from inside the server. This has nothing to do with your lack of knowledge. This is new paradigm shift from the Next.js team of what serverless components would look like.

JASON: And there we go. We're getting updates.

DOMITRIUS: Hell yeah. Let's go one more time. Go back to the Xata dashboard. Look at the preview branch. Because we just made updates to upvotes, right? We would expect for main, still no changes, but inside of here, we're getting the upvotes in. So inside we have preview of your main database, right? Boom. You have access to build new features confidently. We are siloed away from the main data. So now, like, you don't have to worry about any of that weird piece of the pie of am I deleting or doing mutations to data that I shouldn't be doing that are production data? And you have an environment in which you can feel comfortable kind of playing around and messing with all of the data as you need to. This is neat, you're neat.

JASON: And then, the reason I did this is is this the right one? I don't know which one it was. So I'm going to open this one, again.

DOMITRIUS: Yeah.

JASON: It just shows up, right? We didn't have to leave it for you. So this is you know, the tradeoff obviously, is it is significantly more complex to build and deploy something like this because you're interesting servers, you're introducing two different runtimes, you have buildtime stuff and run justice of the peace time stuff and client side stuff and server side stuff, which is moving parts and things that can break. However, it is nice when the data's just there. So depending on your use case and depending on, you know, what it is that you're trying to render and what it needs to do, this is kind of neat. So I, yeah, I like it.

DOMITRIUS: We did it. We added a new feature. We're good to go. We successfully did the thing.

JASON: We did the thing.

DOMITRIUS: In one go. No worries.

JASON: Here's the question I have.

DOMITRIUS: Question.

JASON: Here's the question I have, I'm going to merge this.

DOMITRIUS: Go ahead.

JASON: Then what happens?

DOMITRIUS: Back on your main branch now, we should see a new a new column.

JASON: Going back. Here's my database. I'm looking at here. And it it didn't pull the

DOMITRIUS: Bring any of that data over. Exactly.

JASON: Right. This is great. That means as a like a tester, you can go in and break stuff. You can add things, delete things, mess with stuff, make sure your update delete works, so you can run a test suite that will add and delete data that would be risky against a production database and know once the tests pass, you go to master, merge to main and go live. That's pretty dope. That's a cool way of working.

DOMITRIUS: One of the concerns we heard was what about private, like, data that should not be accessible in these environments? Right? Like passwords and stuff of that nature. We're working on making it so that we generate kind of like randomized data for those fields when it's put into a deploy preview. So sensitive data doesn't get caught because right now, we copy over your entire main database. All of that is going to come with it. So yeah, we're working on improvements in that, as well, already.

JASON: Got it. Dom that is all the time we have today. I'm going to send everybody back Xata one more time. I will send a link to this repo, as well, for anybody who wants to check it out. Where else? And actually, why don't we go ahead and put the live project up, as well. Which one's the live one? How do I know? That's not it. This one. This is the live one. So this is the this is the live site. And if y'all want to go upvote the heck out of things, and we didn't add any realtime or anything, it's not going to update on the screen, you have unlimited votes. You can say whatever you want in here with your thumbs up, up, up,. That's all you get to do. Come on, where else should people go if they want to learn more?

DOMITRIUS: Yeah, so our Discord, Discord.gg/Xata. That's a great place. It's also, yeah, it should be in there, as well. That's a good place. We're ramping up right now, hiring a community manager really soon to really start building events and great interaction and fun and opening up as much as we can. We're a closed source company, for me, it's like what things can we find to open source and engage in the community with? A lot of fun stuff happening inside the Discord, you'll find me and the rest of the team. Yeah, you want to follow me on Twitter, Twitter.com DomitriusClark. You can follow me on there, and yeah, I mean T follow our Twitter account. We also have I want to share one more thing before we go. On this

JASON: You have 30 seconds.

DOMITRIUS: I'm ready. On the Xata website.

JASON: OK.

DOMITRIUS: Go back to the main page.

JASON: Xata. Xata OK.

DOMITRIUS: Go over to roadmap. You're going to be able to see everything that's upcoming. You can vote for it, this is one of our moves to become a little more transparent. Thank you so much, Jason, for having me, as always, I had an absolute frickin blast and thank you for coming and watching.

JASON: Dom did the outro. We've had Diane with us from White Coat Captioning here today, & that's made possible through Netlify, NX, New Relic and Pluralsight. Make sure while you are checking out the site, go and take a look at the schedule. We've got all sorts of things coming up. Please go and check that out. This episode will be posted on YouTube. There's lots O goodies on YouTube, you can subscribe the newsletter and get those delivered fresh to your inbox like a little bun. Steamy, warm, and Dom, thank you so much for spending time with us today. Thank you so much for hanging out. We'll see you all next time.

DOMITRIUS: Bye. Is