Action data but implemented using session cookie and flash to support redirect

[andrelandgraf]

Background

The ability to return JSON from action functions is highly convenient.

It allows:

• Implementing standalone REST APIs and webhooks with resource routes
• Returning "session feedback" such as form validation errors or success messages after form submission

Current trade-offs

Using action data for form validation feedback is highly convenient. However, using action data for session feedback with either Form or useFetcher().Form comes with some trait-offs.

For instance, the Remix docs mention re-submission concerns. I discussed some more hidden pitfalls here; it boils down to the fact that returning action data prevents us from doing a redirect.

It is easy to break progressive enhancement when working with action data. It also limits form reusability across different routes (because it prevents redirecting back to the current route).

I would argue that these issues are non-trivial and hard to reason with (especially for beginners). Since using action data is so convenient, I believe it is tempting to use it even though it might break progressive enhancement.

Workarounds

An alternative way of returning session data is using session cookies with flash. In the action function, you store the session data (JSON) to a cookie and redirect the user. In the loader revalidation step, you then read from the cookie and return the session data from a loader function.

Using session cookies with flash to return action data via a loader function allows us to redirect in the action function. However, it requires extra steps compared to action data.

Proposal

I think it would be amazing for Remix's progressive enhancement story if Remix could expose a helper function to return action data via a cookie and still make it accessible via useActionData and fetcher.data.

The idea is to make the session cookie implementation as convenient as just returning JSON from an action function.

One possible implementation: flash helper function

Add a flash helper function that combines the power of redirect and json in one helper utility.

Signature could look like this: function flash(actionData, redirectRoute, responseOptions, cookieOptions);

By default, flash redirects/stays on the route of the action function (like json) and uses a Remix-internal cookie:

import { flash } from '@remix-run/node';

export async function action() {
    // normal mutation code...
    return flash({ error: 'Email already in use' });
} 

Remix uses a session cookie to store the JSON passed to flash. During the loader function revalidation step, Remix reads from the action data session cookie and makes it accessible via useActionData.

I think it could make sense to reset the action data at the next round-trip to the server (following the flash mindset). This would also align the JS and non-JS experience (loading from the server resets any session data).

Most importantly, flash lets you specify a route to redirect to.

export async function action({ request }) {
    // normal mutation code...
    return flash({ error: 'Email already in use' }, request.headers.get('referer'));
} 

This way, we can return session data and a redirect at once. Since we can also access flash action data via useActionData, using a session cookie is now as convenient as returning JSON data via json.

Final thoughts

We can do all of this today already using a session cookie, flash, and returning action data in a loader function. Still, it's a lot of extra steps compared to just using json and useActionData.

Remix promotes learning web standards and doing things the right way. I believe aligning action data closer to the decade-old way of redirecting after a POST request would fit perfectly into Remix's philosophy.

I know that implementing this might not be feasible. It would create a second way of populating useActionData and raise many open issues. However, I think it could be worth investigating if one way or the other, we could build abstractions to mitigate or avoid the pitfalls of using action data that exist today.