How can we lazy load route data using @solidjs/router ?

When using this pattern:

import UserData from "./pages/users/[id].data.js";
const User = lazy(() => import("/pages/users/[id].js"));

// In the Route definition
<Route path="/users/:id" component={User} data={UserData} />;

import UserData from "./pages/users/[id].data.js";
const User = lazy(() => import("/pages/users/[id].js"));

// In the Route definition
<Route path="/users/:id" component={User} data={UserData} />;

Here, the User component is lazy loaded but what about the UserData ? Is there a way to do that?

14 Replies

shogun2077•2y ago

Are you making use of the useParams hook in the User component? If so I would suggest fetching the user data within the User component using the :id parameter gotten using useParams

VexcitedOP•2y ago

nope im not

shogun2077•2y ago

I would suggest going that route if you would like to keep everything segregated to happen only when requested

shogun2077•2y ago

Like so

VexcitedOP•2y ago

yeah that was what i was doing before using ...data.ts but i was wondering if there was a solution with route data

shogun2077•2y ago

Oh Ok. I haven't used route data much. Have you tried using the lazy function? The same way you did with the User component

Unknown User•2y ago

Message Not Public

lxsmnsyc•2y ago

in what way does this lose SSR

VexcitedOP•2y ago

just want to say that im using just SolidJS without any SSR stuff, it's just a SPA

Unknown User•2y ago

Message Not Public

VexcitedOP•2y ago

what this might work but well that is just a createRessource for another createRessource so ugh - wanted to use route data to make my code look simpler 😭

lxsmnsyc•2y ago

What he meant is to lazy load the function you are using for the createResource e.g

const fetchData = await import('./path/to/fetch-data');
return fetchData(arg);

const fetchData = await import('./path/to/fetch-data');
return fetchData(arg);

Unknown User•2y ago

Message Not Public

VexcitedOP•2y ago

by doing this, I'll get the module in the useRouteData so

const user = useRouteData()
user() // will give { default: () => ... }

const user = useRouteData()
user() // will give { default: () => ... }

so to access the data returned i have to ((user()).default())()

Gaming

Programming

How can we lazy load route data using @solidjs/router ?