What's new in Prisma (v2.14.0)

(upbeat music) – Happy new year, friends We are live with another episode of What’s new in Prisma, where we are talking about the news in the Prisma ecosystem and in the Prisma community And today is the first episode that we’re doing in 2021 after an extensive holiday special that we did just before everybody went down into the holidays And today I’m here with my colleague Ryan as usual, hey Ryan – Hello – And then we also have a guest We have Tim here today Tim, do you quickly wanna introduce yourself and maybe tell us already why you are joining the stream today? What people can expect from you? – Yeah, so I’m Tim, I’m a software engineer at Prisma, doing mostly TypeScript stuff And I will today mostly talk about React Server Components and the wary experimental early integration with Prisma – Exactly, yeah, because React Server Components will be the big topic of today’s stream In fact, we have a fairly short agenda today So we are going to talk about this week’s release, where the biggest feature is the new Group By query that you can now send to the database with Prisma client Then we’ll discuss React Server Components in detail with Tim, and in the end, and that’s your opportunity today, everybody who’s watching to ask the questions that you always wanted to ask about Prisma, because since the agenda is a little bit shorter we’ll try to do a little bit of a Q and A in the end and pick up a couple of questions from the chat So if you’re around and whatever comes to mind that you want to know, now is the time for you to drop these kinds of questions in the chat so that we can pick them up in the end Maybe to warm up a little bit It’s just the first week after the holidays basically So I think everybody is still kind of getting accommodated in 2021 Like what were the first things that were on your radar? What have you been working on Ryan in this first week of 2021? – Yeah, I’ve been digging into the latest features of 2.14, Group By being the big one which I’ll demo in just a little bit, and that’s been very interesting to explore What else have I been up to? Doing some organization for upcoming stuff, digging into some content that I’ll be releasing soon, in particular with regards to Angular and Nest So if there’s any fans of Angular and Nest around there’s some content coming that has to do with Prisma and those technologies Yeah, that’s been what’s on my plate, how about you? – Yeah, I feel that the first couple of weeks in a new year and in a new quarter are typically a lot of planning So at the moment I think we’re all just kind of settling a little bit and thinking about what’s ahead in the next couple of weeks and months The most concrete things that I have been working on was the Apollo livestream that I’ve been joining yesterday actually So people can watch that on the Apollo GraphQL Twitch channel It was a pretty extensive one that went also about two hours in the end I was on the screen with Kurt Kemple So the DevRel Manager of Apollo, and we took the project from the Apollo GraphQL tutorial, from their website, and we migrated that from SQL ICE to Prisma And it was a very, very nice stream, I had a lot of fun We went in a lot of depth also in terms of explaining how Prisma works, covered a lot of ground with respect to certain features So I think especially for Prisma newcomers this will also be an interesting resource to just check out and see what’s possible with Prisma when they are combining that with GraphQL – Nice, nice, that’s cool, I am excited to check that out I wasn’t able to check it out live but I’m sure I can catch the recording – Yeah, cool, why don’t we go ahead and talk about this week’s release already 2.14, we released it on Tuesday Ryan, do you wanna walk us through the new stuff that has been released on Tuesday? – Yeah, absolutely If you wanna pop my screen up there I can show the release notes and go through what is new So 2.14 landed two days ago And the biggest thing by far in this release is what seems to be kind of like a long awaited feature, which is the Group By feature So what you get now at Prisma 2.14

