So I talked about this before. Number two, RSC and GraphQL, like, they are very complementary both in terms of concepts, what you can do, but also because of the ways we built in conventions and this golden path into Redwood with GraphQL. RSC just makes sense in the context of Redwood, so for example, we don't need to create another router for Redwood, we'll just build RSC right into it and right on top of it.
I want to show you, really quickly, this GraphQL Fragment Pattern. This might make sense to you. For those who work on Apollo Client in the room, please plug your ears and close your eyes for just a second. And then I want to show you a Redwood implementation of Server Components with Server Actions, because I think it's true that we are the second framework to implement Server Actions behind Next. So, yeah, go Redwood. Toby, actually, go with Toby. That guy's amazing. Right, Tom? Toby's killing it.
Okay, so, real quick, let's talk about GraphQL Fragments. I know, already you're like, I didn't come for GraphQL. But this is a really interesting, high-level idea. And for those who Next and for those who Remix, this should actually look really similar. So, this is how Fragments work. This is how Relay works. You've got a parent component, and you have a root query inside of it. All the data you need for all the components on that page, you're going to go fetch it with that root component. This is how fragments work, okay? So, the parent component, it's going to go fetch the data, render, and now it has all the data it needs on the page, because it knows about these fragment queries inside of the child components, child one and child two. So, what happens? Fetch the root query, get all the data, pass those down. The fragments know what fields to ask for, so the data's there, and then in Fragments and in the GraphQL model, all of your caching, all of your updating, just happens automatically behind the scenes. Apollo Client does this really nicely. There are Redwood startups that are using this pattern at scale, and it works really well. Highly performant, blazing fast. And again, so say you update that root query with a mutation, so there's an update to the data on your page, and then everything, just in a nice little flow behind the scenes, updates and re-renders automatically. That sounds awesome, right? It can be really hard, but that sounds great. So, what if we could do that with something that wasn't GraphQL and made a little more sense inside of the React world? Well, check it out. This is, and I only get to show you 30 seconds, this is a real app you can play with later. This is Redwood server action. And a couple things I want to point out before I run the demo. Notice this is already rendering a server component and a child component. This is functionality working in Redwood right now. And what you're about to see is how we can interact with a client component. Stay on the client component and look at what happens. I'm running this now. Look at what happens with the server component, right. So the red box, outside parent is the server component. Child component, client component inside. Right, so we'll talk about a couple things here real quick. But watch, the two counters are going up separately. Did you see the fetch happen when the server component was incremented? Did anyone notice what just happened there when the page re-rendered? I'm going to run this twice. Okay, the page re-renders. That's it. And I'm going to run that one more time. Okay, couple things happen here. Actually, Tom did talk about this for 20 minutes at a keynote. I'll tell you how to get to this and go through the full presentation here. Right, there is state being managed on the client for the client component. When you fire the server action, you're seeing a fetch there, that's a server action, updates on the server, and that updates the server component, right, which then passes down in everything you need, right, both component and data is passed down from the server.
Comments