Revalidate current route after global modal submits with fetcher.Form

[mediadiet]

Probably a simple question but I'm trying to find the right way to handle the following scenario:

I have an app where a user can add items to a list - they do this through a global modal rendered in root.tsx, which has a fetcher.Form on it (they can use this modal anywhere in the app). The route mylist.index.tsx renders the list component showing the user's list of added items, and the route mylist.add.ts has the action function the global modal is posting its fetcher.Form to.

I'm struggling to get the data to revalidate after submitting using the modal -- the specific scenario is the user is on their mylist.index.tsx, submits the form, & should see the revalidated list immediately after the fetcher.Form's action returns a {success: true}. I've tried useRevalidator(), navigate("."), and it's not causing a reload automatically.

Am I missing something in my set up that would cause this list to reload?

Thanks!

Edit: After looking through a few things, I'm stuck on the following: When I submit using the fetcher.Form to /mylist/add, I see the loader on the server re-running but useLoaderData isn't getting the new data.

mylist.tsx: -- When I console log data[0], I'm seeing the loader re-running on the server and showing the latest list item. But the rendered MyList component's useLoaderData isn't updating its data.

export async function loader({ request }: LoaderArgs) {
  const data = await getUserList()
  return json({data})
}

export default function MyList() {
  const data = useLoaderData<typeof loader>();

export default function MyList() {
  return (
        <div className="mt-8">
          <Outlet context={data.data} />
        </div>
  );
}

mylist/add.ts

export async function action({ request }: ActionArgs) {
  const body = await request.formData();
  const newItem = Object.fromEntries(body);
  const result = await addNewItem(newItem)
  return {success: true}
  }

[mediadiet]

For anyone that's stuck & finding this issue, I figured out what was happening -- I had a useEffect that was unmounting the modal as soon as the action the fetcher.Form was submitting to returned {success: true}.

Make sure you let the fetcher's actionReload run before closing or unmounting the modal (if (fetcher.type === 'done' && fetcher.data.success) closeModal())! 😅