Data Fetching in Server Side Props

[00:00:00]
>> Okay. So, now what we wanna do is we wanna use these methods inside of our server side prop. So, this one's gonna be a little crazy because and this comes down to a design decision that you really got to figure out which is best for you. And this is where it's gonna get maybe a little complicated.

[00:00:20]
But basically, because of the way that I created the page for this app page, right, because it is a common service should be does, because it is a catch all optional route. Let's think about all the different states that this page could be in. Actually, I wrote them down here.

[00:00:37]
So, one if you navigate to this page, if you just navigate to slash app, you're gonna be in this state, which is, where's gonna show you all the folders which looks like this. You're gonna be in this state right here. Now one folder selected, but you'll see all them here on the left.

[00:00:53]
Okay, so they got to handle that. But if you navigate to slash app slash, some ID here of a folder, then that's gonna handle the state of, okay, now you're here, but you clicked on one of these. So, I need to show you the content of that folder here on the right side.

[00:01:09]
So, you got to handle that state. But because this is a catch all, it can go past that. So now, the other state is gonna be app slash 1 slash 2. And what that's gonna look like is, you're gonna see all the folders, you're gonna see the documents of a folder.

[00:01:26]
And then you click on one of those documents and now you're inside of a document. So these to handle that state too. So, it needs to handle the all folder state, they show me the documents for this folder state and then the editor for the documents. All in one route.

[00:01:39]
Now, you might ask yourself, why would I do that? Why would I put all of those in one route and have to figure it out, up here somewhere? Well, the reason I decided to do that was one just to show you the power of Git Server side props, and how it can be pretty amazing with these catch all routes.

[00:01:55]
But two, if you go to another path of okay, I'm gonna create just a page for every single one of them. I'll make a route for slash app, that would be slash app slash index don't tsx. Now, I'll make one for slash app ID, so that would be slash app and then brackets id tsx, no spread.

[00:02:14]
And then, I'll make one for this one, right? Okay, yeah, you could do that. But if I look at my app, they're all the same layout. They're all the same everything. I mean, they're all gonna have the same thing, they all gonna have the same folders. Everything's exactly the same.

[00:02:30]
So, I decided that I was gonna do that. And again, I wanted to show you all a different way. The way you coulda got around it is you still gotta make each route, and then you could just make a layup component that just got all that stuff. And then that way you still only wrote it once.

[00:02:42]
So there's many ways you could have done this. Me, I thought it'd be pretty clever just to make one route that handles all three of them and we just figure it out here. So that's what I'm doing. All right, so let's do it. So right now, so far, our Git session just, I'm sorry, our Git service, our props, all it does is get a session.

[00:03:04]
But what we got to do now is we need to get all the different states here. So, if I go look at the props that it's expecting, it's expecting folders, an activeFolder, an active document maybe and then activeDoc. So, let's handle these Gits. Let's get all the folders first.

[00:03:22]
So, how are we gonna do that? Well, we're not gonna hear API. So, first of all, I said well I'll do a fetch. If you didn't know, why do we do next as bundle stretch so it's available to you everywhere. So you might say, I'll do a fetch to my API, and just get it well.

[00:03:37]
One, we didn't create an API for those handlers, those functions that we just made. We didn't hook them up to an API. They're just functions. So no, we're not gonna do that. And if we did, we still wouldn't use it. Like I said, in the docs, you're heavily recommended not to use your own API here.

[00:03:51]
Why do they say that? The reason they say that is because you could put whatever you want here. And you can put server side logic here. So there's no point in your application reaching outside to the internet just to come back to itself to hit the API, when you just go straight to the database here.

[00:04:07]
Why waste that network call to go to your database when you can use your database right here. That's exactly what we're gonna do. So, we're gonna import our database functions here. So, I'm gonna import from db. Just like that. When I import from db, and I'm gonna get folder and I'm gonna get doc.

[00:04:33]
Yeah, I'm importing some service site database stuff in our react component. Pretty crazy. I think this also is very trippy and kind of hard to explain. But remember, next as is getting rid of this force on the browser, so it's not gonna be here. Otherwise it wouldn't work.

[00:04:50]
It'll just break. Okay, so now that we have that. Let's start with getting all the folders. So, first one, how do we determine what state that we're in? Why do we have this context here? This context here is got to tell us what state that we're in because we can look at the parameters to decide, if there's no parameters, then it went to slash app.

[00:05:12]
If there's one parameter then they went to slash app slash and folder ID. If they went to two parameters and their template editor for a document. So we know what to do. So that's how we can determine what's what. So regardless, no matter which one you go in, we got to get all the folders.

