Leverage SolidStart Server Actions to Enable Single Flight Mutations
Server actions make it easier to perform mutations in our applications. But what happens when our router is also fully aware of your route data dependencies? What if there was a way to optimize the typical waterfalls generated from mutations?
In this lesson, we are going to learn how to create server actions and perform Single Flight Mutations.
[00:00] For this lesson, so we can check what happens in the network tab, let's have SSR turned off. Right now, whenever we submit a new user, our app has the following flow. 1st, there is a post request that will be responsible for adding our user. 2nd, after the post succeeds, there is a navigate to our index route. 3rd, on the index [00:19] route, there is a get request to refetch our data. Currently, we are relying on this on submit to handle everything by us. But what if instead we could leverage some web standards and just tell the form to call an action whenever it's submitted? To do this, we need to refactor our add user function. Let's start by importing action from Solid Router and wrapping [00:39] the add user function with it. Because we will be using our form to submit data, we should expect to receive form data instead. So let's change it here and make sure we extract our user information from the form data. Now all we need to do is delete our on submit and instead pass our add user to [00:59] our form action and specify our method, which will be post. If we check our app now and try to submit a new user, we should see it is working. There is just one issue. We are not navigating back to our index route. The reason for that is because we are no longer calling navigate on our form. Well, our form doesn't even need to know where it [01:19] needs to navigate. So let's remove that from here and pass this responsibility to our action. Right now, we are returning the new user, but instead, we want this form on success to redirect to our index route. So let's import redirect from solid router and throw redirect to the index route. Let's now check our app and add a new user. [01:40] As you can see, it worked, but there is something different in our network tab now. There is only one request. This is what it's called single flight mutations. Because our router is now fully aware of all data and actions, it knows that when the redirect happens, the index page will need certain data. So in parallel, it sends the new page back, fetches the [01:59] data, and streams it back all in one flight.