Client Side Mutations

[00:00:00]
>> So what we wanna do now is if we head back into our app, we need to add a handler for handling the new folder. So we need to be able to handle that and then we need to add it to a. We basically have to do this thing where, because if we go back to our app, right, this folder, this list of folders, right on the left, this gets populated at server time, okay?

[00:00:23]
But now we're about to start creating folders. So now we got two different places of state. This state came in from the prompts from the server but now we're on the front end and we're like creating folders and I wanted to pop up here. I don't wanna do a whole page refresh just to see that folders.

[00:00:36]
So we have to merge those states. We're gonna do it manually but just let you know there are libraries that handle this for you, like I'm pretty sure SWR. What they'll do is they'll take the cash that you got, they'll take the data that you got server side and prepopulate your SWR cache client side with that data and then you read from that cache.

[00:01:02]
So I'm pretty sure they do that. We're basically doing that ourselves. We're just gonna merge them together and that's always gonna give you up to today state. So when you click create new folder, you'll actually see it pop up here and then you refresh. That's going to do a query to get all of them and then it'll still be there.

[00:01:15]
So we'll still be good to go, so this is technically like a hybrid app, right? So we're pre populating this stuff on the server, but then we still have that ability to do things on the client so that's what we're going to do. So let's head over to, let's head over to our app and this is where we're going to add the handler.

[00:01:35]
As an example, just to give you an idea of what this is gonna look like. You can go over to components and I wanna say folder pane. There's already a handler here to handle the new doc. So you can see this one's already ready. It's already got the URL hooked up and everything is ready to go.

[00:01:52]
So we can pretty much see what's happening here to get an idea of what's going on, but it's really just doing a fetch call and then it's like I said, it's merging that state. It's, it's basically created a new local state that is initialized with a state from the server and then we merge it with the state that we got back from the API call and that's how we keep track of that state, it's very simple.

[00:02:15]
So we're just gonna do the same thing inside of our app, so we go here and I wanna say it's gonna be called, what did I call it? Make sure I get this right, handle new folder. So we'll have handle new folder with like some new state so let's do that.

[00:02:35]
So the first thing is let's create our new state, we'll say costs and I'll call it all folders. I think that's what I've been calling it. And then set all folders, and that's gonna equal use state and it's gonna default to the folders we get from the server.

[00:02:57]
That's what we wanna initialize it with. We wanna start this, on the client side we wanna start this app or whatever folders we already got back from the server cuz we're gonna be reading from all folders now. Right now we're reading from folders, we gonna look at folders, we're passing it in, we're not gonna do that anymore.

[00:03:14]
We're actually gonna pass in all folders now, okay? And all folders starts off with whatever was from the server or there was nothing from the server with the same. And the reason we're doing that is because now when we update, when we create a new folder on the client side, we're gonna set all folders to have this new folder too and that way it shows up immediately without a refresh, right?

[00:03:36]
And then if you do refresh it, it'll just get all folders down here and your new one will be in there too, so that's why we're doing that. The next thing we wanna do is create that handler and I call it again handle the folder. So const handle few folder like that.

[00:03:55]
It's probably gonna take a name, because that's really all we need here and then I'm just going to say Results equals awaits fetch and then we can do process., ENV., what did I call it? Let's go look at our ENVs right quick. I almost clicked on it. It almost got me.

[00:04:25]
There we go, next public host. Quick tip, if you want to be able to access ENVs from your ENV file inside your front end on next.js, you have to prefix the ENVs with next public. Underscore if you don't prefix it with that it would only be available on server-side functions and APIs if you want it to be available in the client.

[00:04:47]
You have the prefix it with this. Okay, so we're gonna fetch that /API/ Folder. Yep, that's the route that we just made, right? So, API/folder index, so, yep, that's the route. Then we're gonna say method is gonna be a POST, method was a POST. Body is gonna be a JSON.stringify, the body was just a name here and I'm just gonna add some headers just in case because I know fetch is kind of crazy.

[00:05:26]
So I'm just gonna say give me that content type. Set that content type to application, okay json. Okay, so we're gonna do that we're gonna wait we'll make this async so it doesn't trip out on us like that. What does that line right there, am I the only one seeing that line?

[00:05:49]
That's crazy, okay. All right, okay, that was tricky, all right, so we got that, what is this talking about. It's basically saying, hey, if you're not using anything inside of your react component you just put this outside of your component. Yeah, but I'm actually about to use it so we can now get the data which will be await rest.jason.

[00:06:22]
So we get back the data was actually a data prop because I always send back data from our servers, right? That's what we just made if we go look at this, always send it back as data. So, it's gonna be data here and then now we update the all folder set.