is this new method called Group By, and you can use it to do grouping and aggregation, and within that filtering and stuff like that I’ll give you a quick look at how it works You’d call the Group By method, pass your object for configuration in here And you can do things like this You can select a field to Group By, you can then do some math here You can set a minimum, you can do a sum, an average You can take values from your data and start to aggregate them together like that So the example here, the resulting example is we’re grouping by location and you get a returned result for every unique instance of location in this case So Los Angeles, London, Tokyo Possibly many different results in the database that have these locations But what we’re doing is we’re just taking the unique ones and then we’re putting together the minimum for this field called a rate And so we’ll dig a bit more into to how this works when I show a demo in just a little bit Along those lines there’s other kinda options you get with Group by One of them is this key called having, which allows you to take results that have been sort of calculated within the grouping and aggregation stage, and then be able to filter kinda further I’ll show that a little bit in more depth in just a sec too So really long requested feature uses the native stuff under the hood when you’re making your queries, like sum, and Group By, and stuff like this And I think this really rounds out very nicely the feature set of of query capability within the Prisma Client It’s a very nice new feature, a lot of people are excited about that, and you can check out the particulars here in the release notes and of course in the documentation Which is here, we’ve got a very nice set of docs showing Group By and how it works in more detail So Group By very excited for that A couple of other things that are maybe big deals for some people maybe not though One is this support for Linux ARM64 So I’m not a Linux user, I mean I’ve used Linux in the past, but I’m not like a straight up Linux user So I don’t think this affects me too much, but for those out there who are using Linux and need support for ARM64, you’ve got it now There is a way to opt into it with binary targets pointing to this particular key configuration here, and more about that in the documentation that’s linked within – One quick note here, the AWS Graviton instances, all of them are now available with this That’s quite right – Cool, I wonder if there’s anything extra about that in the docs, do we know Tim? – I’m not sure – It probably just explains the different kind of binary targets that are available So like maybe we could quickly explain actually what these are used for and why a number of people might actually not be even familiar with this binary targets key, because this is actually something optional that you don’t always have to configure when you’re using Prisma The reason why it might be necessary, is because the query engine that is running alongside your application instance needs to be compiled for a specific operating system And by default, we are picking the operating system that you’re currently running onto So we are able to detect the proper default, but it might be that you’re developing on a machine and you’re deploying your code on a different machine And when that’s the case then you need to specify the binary target of your deployment machine in order to have the query engine built in the right format So that’s why these binary targets are relevant in the first place, but because they’re most of the time working out of the box people might actually not be familiar with them even though they’re a pretty core feature, or like a pre-core element to how Prisma works – Yep, for sure And there’s a lot of different ones you can opt into here So check out these docs This is in the binary targets options section of the Prisma schema reference docs So you can check out what’s available there Thank you for that, Niko And yeah, that’s an opt-in in the binary targets that you would set in your client So this is now here in 2.14 Fix is, one of them is, and I haven’t run into this because I’m not a PostGIS user, but issues with Migrate have been there with PostGIS So Prisma Migrate now works alongside post GIS, with the post GIS extension, that’s new at 2.14

Some breaking changes for TypeScript users And this is potentially a big one I’m not sure, I ran into this issue as I was testing out our Group By actually, I had an older version of TypeScript installed globally, and I was running into some issues with the new Group By feature Version 4.1 or above now required So if you are on an older version of TypeScripts you may not be able to get access to these features, and you may have to step down your version Hopefully everyone can upgrade to 4.1 or above, but if you can’t there may be some blockers there As we have said, we are kind of on the bleeding edge in some respects in how Prisma is kinda working under the hood with TypeScript Lots of other fixes and improvements you can go through here in the release notes I won’t get into detail about these ones, but you can have a cruise through, and they’re all linked, so check that out Those are the big things though in 2.14, and of course Group By is the biggest So with that, unless anyone’s got any specific questions I can go into a demo here of a Group By, what do you think, Niko? Should I hop over to the demo? – Yes, let’s do it – All right, so I have got a very simple schema here I have got a Prisma project set up, and it’s got this product schema, few simple keys, name, price, category, and a rating So really simple model here What I’ve done here is I have opted into this preview feature of Group by So if you wanna use the new Group By method, this is what you’ll have to do You’ll have to opt into it as a preview feature And so then I have got just a simple call to find many So let’s do this, npm run dev, and we’ll see the data that I’ve got in here Got a number of records that are different products I don’t know, I was trying to think of what to put in here And I looked at my iPhone and I was like, let’s make a list of products, so I’ve got a whole range of different things I’ve got electronics, we’ve got furniture and food And so just things you might find at a store I guess The idea that I wanna show now, is we’ve got this raw list of data And if we wanted to try to aggregate it, like maybe we wanted to show totals for some kind of dashboard or something, we can use the brand new Group By So what you might start by doing is say, “I want to group by category So that’s the key within that I want to start to group things up by And the nice thing about this is because we’re totally tight here, we get access to the available fields that we might want to do our grouping by So I can choose category, now let’s save, and there we go, we’ve got our categories And then we’ve got a number of arithmetic operators, maybe you would call them We’ve got things like average and counts, min and max, and sum, so we can do sum on price for example And this gives us the summary of the price The aggregate of all the prices that are found within each of these products So like if we take a look at some of these broken oats, like food, I’ve got a price of five here The burger is 12 bucks, but once you add these all together you get a total of 27 So nice way to aggregate some numbers in this case So let’s see, what else can we do? We can maybe specify a where clause So we don’t wanna take absolutely everything Let’s say we want the case where we want the name to be restricted to certain values So we can do something like, name notIn, and then we can give it to this array Let’s say, we don’t want the burger or the tofu in this case, we’ll save that And we still get a result of three things, the electronics, the food, and the furniture But what you’ll notice is that the price for food has changed It’s now down to $5 instead of 27, because we are not including those two items, the burger and the tofu So you can restrict on various keys that you’ve got within your data And there’s things like notIn, you can do whatIn, you can do not, so different operators there to give yourself the best way to query down to what you want And then what’s really cool is we can have a way to restrict values or to get a subset of the values back based on stuff that has happened within the filtering and the aggregation that’s taken place throughout the grouping And what I mean by that is we’ve got this thing called having And so essentially what we’re saying here is we want to filter down to something where this group has a certain property, a certain construction And so what we can do, is we could say, “Let’s get ourselves results that are having,

