routeData not being refreshed when navigating

import { Show } from "solid-js";
import type { RouteDataArgs } from "solid-start";
import { useRouteData } from "solid-start";
import { createRouteData } from "solid-start";
import { api } from "~/api";
import { getFetchInit } from "~/api/utils";
import { Sidenav } from "~/components/Sidenav/Sidenav";

export const routeData = ({ params }: RouteDataArgs) => {
  return createRouteData(async (_, event) => {
    const { workspaceSlug, projectSlug } = params;
    const init = getFetchInit(event.request.headers);

    const projectsPromise = api.projects.getByWorkspaceSlug(
      workspaceSlug,
      init
    );
    const workspacePromise = api.workspaces.getDetails(
      { slug: workspaceSlug },
      init
    );
    const tasksPromise = api.tasks.getByProjectSlug(projectSlug, init);
    const membersPromise = api.workspaces.getMembers({ workspaceSlug }, init);

    const [projects, workspace, tasks, members] = await Promise.all([
      projectsPromise,
      workspacePromise,
      tasksPromise,
      membersPromise,
    ]);

    const project = projects.find((project) => project.slug === projectSlug);

    if (!project) throw new Error("Project not found");

    return { projects, workspace, tasks, members, project };
  });
};

export default function Project() {
  const data = useRouteData<typeof routeData>();

  return (
    <main class="flex min-h-full max-h-full">
      <Show keyed when={data()}>
        {(data) => (
          <>
            <Sidenav projects={data.projects} workspace={data.workspace} />
            <section class="flex flex-col flex-grow bg-white/[0.025] min-h-full max-h-full">
              <header class="flex items-center pt-4 px-6 pb-4 bg-black">
                <div class="flex items-center gap-3">
                  <p class="capitalize">{data.workspace.name}</p>
                  <span>-</span>
                  <p class="capitalize">{data.project.name}</p>
                </div>
              </header>
            </section>
          </>
        )}
      </Show>
    </main>
  );
}

import { Show } from "solid-js";
import type { RouteDataArgs } from "solid-start";
import { useRouteData } from "solid-start";
import { createRouteData } from "solid-start";
import { api } from "~/api";
import { getFetchInit } from "~/api/utils";
import { Sidenav } from "~/components/Sidenav/Sidenav";

export const routeData = ({ params }: RouteDataArgs) => {
  return createRouteData(async (_, event) => {
    const { workspaceSlug, projectSlug } = params;
    const init = getFetchInit(event.request.headers);

    const projectsPromise = api.projects.getByWorkspaceSlug(
      workspaceSlug,
      init
    );
    const workspacePromise = api.workspaces.getDetails(
      { slug: workspaceSlug },
      init
    );
    const tasksPromise = api.tasks.getByProjectSlug(projectSlug, init);
    const membersPromise = api.workspaces.getMembers({ workspaceSlug }, init);

    const [projects, workspace, tasks, members] = await Promise.all([
      projectsPromise,
      workspacePromise,
      tasksPromise,
      membersPromise,
    ]);

    const project = projects.find((project) => project.slug === projectSlug);

    if (!project) throw new Error("Project not found");

    return { projects, workspace, tasks, members, project };
  });
};

export default function Project() {
  const data = useRouteData<typeof routeData>();

  return (
    <main class="flex min-h-full max-h-full">
      <Show keyed when={data()}>
        {(data) => (
          <>
            <Sidenav projects={data.projects} workspace={data.workspace} />
            <section class="flex flex-col flex-grow bg-white/[0.025] min-h-full max-h-full">
              <header class="flex items-center pt-4 px-6 pb-4 bg-black">
                <div class="flex items-center gap-3">
                  <p class="capitalize">{data.workspace.name}</p>
                  <span>-</span>
                  <p class="capitalize">{data.project.name}</p>
                </div>
              </header>
            </section>
          </>
        )}
      </Show>
    </main>
  );
}