Double redirect results in no toast message

[MattyBalaam]

After migrating to using toast middleware, we have a regression where we have some access controls in our loaders and redirect to parent routes if no access is allowed.

Our tests have picked up an edge case where a direct url is used to a deep page /route/sub-route which kicks the user back to /route if they don’t have access for that page either and immediately redirected for a second time to / then no toast is displayed.

Our code was using return redirectWithError, I have also tried to change to return await redirectWithError and throw await redirectWithError but neither seems to being the toast message back.

[AlemTuzlak]

is this with or without middleware, I'm assuming without? There are some unsolvable race-conditions caused by react-router and this might be a case of that. If you can migrate to stable middleware I think your issue would be resolved

[MattyBalaam]

This is with the middleware.

[tats-u]

remix-toast cannot retain multiple toasts. Toasts except for the last one will be discarded even without the middleware.

[tats-u]

remix-toast should add an API named getToasts to obtain multiple toasts sent by multiple redirects.

import { getToasts } from "remix-toast";

export const loader = async ({ request }: LoaderFunctionArgs) => {
  // Extracts the toast from the request
  const { toasts, headers } = await getToasts(request);
  // Important to pass in the headers so the toasts are cleared properly
  return data({ toasts }, { headers });
}

export default function App({ children }: { children: ReactNode }) {
  const { toasts } = useLoaderData<typeof loader>();

  useEffect(() => {
   for(const toast of toasts){
    // Call your toast function here
    alert(toast.message);
   }
  }, [...toasts])

  return (
    ...
  );
}