From 337f71e67d315d217ceb0701c9d55159f43ef97f Mon Sep 17 00:00:00 2001
From: Kerrick Long <me@kerricklong.com>
Date: Fri, 5 Apr 2024 22:44:23 -0500
Subject: [PATCH 1/2] Update load.mdx

---
 .../reference/load-functions/load.mdx         | 53 ++++++++++++++++++-
 1 file changed, 51 insertions(+), 2 deletions(-)

diff --git a/src/routes/solid-router/reference/load-functions/load.mdx b/src/routes/solid-router/reference/load-functions/load.mdx
index fad2c04f52..31321ed241 100644
--- a/src/routes/solid-router/reference/load-functions/load.mdx
+++ b/src/routes/solid-router/reference/load-functions/load.mdx
@@ -42,5 +42,54 @@ const User = lazy(() => import("/pages/users/[id].js"));
 <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:
+## Accessing loaded data in the component
+
+### `props.data`
+
+The return value of the `load` function is passed to the page component as a `data` prop when called at anytime other than `preload`.
+
+```js
+//pages/users/[id].jsx
+export default function User(props) {
+  return <p>{ props.data().name }</p>
+}
+```
+
+### Data APIs
+
+Alternatively, the following new Data APIs can be used:
+
+- [`cache`](https://docs.solidjs.com/solid-router/reference/data-apis/cache)
+- [`createAsync`](https://docs.solidjs.com/solid-router/reference/data-apis/create-async)
+
+```js
+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"));
+
+// Pass it in the route definition
+<Route path="/users/:id" component={User} load={loadUser} />;
+```
+
+```js
+//pages/users/[id].data.js
+
+import { cache } from "@solidjs/router";
+
+export const getUser = cache((id) => { /* do loading */ }, "users");
+export const loadUser = ({ params, location }) => fetchUser(params.id);
+export default loadUser;
+```
+
+```js
+//pages/users/[id].jsx
+
+import { getUser } from "./[id].data.js";
+
+export default function User(props) {
+  const user = createAsync(() => getUser(props.params.id));
+  return <p>{ user().name }</p>
+}
+```

From 88cd9cabfe9fe2cc33e1002f4be12dada415e711 Mon Sep 17 00:00:00 2001
From: Daniel Afonso <danieljcafonso@gmail.com>
Date: Mon, 13 May 2024 19:40:19 +0100
Subject: [PATCH 2/2] docs: move stuff around in load.mdx

---
 .../reference/load-functions/load.mdx         | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/routes/solid-router/reference/load-functions/load.mdx b/src/routes/solid-router/reference/load-functions/load.mdx
index 31321ed241..528dd37dc4 100644
--- a/src/routes/solid-router/reference/load-functions/load.mdx
+++ b/src/routes/solid-router/reference/load-functions/load.mdx
@@ -23,12 +23,6 @@ function loadUser({ params, location }) {
 <Route path="/users/:id" component={User} load={loadUser} />;
 ```
 
-| key      | type                                           | description                                                                                                                                                                                                                                                                                                                                                                 |
-| -------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| params   | object                                         | The route parameters (same value as calling [`useParams()`](/solid-router/reference/primitives/use-params) 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()`](/solid-router/reference/primitives/use-location))                                                                                                                                                                                                                              |
-| intent   | `"initial", "navigate", "native", "preload"`   | Indicates why this function is being called. <ul><li>"initial" - the route is being initially shown (ie page load)</li><li>"native" - navigate originated from the browser (eg back/forward)</li><li>"navigate" - navigate originated from the router (eg call to navigate or anchor clicked)</li><li>"preload" - not navigating, just preloading (eg link hover)</li></ul> |
-
 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.
 
@@ -51,7 +45,7 @@ The return value of the `load` function is passed to the page component as a `da
 ```js
 //pages/users/[id].jsx
 export default function User(props) {
-  return <p>{ props.data().name }</p>
+	return <p>{props.data().name}</p>;
 }
 ```
 
@@ -78,7 +72,9 @@ const User = lazy(() => import("./pages/users/[id].js"));
 
 import { cache } from "@solidjs/router";
 
-export const getUser = cache((id) => { /* do loading */ }, "users");
+export const getUser = cache((id) => {
+	/* do loading */
+}, "users");
 export const loadUser = ({ params, location }) => fetchUser(params.id);
 export default loadUser;
 ```
@@ -89,7 +85,15 @@ export default loadUser;
 import { getUser } from "./[id].data.js";
 
 export default function User(props) {
-  const user = createAsync(() => getUser(props.params.id));
-  return <p>{ user().name }</p>
+	const user = createAsync(() => getUser(props.params.id));
+	return <p>{user().name}</p>;
 }
 ```
+
+## Props
+
+| key      | type                                           | description                                                                                                                                                                                                                                                                                                                                                                 |
+| -------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| params   | object                                         | The route parameters (same value as calling [`useParams()`](/solid-router/reference/primitives/use-params) 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()`](/solid-router/reference/primitives/use-location))                                                                                                                                                                                                                              |
+| intent   | `"initial", "navigate", "native", "preload"`   | Indicates why this function is being called. <ul><li>"initial" - the route is being initially shown (ie page load)</li><li>"native" - navigate originated from the browser (eg back/forward)</li><li>"navigate" - navigate originated from the router (eg call to navigate or anchor clicked)</li><li>"preload" - not navigating, just preloading (eg link hover)</li></ul> |