Refetching Route Data with Solid Router

// --- App.tsx ---

const Project = lazy(() => import("./pages/dashboard/Project"));
const getProjectData = ({ params }) => createResource(() => fetch(...));

<Routes>
  <Route
    path="/project/:id"
    component={Project}
    data={getProjectData}
  />
</Routes>


// --- Project.tsx ---

function Project() {
  // SolidJS docs recommend returning createResource()[0]
  // so I wouldn't have access to refetch() if going by the docs.
  //
  // ...then how do I refresh?
  const [project, { refetch, mutate }] = useRouteData(); 

  function someCallback() {
    // This should trigger an update of the `project` signal immediately,
    // since mutate is a signal setter, but it doesn't!
    //
    // The data itself gets updated -- when components rerender, the new values are shown.
    // So this is a reactivity issue.
    mutate({ title: "foobarbaz" });
  }

  return <div>{project().title}</div> // mutate() will not trigger a DOM update here
}

// --- App.tsx ---

const Project = lazy(() => import("./pages/dashboard/Project"));
const getProjectData = ({ params }) => createResource(() => fetch(...));

<Routes>
  <Route
    path="/project/:id"
    component={Project}
    data={getProjectData}
  />
</Routes>


// --- Project.tsx ---

function Project() {
  // SolidJS docs recommend returning createResource()[0]
  // so I wouldn't have access to refetch() if going by the docs.
  //
  // ...then how do I refresh?
  const [project, { refetch, mutate }] = useRouteData(); 

  function someCallback() {
    // This should trigger an update of the `project` signal immediately,
    // since mutate is a signal setter, but it doesn't!
    //
    // The data itself gets updated -- when components rerender, the new values are shown.
    // So this is a reactivity issue.
    mutate({ title: "foobarbaz" });
  }

  return <div>{project().title}</div> // mutate() will not trigger a DOM update here
}

const idToUpdate = 123;

const upd = projects(); // route data resource getter

// array copy alternative that doesn't work either:
// const upd = [...projects()];

upd.find(p => p.id === idToUpdate)?.title = "some new title";

mutate(upd);

const idToUpdate = 123;

const upd = projects(); // route data resource getter

// array copy alternative that doesn't work either:
// const upd = [...projects()];

upd.find(p => p.id === idToUpdate)?.title = "some new title";

mutate(upd);

const getData = () => {
  setTimeout(() => {
    console.log('waiting....')
  }, 2000)
  return {...data}
}

const getData = () => {
  setTimeout(() => {
    console.log('waiting....')
  }, 2000)
  return {...data}
}