SolidJS•16mo 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

brenelz•9/6/24, 1:35 AM

Use createAsync to call the function

brenelz•9/6/24, 1:36 AM

https://docs.solidjs.com/solid-router/reference/data-apis/create-async

anthyOP•9/6/24, 1:44 AM

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•9/6/24, 1:48 AM

Preload basically just warms the cache for createAsync

anthyOP•9/6/24, 1:51 AM

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•9/6/24, 1:54 AM

Yup. Something like:

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

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

anthyOP•9/6/24, 1:57 AM

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•9/6/24, 1:59 AM

Well usually you wrap the function you call in createAsync with cache. So you can preload and call in the component

brenelz•9/6/24, 2:01 AM

It can be a bit confusing as it's really just dedupes on the same request not a long lived cache

anthyOP•9/6/24, 2:03 AM

Ah, so createAsync really is just a light wrapper hah

anthyOP•9/6/24, 2:04 AM

okay, I think I got it, thanks a lot!

ryansolid•9/6/24, 6:47 AM

Another reason to rename

cache

cache

ryansolid•9/6/24, 6:47 AM

People avoid it when they have basically no reason to.

anthyOP•9/6/24, 8:53 AM

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

Rryansolid Another reason to rename `cache`

anthyOP•9/6/24, 4:53 PM

so am I understanding it right its more like a deduper than a cache?

Aanthy so am I understanding it right its more like a deduper than a cache?

ryansolid•9/6/24, 6:19 PM

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..

ryansolid•9/6/24, 6:19 PM

So it's a cache in a sense but it goes away when it isn't on the page

ryansolid•9/6/24, 6:19 PM

The same way any client side state would

ryansolid•9/6/24, 6:20 PM

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•9/6/24, 6:28 PM

I see, in that way yeah the name is kinda misleading

anthyOP•9/6/24, 6:28 PM

As a newcomer I thought it was the Tanstack query kinda cache

Madaxen86•9/6/24, 8:26 PM

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.

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} />