SolidJS•3mo ago

How to use preloaded data

The solid router docs do not give any example on how to use the data returned from the preload function - https://github.com/solidjs/solid-router?tab=readme-ov-file#preload-functions I don't want to use any wrappers such as cache. In the preload function I'm just doing a fetch call. I access the data as a component prop. It comes as a promise. How do I display that data in the component?

GitHub

GitHub - solidjs/solid-router: A universal router for Solid inspire...

A universal router for Solid inspired by Ember and React Router - solidjs/solid-router

13 Replies

brenelz•3mo ago

Use createAsync to call the function https://docs.solidjs.com/solid-router/reference/data-apis/create-async

anthyOP•3mo ago

I was under the impression that the preload function is called internally by the router when the route is being loaded?

import { Route } from "@solidjs/router";

function User(props) {
  return <div>{props.data}</div>; // Promise (fulfilled)
}

async function loadUser() {
  return await fetchUser();
}

<Route path="/user" component={User} preload={loadUser} />

import { Route } from "@solidjs/router";

function User(props) {
  return <div>{props.data}</div>; // Promise (fulfilled)
}

async function loadUser() {
  return await fetchUser();
}

<Route path="/user" component={User} preload={loadUser} />

brenelz•3mo ago

Preload basically just warms the cache for createAsync

anthyOP•3mo ago

so pretty much if I dont really care for those few extra milliseconds of waiting until the component script runs and preloading on link hover, I should just use createAsync without it?

brenelz•3mo ago

Yup. Something like:

function User() {
  const data = createAsync(() => loadUser());
  return <div>{data()}</div>;
}

function User() {
  const data = createAsync(() => loadUser());
  return <div>{data()}</div>;
}

anthyOP•3mo ago

Cool, that does simplify things, thanks! Also you mentioned that that createAsync has cache? In the company we do kinda scuffed caching implementation based on just etags, so I would want to avoid of any caching done by the framework, I just implement my own on top of fetch itself

brenelz•3mo ago

Well usually you wrap the function you call in createAsync with cache. So you can preload and call in the component It can be a bit confusing as it's really just dedupes on the same request not a long lived cache

anthyOP•3mo ago

Ah, so createAsync really is just a light wrapper hah okay, I think I got it, thanks a lot!

ryansolid•3mo ago

Another reason to rename cache People avoid it when they have basically no reason to.

anthyOP•3mo ago

That too, also the way the preload function is presented in the docs is a bit confusing for people with react-router experience, i thought that they are the same thing while apparently they're not 🙂 so am I understanding it right its more like a deduper than a cache?

ryansolid•3mo ago

It's a dedupe + revalidator.. see client side your data is going to stick around anyway unless you fetch it. It's not like we re-render. So it doubles both as deduping and triggering updates when keys change.. So it's a cache in a sense but it goes away when it isn't on the page The same way any client side state would I guess there is one exception, we do keep it around as a back cache incase people navigate using the back button. But it will always fetch fresh on new navigation.

anthyOP•3mo ago

I see, in that way yeah the name is kinda misleading As a newcomer I thought it was the Tanstack query kinda cache

Madaxen86•3mo ago

Well if you have createAsync in a layout it will keep the cached data when navigating routes wrapped in that layout. It's still different than tanstack query, but it's super usefull for auth stuff.

Gaming

Programming

How to use preloaded data