where, what is it, to rating, and average, and we’ll say the average is greater than or equal to maybe seven And if we do that now we’ve got down to two records, because these ones, the average rating of these groups, I’m just filtering down to ones that have a rating of seven or above So that’s gonna give us a way to filter down even further There’s a bunch more stuff you can do within the whole Group By, I guess, stage here There’s other operators that you’ve got So it’s very comprehensive, very, very robust I wanna show you what we get if we want to see the actual queries, the raw query that comes out So if we save and do this again, probably a bit hard to read, but we’ve got things like where we are doing a SUM, we’re using the WHERE clause, we are using the HAVING clause, AVG, limiting, and of course, grouping by So this is giving us this whole kind of like construction of a way to to filter and aggregate, and group and all of that And it’s interesting, someone dropped a comment I think maybe you Niko, saw someone post in the community Slack that perhaps this is not the best name for this method Maybe a better name or something like aggregate And I thought that was interesting because this reminds me a lot I’ve done a lot of work with MongoDB, and this reminds me a lot of the aggregation pipeline that you get with MongoDB So, in Mongo if you’re using the aggregation pipeline, you’re gonna do like a limits and a sorts, and a where, and all these things, and so I found that interesting I almost felt like aggregate might be an interesting name for this method, but Group By it is, Group By stands, and it gives us a lot of power to get the the data we want in a much cleaner way This is going to be a much nicer way to aggregating and get all your data in the state that you want it, much nicer than what you previously had to do So that is Group By, any thoughts on that Niko or Tim? – Very nice demo, thank you so much, Ryan And as usual, it’s just a pleasure watching somebody work with Prisma in vs code using all the auto completion It’s just so nice to see that all the times This kind of developer experience is absolutely amazing We had a question in the chat already about Group By, which I think we can already talk about right now The other questions we’ll save for the end But Phil asked if there is any specific reason that the feature uses a list of strings, but the “include” fields that you can also use to load relations users objects with true, where you have to include the relation as an object And it’s true that the API design diverges from how we were using include I’m actually not sure about the reasoning behind that, but maybe Tim can talk about this a little bit more – Yes, I think I can tell you that because I designed this API so it’s quite simple for include, we need to be able to recursively go over our relations So we have a tree structure or graph structure, and that is the nature of the problem we have We want to be able to say, “I wanna go over the posts, “and I wanna go for the comments.” Having a nested array, you can just write that out for fun in an editor, it’s not nice to read It’s nice for the first level, it’s great, but as soon as you go deeper that’s not that nice anymore For Group By however, we will never have Group By relations, it’s always by scaler fields So in that case, we say, well, there’s no nested API, and it’s much easier to have just the array because that’s all there will be, that’s the main reason So we kept it simply because it was as possible, but for include and select, it’s not really possible You could do it, but as soon as you have deep nesting you have the mismatch between the actual nature of the problem and how you write your API It’s like a 2D to 3D mismatch or 1D to 2D I always like the example of when you have an oven, and you have four plates that’s 2D, and then in front of the oven you have all of the knobs in 1D that’s a mismatch So every single time I use a new oven

