Can you show toasts from loaders using a Link

[MattyBalaam]

I have noticed the toasts do not show if you navigate to a page with a Link component because it does not seem like the root loader re-runs. Is this correct?

Example repo: https://github.com/MattyBalaam/remix-toast-loader-test

My use case is to show a toast message if some low-priority api data resources do not load.

[MattyBalaam]

Hmm, so I can do this by passing in reloadDocument but I don’t really want to do it that way because it loads everything, not just loader data.

[MattyBalaam]

I wondered if single-fetch might be the answer, here - but it seems to be even odder…

It now seems to call the root on every load, but now it appears to call the last toast, not the current one 🤯

Screen.Recording.2024-09-12.at.07.50.14.mov

EDIT: I guess that makes sense because the root loader runs first, so the new toast has not been set 🤔

[AlemTuzlak]

Root re-runs under certain conditions, not all of em, page navigations do not always trigger it, I think if you DON'T have a loader on the page you're navigating to it doesn't re-trigger

[MattyBalaam]

In this case (see example) all routes have a loader… but the root loader does not run in classic mode with client-side navigation, and in single fetch it seems like the root loader runs first so it gets the previous toast!

I’m struggling to think how this could work and it feels like reading the loaderData in each route component and triggering the notification that way is the only solution to this problem.

[AlemTuzlak]

well another thing you could do is add an onClick handler to the Link component, eg:

<Link to="/somewhere" onClick={() =>showToast()} />

[MattyBalaam]

In our case we are showing toasts based on responses to APIs called in the loader, e.g. a 404 error calling a resource. This feels like an unsolvable problem with the session flash approach

[MattyBalaam]

@AlemTuzlak now there is a toast middleware solution (thanks very much for this). Could there be a way of setting a toast in a loader now?

[AlemTuzlak]

I think it should be possible as long as there are any loaders on,the page, should be as simple as setting a,toast message

[MattyBalaam]

It does not seem to work unless I’m doing something wierd…

What I am seeing is that if I navigate using <Link /> I do not see a toast. However it will show one if I then refresh the page (or open the link fresh in a new tab).

Also, if I navigate back to home, then the toast is shown when going back to home… so maybe this is some kind of race condition?

root.tsx

export const loader = async ({ context }: Route.LoaderArgs) => {
	const toast = getToast(context);

	return { toast };
};

export default function App({ loaderData }: Route.ComponentProps) {
	const { toast } = loaderData;

	useEffect(() => {
		if (toast) {
			notify(toast.message, { type: toast.type });
		}
	}, [toast]);

	return (
		<>
			<Outlet />
			<ToastContainer />
			<Link to={href("/toast-test")}>toast loader test</Link>
		</>
	);
}

toast-test.tsx:

import { setToast } from "remix-toast/middleware";
import type { Route } from "./+types/toast-test";
import { Link } from "~/components/link/link";

export const loader = async ({ context }: Route.LoaderArgs) => {
	setToast(context, {
		type: "info",
		message: "This is a toast test",
	});

	return { anything: "you want" };
};

export default function ToastTest({ loaderData }: Route.ComponentProps) {
	return (
		<div>
			<h1>Toast Test</h1>
			<p>This route sets a toast message.</p>

			<Link to="/">back to home</Link>
		</div>
	);
}

[MattyBalaam]

Is there anything that needs to change in the entry.server.tsx file? If you reveal the files you get this code, but it seems to just be a hanging value with no instructions on how to connect.