[00:05:28]
So, let's just do that real quick. So, we'll say folders = await folder dot. Look at dot get folders. Okay, but get folders takes into db. So, where do I get the DB? Now, not a problem. We just gotta connect to the db first. So, let's do that.

[00:05:49]
So we'll say, actually, I think I have it in here. There we go, connectToDB. So, you gotta love typeScript. So, I'll say DB = await connectToDB like that. So now we got to DB. And then the getFolders takes the db like that, and then it takes a user ID.

[00:06:17]
So, where are we gonna get a user ID? Look at that. We've got a session here and we know the session has a user property on it, but that session right now doesn't have an ID on it, so we're about to fix that. But that also means we don't really wanna continue if there is isn't a session.

[00:06:33]
So, what we'll do is we'll say if not session, so there just really isn't a session here because you're not signed it, then let's go ahead and just get out of here. Cuz the front is gonna handle this anyway with that modal that we put anyway, so I'm just gonna say, whatever that is, no undefined, who cares?

[00:06:53]
We're just gonna return immediately because we don't have a session. So then, I'm gonna say, okay, cool. We're good here. Got our database. Let's assume there's a session dot user dot id, we'll fix that. And then, why is this thing tripping? Okay, it's a slow. So we got our folders, so we can go ahead and put the session there.

[00:07:19]
Got the folders there. That's looking good. Then the next thing is, we need to just check to see where we are. What are these props, what do these params look like? So, this is what I'll do, I'll say if context dot params dot, abd the param I'm looking for is the same thing over here, id.

[00:07:39]
So id. But because it's a catch all, id is actually gonna be an array. Okay. Id is gonna be an array of every single parameter in the order that it's coming, right? So if I have in this case, slash 1 slash two, id will be an array with 1 and the first index and then 2 in the second index.

[00:07:59]
So, if params, if ctx dot params dot id dot length is greater than 0, I guess. I'll just put this, if that. So, if there is a length as there's something in there, then they're trying to go here. Okay? So, let's go ahead and get the current folder.

[00:08:22]
So, I'll say get the activeFolder. ActiveFolder equals, we got folder dot getFolders. Okay, so we already have all the folders, so we don't need to have the database again. I could just say folders dot find, grabbed the matching folder. Get this dot id. And see if that triple equals ctx dot params dot id bracket 0.

[00:08:55]
So, find me the folder that matches that parameter, which will be here, one. Okay, so I got that one, that's activeFolder. We'll go ahead and scope this like that. ActiveFolder. Okay? And then, what I wanna do is I wanna check to see if we're here. See if they added another parameter that are actually here.

[00:09:29]
But before I do that, if I got the activeFolder, I actually need to get all the documents for that folder. All right, I was just going to cover what I have here because apparently, that's right, let's see. All right, let's see what happens. And we'll keep going forward.

[00:09:48]
Go back to our page here. Make sure that's good. There we go. Good. Cuz it's not there, It's nothing. So it's there, there's something in there. So, let's get that and then we'll get the activeDocs. Which will basically be Doc awaits Doc dot, what we got? GetDocsByFolderId. There we go, passing the database then passing the folderId of activeFolder dot id.

[00:10:26]
So that will give us the activeDocs, so we're good there. We can pass that down Like that. And then the last thing we wanna do is just check to see if ctx dot params dot id dot length is greater than 1. So that means they're down here now.

[00:10:59]
So the down here, then we need to get the activeDoc singular. So get that one Doc, this one right here. Got that one. So what we can do is we can just say, yeah, cool. Yeah, we wanna get that then we can say activeDoc Equals to. We already have activeDocs here, so we can just do a find.

[00:11:29]
Let me say d dot === ctx dot params like that, id bracket 2. Now, we go. So then now we got all of that, I think Some of the stuff is null, so we have to figure that out and we'll kind of see. Yeah, it's freaking out right now.

[00:11:50]
So, serialization of activeFolder returned from getServers dot Props undefined cannot be serialized, so null or emit this value. So, I'll just make an object. So you'll see that I guess. So, we'll just say const props. And that's. So, then we just come down here and say, we have to do all that nonsense.

[00:12:13]
I'm gonna say props dot that, props dot that, props dot that. This will just be Props, so like that. Okay, and this thing is freaking out because TypeScript doesn't like that. There we go. Okay. So, let's try that out. Okay, cool. So, obviously we're not gonna see anything here because we haven't created any folder, so nothing's gonna show up here.

[00:12:52]
But the fact that it didn't break and everything's there, we're good to go. So what we're gonna do now is, we're going to make it aware when you sign up for the first time, we give you some seed data.