Load Functions

Load

Edit this page

With smart caches waterfalls are still possible with view logic and with lazy loaded code. With load functions, fetching the data parallel to loading the route is possible to allow use of the data as soon as possible. The load function can be called when the Route is loaded or eagerly when links are hovered.

As its only argument, the load function is passed an object that can used to access route information:

import { lazy } from "solid-js";
import { Route } from "@solidjs/router";


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


// load function
function loadUser({ params, location }) {
  // do loading
}


// Pass it in the route definition
<Route path="/users/:id" component={User} load={loadUser} />;
keytypedescription
paramsobjectThe route parameters (same value as calling useParams() inside the route component)
location{ pathname, search, hash, query, state, key}An object that used to get more information about the path (corresponds to useLocation())
intent"initial", "navigate", "native", "preload"Indicates why this function is being called.
  • "initial" - the route is being initially shown (ie page load)
  • "native" - navigate originated from the browser (eg back/forward)
  • "navigate" - navigate originated from the router (eg call to navigate or anchor clicked)
  • "preload" - not navigating, just preloading (eg link hover)

A common pattern is to export the load function and data wrappers that correspond to a route in a dedicated route.data.js file. This imports the data functions without loading anything else.

import { lazy } from "solid-js";
import { Route } from "@solidjs/router";
import loadUser from "./pages/users/[id].data.js";
const User = lazy(() => import("/pages/users/[id].js"));


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

The return value of the load function is passed to the page component when called at anytime other than preload. This initializes things in there, or alternatively the following new Data APIs can be used:

Report an issue with this page