solid router's Data API

I'm a little bit confused about createAsync with the load function
In the example of the GitHub repo, there's a cache fn to fetch data

const getUser = cache((id) => {
  return (await fetch(`/api/users${id}`)).json()
}, "users")

const getUser = cache((id) => {
  return (await fetch(`/api/users${id}`)).json()
}, "users")

Then we attached it to the load function of the Route

import { lazy } from "solid-js";
import { Route } from "@solidjs/router";
import { getUser } from ... // the cache function

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

// load function
function loadUser({params, location}) {
  void getUser(params.id)
}

// Pass it in the route definition
<Route path="/users/:id" component={User} load={loadUser} />;

import { lazy } from "solid-js";
import { Route } from "@solidjs/router";
import { getUser } from ... // the cache function

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

// load function
function loadUser({params, location}) {
  void getUser(params.id)
}

// Pass it in the route definition
<Route path="/users/:id" component={User} load={loadUser} />;

Then in the current route component, we have to again attach the fetch function to the create async

// pages/users/[id].js
import { getUser } from ... // the cache function

export default function User(props) {
  const user = createAsync(() => getUser(props.params.id));
  return <h1>{user().name}</h1>;
}

// pages/users/[id].js
import { getUser } from ... // the cache function

export default function User(props) {
  const user = createAsync(() => getUser(props.params.id));
  return <h1>{user().name}</h1>;
}

Then why can't we just attach to the create async only? Why are we attaching the function to both Route's load fn and create async? This kinda confused me

solid router's Data API

I'm a little bit confused about createAsync with the load function
In the example of the GitHub repo, there's a cache fn to fetch data

const getUser = cache((id) => {
  return (await fetch(`/api/users${id}`)).json()
}, "users")

const getUser = cache((id) => {
  return (await fetch(`/api/users${id}`)).json()
}, "users")

Then we attached it to the load function of the Route

import { lazy } from "solid-js";
import { Route } from "@solidjs/router";
import { getUser } from ... // the cache function

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

// load function
function loadUser({params, location}) {
  void getUser(params.id)
}

// Pass it in the route definition
<Route path="/users/:id" component={User} load={loadUser} />;

import { lazy } from "solid-js";
import { Route } from "@solidjs/router";
import { getUser } from ... // the cache function

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

// load function
function loadUser({params, location}) {
  void getUser(params.id)
}

// Pass it in the route definition
<Route path="/users/:id" component={User} load={loadUser} />;

Then in the current route component, we have to again attach the fetch function to the create async

// pages/users/[id].js
import { getUser } from ... // the cache function

export default function User(props) {
  const user = createAsync(() => getUser(props.params.id));
  return <h1>{user().name}</h1>;
}

// pages/users/[id].js
import { getUser } from ... // the cache function

export default function User(props) {
  const user = createAsync(() => getUser(props.params.id));
  return <h1>{user().name}</h1>;
}

Then why can't we just attach to the create async only? Why are we attaching the function to both Route's load fn and create async? This kinda confused me

solid router's Data API

Similar Threads

solid router's Data API

Similar Threads

Similar Threads

Similar Threads