I don’t know which one, or what is the match, And they have all the time a different match If you would have them also 2D, that would be perfect, and I know what is being meant So now we try to keep that a match, basically – Awesome, that’s great Great to have architecture to answer that question I was wondering too about, Tim, maybe you could speak a bit further to the, something you mentioned which is we’ll never have Group By available for relations only scaler And maybe talk a little bit about that I mean, of course there are technical reasons for that I was wondering a bit about that when I first set out with some demos here, I was trying to see if it would make sense to do grouping across a relation or something like that, but give us a little bit more on why that’s not the case – I think it’s mostly about the capabilities of the databases that we are supporting I just don’t think that all the databases would support this, yeah And Group By as a very interconnected and constrained API that many might not know And there are a couple of little features here that are also interesting to demo For example, everything you use in having needs to appear in by unless it’s an aggregation And we were able to express this on a type system level So let’s say if you would change your rating and you having to just be like seven or something like that directly instead of average, suddenly you get a type error And if you now have in line a the products, the variable, where you assign the variable, if you hover that a bit longer, then you will see this So what we’re doing here, we say field, rating, used in, having, needs to be provided in by and this is a dynamic type system error message that we are generating based on the type of field having, field rating So if what now and having have a different field that we are using, that is not in by the error message will change So we made sure that on the type system level that’s also where we need TypeScript 4.1, because we are really writing on the edge And that’s why 4.1 is needed because we do some crazy stuff Also, if you for example, now introduce a, take one parameter, or skip zero for example, again, we will get a type error And this time it says, if you provide skip you also need to provide orderBy, why is that? Because skip and take are pagination features, and in order to have them stable we need an order, and that’s why orderBy is then required So now if you add an orderBy that works – Forgive me, what’s– – Provide an array, and then in the array there’s an object and that object has a property that is a field name, for example, rating and then descending, D is a string, desc lowercase, and then the comma here, and now it works So we are writing on the edge here for TypeScript That’s why it’s not possible 4.1, and the TypeScript definitions are escalated a bit on this We hope that TypeScript will continue supporting this, because what you hit, I think Ryan, was even that it’s at, but whatever there’s like a recursive type definition So without 4.1 it’s not even possible Also these type system error messages, we’re using template string literals which just landed in 4.1 to make the API as nice as possible And yeah, we try to make everything as nice as possible If you for example, if the by empty, if you just make the by empty, the whole, an empty array, then we also have a special error message on the type system for that It will say “by must not be empty.” So, because normally you can either say in TypeScript it’s required or not It is required but it’s also must not be empty So these are like the little tweaks we put in there to make sure that you get great support from TypeScript – Very cool, awesome I love the in depth explanation, thank you, very cool Well, I’m gonna stop sharing and maybe we can move on to the other items we have got Niko, if you might take it from here – Yeah, let’s talk about React Server Components next And the main reason why we actually brought Tim on here today, because Tim really is a TypeScript veteran I think Tim, since when have you been writing types of code

– 2015 I think – Wow, 2015, and you were also I think probably one of the very early adopters of React back in the day when it came out – I think 2014, I gave the first talk about it, in Girls Schools J. S, and then back then we were mostly talking about Flux or Redux Redux was not out then but the Flux architecture I remember after my talk we had like 45 minutes questions, because you come there, and you’re just telling them everything you do in VC is wrong, and this is now the way to go, and then people had questions Yeah, and since then, I’m using React as well – Yeah, and a lot has happened in the React ecosystem, and especially this new latest development a couple of days before the holidays, the React Team announced a new experimental feature called React Server Components Tim, maybe you can give a one to two quick minutes, one to two minutes quick overview of what React Server Components are, and then we’ll dive a little bit more into the details about them – Yeah, so first of all let me say what they are not All the people who did not watch the video, of course the first thing they said, it’s like PHB basically, no, it’s not the case So it’s server components are on Slack We are now just rendering React on the server, and that’s true But the why it’s not PHP is that it’s much more powerful And the thing is that with PHP you render everything on the server or not Yeah, you can say in my React tree dependency tree of components a part of that can be rendered in the client, and another part can be in the server And a server component can be a child component of a client component and the other way around, and React then is connected to your backend And it will tell the backend, “Hey, I need to render this component with these props, “give it to me.” And then they have a streaming protocol implemented, and the server will now stream back the result What does it mean to stream? So they are not doing web sockets but just a long living HTTP connection And they sent, so if the component on the service side already renders back a loading state for example, they already streamed that to the client, the client control it And then in the meantime, let’s say you need to do some API call or database call, they then will fetch that stuff and then they will render the whole component So it’s really genius, it’s this new streaming protocol that they specked out and implemented And so what is so interesting about this now in this React Server Component, I can fully access everything that Node.js gives me So basically all the libraries that are available, like the fs library or pg So the React team already wrapped a few libraries, pg and fs The reason they wrapped that I can also get into that later, because the wrapping actually doesn’t do a lot So they had this demo, it was also a great video I really can recommend watching it, then I’ll come off For example, in there And they just showed that with pg And of course, it’s clear what we have to do now, which is what Niko proposed in his tweet, where he was like, “No, we don’t wanna do pg, “it’s much better to do Prisma in React Server Component.” Because the React engineers, the Facebook engineers they are, obviously have to tell people, no, no, no, this is unsafe, you cannot just concatenate some SQL in your components, this is really unsafe You should have something that has more control maybe over access and so on And this is perfect opportunity for Prisma – Right, and we’ll talk about that exact point of how you can use Prisma in server components And in fact, we prepared a demo that people already can check out So there is a repo that we are going to show in just a bit And I just wanted to add to the point that you said Tim, about not wanting to use SQL in your React Component because it’s unsafe So of course that’s one aspect of it, but I think the other aspect and that’s especially relevant for front-end developers, is that SQL is fairly far away