[00:06:37]
So, I can say set all folders and this is where you might just say, all right, I'm gonna set it to a new array, whatever all folders was, and then the new folder. But a good tip is if you're gonna be setting a state, that's dependent on the previous state, you should put a function here instead and get a state that way react cues it up correctly.

[00:07:02]
In its rendering cycle, the wait to make sure you have the correct state because if something else is setting that statewide or calling that you're gonna have the wrong state. So by doing this, you're queuing up the state to make sure that this is the current state that you want.

[00:07:14]
So this is the current list of folders. So I'm gonna do that then I can return a new one here, which is basically just a spread of the state, plus this new one that I just made. So we got that handled a folder now we can take this down here and somewhere down here, we should.

[00:07:37]
There we go on new folder, we can just pass that here handle the folder like that. All right, let's see if we didn't break anything, so now if I try to create a folder, I can give it a folder, work. Things, hit create, boom. Now they got work things right now if I create a doc, I can say trip ideas, I got trip ideas, okay?

[00:08:12]
And then now we should get some auto saving on the editor. So if I go here and I wanna say, change this to change this, with the auto save I hit Refresh It's good to go so we're all good here, okay? Any questions on that?
>> You are making REST API's and you make that comment that diversity guys say that they do not recommend to make an API requests so on get side server side props from your own props, right.

[00:08:50]
But if I am, I like to hang out with the cool kids making graph QL API's. [LAUGH] How do I work that out because I will end up getting my resolver code in pulling that in my get server side props, and how do. I initialise there is a way that I initialise my cache data from using that get props from server side to initialize my Apollo clients.

[00:09:25]
Pretty seems like it's complex to do.
>> Yeah, so the question was if I'm using something like graph QL, I'll get server side props. It seems like I have to take all my resolver code and throw it and get server side props and then how do I go about.

[00:09:41]
Managing that initial cache for Apollo once it's client side so the first thing is, I think the way I would do it with graph QL and get server side props is and at least the pattern that I see a lot of people do is that. They'll one they'll make a route kind of like we did right, so we made a route, we have our API routes, okay?

[00:10:04]
What they'll do is it'll take this logic, or at least this logic right here, this logic that's completely independent from anything that's request related and it just does database work. And it'll expose that inside of this file too, that's like a different function that you can import and then I'll import that into their handler.

[00:10:22]
So as far as Graph QL goes, I know that Graph QL, if you're using just like the Apollo's, like high level express Graph QL, you might to have this flexibility. But if you just use just the Graph QL library, you can pass it a raw query, a set of resolvers, some initial state and it'll execute it right there.

[00:10:44]
So you basically, if you would just wrap that and pass that to your handlers as an export, I think that's a way around it. And I'm pretty sure last time I used Apollo, they, I think they let you, they let you like get into that. So you might even be able to get into that, that raw graph QL, js live and do that.

[00:11:02]
But yeah, I don't think you need to bring in all your resolvers like that I just think you need to. It's more about like, how do you get off? How do you get away from the dependency of like express? How do you remove that dependency, but at the same time, note that Inside of our Git server side props, I mean, this context object has a request and response here.

[00:11:24]
So, right, but obviously your graph QL request wouldn't be on a query string. So now that's gonna help you but you do have access to the request and response here. So there's nothing stopping you from [LAUGH] initializing Apollo in here. You could tell it to do that if you wanted to and I wouldn't be surprised if that's the recommended approach.

[00:11:47]
So you could totally do that but yeah, I think you just need to not use anything that relies on HTTP for graph QL when using get server side props, so whatever that means. Do that whatever your framework as far as initializing the cache, again, you could try to do this yourself manually, but I don't recommend it.

[00:12:06]
Because it basically requires you to like write to the file system, like initialize, it is too much work. I would imagine Apollo, if they haven't solved this already, I would imagine they're about to solve it. Because that just seems, cuz I know they had that with regular server side react already.

[00:12:27]
So adding it for next just seems like a no-brainer. I haven't used Apollo in a while, which is why I can't give you a de facto answer, but I'm pretty sure that's something that they would have. I don't know why they would have that right now. We can in fact look it up, we can just look it up right now.

[00:12:43]
Apollo, next is SSR. Let's see, there we go, so they have a guide here, configure it with next.js if I look up cache. So they have a in memory cache here. Installs the Apollo Client on next page context or useful if you want to use Apollo client inside get static props, get static paths.

[00:13:06]
Yeah, I would imagine because they're doing that right there that they're probably gonna allow you to do it. They wouldn't care about you sharing the context of a provider on the client side and server side if it wasn't going to be used to cash so I would imagine that is probably taken care of for you.