from their kind of mental model of working with data So like as a front end developer I think you’re very used to either making calls to a REST API, or to a GraphQL API that just returns objects to you that you can immediately work with So you’re kind of used to that object oriented model of data that you’re working with And working with relational databases and with Plain SQL on the other hand uses a very different kind of data model right? There the data is structured in tables, and relations are represented with foreign keys and the data is normalized, it’s flat So that translation is something that I think no developer really enjoys doing And that’s where these kinds of tools and libraries such as Prisma are coming into play to help developers to do that mapping in a more efficient and also in a more just like pleasant way So let’s maybe dive into the demo Tim, do you want to share your screen, and maybe walk us through the read me off the repo first, and then show the demo – Yes, and I just have to do a shout out here We have apparently then, I’ve come off in the chat It seems like he’s watching, so that’s exciting – All right, greetings to them – So then I’m off, I hope we’re not completely destroying your demo now, ripping it apart, but yeah So how can I actually run another, so want’s the shortcut? – In the top right I think you have this icon with a, – Open Prisma there we go, yeah First of all, thanks Niko for tuning this demo So I think it was a few days after Christmas that I looked into this, watch the video and then decided, okay– – Maybe you can increase the font a little bit, sorry Maybe adjust the font just a little bit – Is that better? – That’s perfect, yeah – So yeah, I watched the video and looked into the code of react-pg and decided we should do the same for Prisma And what we did here, we evoked the official demo and basically I replaced PostGres Native client Also just to be able to run the demo easier, we replaced PostGres with SQLite, but it doesn’t really matter If you don’t wanna use SQLite that’s the beauty with Prisma You can just go in here and you can just say PostgreSQL and you’re done But anywhere we just have SQLite for demo purposes – And you even have instructions in the read me as well If you want to switch the data with provider you have the instructions there So you can set it up with PostGres, with MySQL, and SQL Server If you actually wanna try this out against the real database – Yup – Yup – Perfect, nice, Niko you really tuned this example Yeah, and so for example, here in the demo they have been using, oops, I clicked on this, they have been using a desc like Syntax, where the title is case insensitive like that one so that you can use as a search and translate it to Prisma This is just a Prisma note findMany where the title contains So it’s a bit more natural to write this This is also type safe this particular example is not written with TypeScripts, or not really type safe, but we at least have auto-completion also thanks to Niko Yeah, is there anything else you wanted to highlight from the read me Niko? – Not really I dropped the link to the repo in the chat as well so people can check it out themselves And I really hope that it’s comprehensive enough for everybody to get started and even to play around a little bit further with it So running a database migration and extending the UI maybe, and yeah, of course I also plugged Prisma studio if you wanna just browse the data that you currently have in the database – So yeah, why don’t you show us the actual code where Prisma is coming into play now? – Maybe we first even start the demo – Yeah, let’s go – I think what was it, it’s probably start – Yes – Yes, so let’s open it – And I love the seeded data, like the seeded notes which are in there, especially that one note I think I wrote that note today, it was an excellent note – Yeah, yeah

– I love that energy – Yeah, I also took the seeding script here and adjusted it a bit, I think it got a bit more simple – Yeah, exactly, and now use this Prisma it looks a lot cleaner, so– – So we just do a delete many to wipe all notes and then we just do a promise.all to create them in Prisma And then we do the file system shenanigans In this example, project, the notes are synced both in the database and the file system So you can write stuff the in a marked on file So yeah, so this is the example, you have this list view here, you have a detail view, you can edit something, you can delete something, and you can search, you can search in the title You can for example say thing and only that one will be shown So now the question, how is it actually implemented? And now comes the beauty of the new React Server Components We have a part as rendered in the client, another part in the server Again, I recommend watching the original video to really, because they really explain how that works from a react side, but I can now at least give a quick overview here So what everyone knows are client components Maybe not this one, but let’s say note editor So for example the editor These kind of components that are dynamic, where you actually need to write a client code you still write them in the client, you don’t render them in the server, and they’re normal React Components And in this example, and I guess that will also then be the case later in create React app and next and so on They have a convention they say, if a file ends with .client.js, then it is a file that the compiler system knows I will distribute this to the client If I have a .server.js, it will never go to the client And we also can then in a bit talk a little bit about the difference from this to getServerSideProps and getStaticProps in next.js, a few people will be familiar with that So this is a totally normal client component nothing special about it But now we have this note list and that is what we are seeing here on the left The note list and now it gets special, because we are suddenly are able to use Prisma in here, that’s weird, how can that be? So what we do here, we are importing from a package called react-prisma And react-prisma has a very thin repo around Prisma client, and what it really does So in this, the only thing it’s basically doing is caching results So if you, for example are familiar with the RED Hook API, it’s very similar So every single time this component noteList is rendered we don’t wanna actually go to the database, but if we have the value for that particular query already we just wanna return it We just wanna have it in the notes here And so what we’re basically doing here is translating promises, normal promise API that you know that you can use with 08 or .10 We’re translating that into some kind of promise thing I don’t even know how they are called, I think, yeah Like some suspend kind of data structure, whatever it’s called, It’s basically something that fits into this model here a little bit like a hook And now we’re able to access this The notes might not be there that can happen if this thing is not yet executed and so on This is now built in here into React, that we have support for these kind of suspend data structure And that’s all React Prisma’s doing here I think I can actually show you the code for it React-prisma index PS, so yeah We have these records and then we get the unstable_getCacheForType wakeable from React, React is then able to cache the stuff So here you’ll see the implementation, that’s fairly simple We’re looping over all the queries that the Prisma client has And then we are just generating this API In case you do a mutation, we have failing right now We say, you cannot do that Please directly import @prisma/client

And we will also go into that a bit in a bit You might wonder, yeah, how do I do mutations now? In such an application We have that part of this demo, we will get into that in a bit, but I really just wanted to show you how simple our first implementation here is We are really just doing adjacent stringify on the query, and that’s our cash key, so that’s basically it So it’s fairly simple And so, yeah, let’s actually see that this thing is actually connected, that this is working We could, for example take one, take two, and if we update this, we would just see two items, yeah, so– – And you should be getting auto-completion in there as well, is that working for you? – That is working, yes – Okay, perfect, perfect, because I have heard of these type definitions with the js.comments, and I’m really excited that this works, that you get the auto-completion even for slightly more advanced scenarios in the plain JavaScript by using these type of notation, so that’s gonna be awesome – Yeah, and just a little note, the types here are still incorrect It’s a promise, it shouldn’t be a promise with directly written note These are then things we will still work on Again, we don’t even have to yet a running example for TypeScript, where we can even test this But it’s like already very good direction And yeah, here, we could just show that I think that was the prime example where this tweet that exploded oh no, you go to jail if you do SQL in a React Component Maybe for this Prisma code you’ll go a little bit less to jail I don’t know But still to be fair you have full access to the database And that is also something that we are now thinking about at Prisma, how we can make this more safe I cannot guarantee anything but we might have something like a viewer, and then you can have in userID maybe This go with more on the direction of the end framework And anyway because you don’t wanna re-implement your permission logic all over the place You wanna have that in one place and save, and be sure, okay, I don’t do anything stupid in my React Components, but that is more coming in the future What is interesting now is to see how does this actually work with mutations or API calls? And in this example the React team decided to do a simple REST API with Express And so they just implemented these REST routes So for example, you can say app post to the notes endpoint And what you see here is again the good old Prisma and a promise in API So where are we importing Prisma from here? We are directly importing it from a Prisma Search Client We just follow the same convention that the React team did as well in their demo, where they just imported from pg directly here Whereas in this other file, in this DVB file they have been importing from react-pg So in this case, we just made the conservative decision for now to not allow mutations and Prisma Client here, because again, we have caching And it doesn’t make sense to cache a mutation here, that will just be weird And for now we’re just restricted here There was a user in Slack who mentioned he would like to have something like in useMutationAPI, maybe So we have to see on which API we will land there But for now this is the simple solution and it works So you can just write your normal API routes And I think they are just connected in the in the clients Components Let’s quickly see how that is set up If you, for example, have the note editor, they say deleteNote and deleteNote is just using mutation and I guess that is a React Query or something like that – The guy called basically under the hood – Yeah, especially a vehicle, exactly, it’s where they do a fetch – Very, very nice, thank you for that awesome overview, Tim Really, really insightful I think like one thing you mentioned that might be interesting to talk about is, how that actually compares to things that we already have in the ecosystem, like get server-side props, and get static props from Next.js Because these kinds of tools

they allow you to do somewhat similar things but not exactly the same thing So maybe you can speak a little bit to how they compare, like sort of components with these existing – So with getServerSideProps and getStaticProps, you don’t have the guarantee These components still might be a rendered in the client And the main point is also here really What is bundled? So then also showed in the demo Again, Dan is watching, if I’m saying anything incorrect just correct us in the comments And I think you’ve wrote something in the comments we can read that in a bit I think he mentioned that they had a huge reduction in bundle size at Facebook already in experiments So the main point really with this getServerSide components, for me there were two big takeaways here One is why are they so interesting? Why are they so useful? One is the problem of connection waterfalls, or like request waterfalls Let’s say when you have a bunch of nested components, and first you need to do a request for the parent component, then the trial component can be rendered That component then needs to do another fetch, fetches more data and so on That’s slow and you don’t want that, Relay solves that However, not everyone wants to use Relay And now the idea is really if you just move all of these components to the Server, yes, you still might have the waterfall situation but the distance is much smaller, and so it’s much faster That’s great, that’s one reason And the other reason is reducing bundle size In the demo they showed this example for a date library that was like 30 kilobytes big And in our server, React Server Component, you will never ship that library in that file, that you used in that file to render that component you will never ship that library to the browser, and that is a big difference here If you have getServerSideProps, getStaticProps, that means that Next.js is basically injecting initial props into that component, but that component is still shipped to the client And that component still can do anything like manipulate the DOM, or use the browser API directly windowed or dot whatever So it’s really, getServerSideProps, and getStaticProps it’s mostly about how the initial render of that component happens Get static props means you need to in like statically when you compile your application, you need to have these props ready, which you don’t always have – At build time mostly – Exactly, and getServerSideProps you can do that based on the request so that you could, every single time a request comes in you can fetch the latest blog post or something like that So I would say getServerSideProps behaves quite similar to React Server Components Although again, there’s a note from Dan Also note getServer, maybe you can quickly highlight that note Also not getServerSideProps has to be in top-level component, where as Server Components lets you do a data fetching anywhere in the tree Exactly, yeah, exactly getServerSideProps only works for pages, and yeah You can just use the server components anywhere in your tree It can be a child component of a client component That’s the beauty here And again, a client component can be a child of a server component, that’s the beauty here So yeah, I think that’s the difference there – Amazing, thanks for clarifying that I think that was a point of confusion that a lot of people had, like not really knowing where to draw the lines between these different kinds of tools, and yeah I’m super excited for that So React Server Components at the moment are still experimental but we’ll have a very close eye on the development there, and we’ll make sure that the React Prisma package is always up to date for everybody who wants to tinker with React Server Components and wants to explore how that actually works, accessing your database inside a React Component So go ahead and check out the demo Go ahead and check out the NPM package, and let us know what you think about it We’re always eager to learn about your feedback here Anything else that’s worth mentioning about Server Components, or should we maybe start wrapping up by picking up a one or two questions from the chat?

– I think that’s it so far from my side – Nice, all right, then we had a few questions in the chat earlier that I can bring up So one, I wanted to highlight, is a question about Prisma Migrate, and when it will work together with nativeTypes And in fact, I just checked with our product team today about this particular request, because indeed I’m a big boy, the big value of nativeTypes it’s actually going to come only when you can combine it with Prisma Migrate So at the moment it’s nice that you can already specify these type annotations in your Prisma schema, that you get those when you run introspection, but really though, the big value comes when you can also use it the other way around for migrations And we are actively working on that, and it’s likely going to be released fairly soon We can’t promise anything of course, but it might already be in the next release if not that then probably in the release after So you can expect it within the next two to four weeks And yeah, we are also working on the stable release of Prisma Migrate itself, and the more people are trying it the more people are sharing feedback, the more or the faster we’ll be able to release this So go ahead, check it out, play around with it, use it, and let us know how it works for you so that we can release it for production as soon as possible That was one question There was another question also by Phil, who asked already about the Group By feature before Will I be able to dynamically choose the binary target without modifying the Prisma schema? For example, when building for multi-arch with docker’s buildx? Tim, is that a question that you can respond to? Otherwise I can try to give it a shot – Yeah, so I mean, buildx is really new It’s in still in experimental, but generally we have an auto detection for binary targets And so if you don’t provide the binary target in your schema, then we are automatically detecting it and downloading the right binary for you It could be that you say, I wanna build for my local system that is detected, and I also wanna build for five other systems maybe, because I need to distribute that Then you can use the special keyword in them that is called native So that’s like a place holder that still this functionality is happening, that on the system that is being built on the right binary is being downloaded And additionally, you can say, “But I also want these and those binaries.” I think with that, you should get pretty far If that is not enough, we even have a way to override the binaries that you want to use in runtime, that’s also a possibility There are still a few operating systems that were not supporting for example, ARM on Mac built targets, that we’re not supporting ARM on Mac There you can have that approach, but I think with these primitives that are available you should get pretty far – Sweet, all right, then there’s one last question I think that we can quickly talk from Angelo Moreira It’s not really a question, it’s just a comment about using Prisma together with GraphQL The annoying thing about Prisma is that I didn’t find a way to not have to declare my Prisma models and have GraphQL use those, actually I have to write the models in the GraphQL again And I think that this is actually a fairly common thing that people are running into and that people are wondering about But I wanna explain a little bit also, why this entire notion of wanting your Prisma models, mirror your GraphQL types is a little bit misleading actually and might not be what you actually want So it might feel a little bit counter-intuitive at first sight that you have to define your schema twice, that you are once writing your Prisma models And then especially if you’re using an STL first approach for GraphQL, that you then have to redefine the things that you just defined for your database schema in GraphQL as well But I think that there is a really good reason to that And that is that in most real world scenarios in fact, you want your database structures, the database tables to look somewhat different from the data structures that you’re exposing through your API So it’s kind of intentional that these two are not the same, and there are still ways how you can actually project your Prisma models into your GraphQL API For example, if you’re using Nexus, and the Nexus Prisma plugin So code first approach for your GraphQL schema,

then this will be possible without a lot of extra code, and that’s where you can reuse your model definitions I don’t think that similar tooling exists yet for the SDL first approach But what I could imagine is, for example, a plugin for GraphQL code generator that would enable that But again, with the caveat that in a lot of cases, you actually don’t really want to expose your database models one by one through GraphQL, and rather want these two kinds of data structures to diverge and want to have the flexibility to be able to redefine them and adjust them A typical use case for that is that a user table in the database will typically store a password field, but that password field shouldn’t be exposed in the API So if the GraphQL library that you were using now forces you to expose the entire Prisma model including that password fields via GraphQL, that’s not really what you want in that case So you do want to keep that flexibility in order to be able to kind of diverge between your database layer and your API layer – All right, I hope that explanation made sense And if nobody else has anything to add, I think– – Just a little thing to add here, because Lauren also appeared in the chat, and I also have to say a huge shout out to her Then mentioned earlier in the chat that it was mostly her demo So also thanks to Lauren for making that possible Again I hope we did not rip your demo apart too much You can check our folk out, we wrote it somewhere in the comments, yeah – I’ll drop it again All right, yeah, shout out to Lauren, shout out to Dan, and everybody else who was watching today, and I’ll see you Ryan in two weeks again, and of course in our internal Prisma Slack Enjoy the rest of your days – Bye bye everyone – Bye bye – Bye