SolidJS•17mo ago

typing Page props ?

is it possible to type the props for the page? I'm tryna to block the page until render, and the best I've come up with is:

const load = cache(
  (userId: string) => api.getSelectionsByUserId(userId),
  "selections"
);

export const route = {
  preload: () => load,
} satisfies RouteDefinition;

export default function Username(props: ManuallyTypePropsAfterLookingAtConsoleLog) {
  const selections = createAsync(() => load(users[0].id), {
    deferStream: true,
    initialValue: props.data,
  });
//...

const load = cache(
  (userId: string) => api.getSelectionsByUserId(userId),
  "selections"
);

export const route = {
  preload: () => load,
} satisfies RouteDefinition;

export default function Username(props: ManuallyTypePropsAfterLookingAtConsoleLog) {
  const selections = createAsync(() => load(users[0].id), {
    deferStream: true,
    initialValue: props.data,
  });
//...

but the props have to be manually typed

Madaxen86•8/10/24, 5:07 AM

RouteSectionProps

Madaxen86•8/10/24, 5:10 AM

But when the server function is cached you don’t need to pass a initial value because the client will get it from the cache when it’s already preloaded.

jackOP•8/10/24, 5:47 PM

But the signal is possibly undefined which I’m trying to avoid

Madaxen86•8/10/24, 6:13 PM

As it is async data it may be undefined as createAsync does not await.
And if ssr is enabled the server might start rendering will start streaming before the promise has resolved.
That’s why we can add suspense boundaries which will render a fallback on initial load .
But there’s a few things you can do depending on what you want to do.
First you can add deferStream:true to createAsync which will prevent streaming until the promise is resolved. Unfortunately typescript won’t pick this up.
So you can also add a Show component with keyed prop which will help typescript to narrow the type to the actual resolved type of the promise.

jackOP•8/10/24, 7:27 PM

Hmm yea I have deferStream here

jackOP•8/10/24, 7:29 PM

I guess I could just cast the return value to be ignore the . I don't really want to introduce extra markup when i know the value will be defined

jackOP•8/10/24, 11:50 PM

two things:

is there a reason TS doesn't pick up on the
```
deferStream
```
```
deferStream
```
?
anything wrong with making something like this for this case:

That way it's always defined? Is there a case I'm not considering?

Madaxen86•8/11/24, 7:53 AM

I‘m not deep into the source code of solid.
My best guess:
Streaming only happens when the server renders the page (directly hit the url or refresh browser) that’s when defer happens.
But on client side navigation the signal will still be undefined until resolved

Jjack two things: - is there a reason TS doesn't pick up on the `deferStream`? - anyt...

Brendonovich•8/11/24, 9:29 AM

deferStream

deferStream

stops the SSR response reaching the client until the data has loaded, but it doesn't stop the non-blocking nature of solid's async handling

Brendonovich•8/11/24, 9:30 AM

The route's JSX will be rendered while the data is still loading, and then (with

deferStream

deferStream

) the server wll update the places that used the data to have the new values, and then send that result to the client

Brendonovich•8/11/24, 9:32 AM

The wrong thing with your is that it's a lie - will be undefined on the server initially, you can account for that with

<Show>

<Show>

to type narrow and remove the

undefined

undefined

, or do optional chaining like

jackOP•8/12/24, 2:23 PM

So it will only render the fallback ever on server if I use deferStream, essentially ?

Jjack So it will only render the fallback ever on server if I use deferStream, essenti...

Brendonovich•8/12/24, 2:59 PM

Pretty much, the server will only respond once the data is in place

jackOP•8/12/24, 2:59 PM

Interesting

jackOP•8/12/24, 3:00 PM

So if I do my helper thing, realistically nothing can come of this right? TS is not runtime so even if on server first pass there’s some broken markup, it will never reach client until it’s accurate (at which point forcing the signal to be defined is accurate)?

jackOP•8/12/24, 3:01 PM

Like I get that it’s semantically incorrect bc on server at some point that will be undefined

Brendonovich•8/12/24, 3:02 PM

TS isn’t runtime but what it’s telling you is important, on the server the value will initially be undefined, and if you don’t respect that then you could end up with ‘cannot access property of undefined’ on the server

Brendonovich•8/12/24, 3:03 PM

deferStream pauses the response from being sent but the JSX will still fully evaluate, so you need appropriate guards in place for the undefined case

jackOP•8/12/24, 3:04 PM

Ok true

Brendonovich•8/12/24, 3:04 PM

If you use Show so that there’s 0 markup initially that’s fine, since when the response is sent it would have re-evaluated the Show

jackOP•8/12/24, 3:05 PM

Yea I guess im trying to force a way of writing code into this that just isn’t really possible

jackOP•8/12/24, 3:05 PM

I just switched off of Astro and so I’m trying to copy like 1:1 over but it’s not matching up different paradigm

Brendonovich•8/12/24, 3:06 PM

Fwiw this sort of stuff is what solid 2.0 is looking to address, but for now we just have to live with guarding against undefined with async data

jackOP•8/12/24, 3:06 PM

Ok cool. I feel like a lot of these things are either a. Missing docs or b. Really primitive and missing sensible abstractions

jackOP•8/12/24, 3:07 PM

That’s the nature of adopting it this early I suppose though

Brendonovich•8/12/24, 3:08 PM

Do you mean the specific options like deferStream or the bigger picture of loading async data and pleasing typescript?

jackOP•8/12/24, 3:09 PM

Just like the patterns around these things

jackOP•8/12/24, 3:09 PM

Like here I have to define like 3 separate functions to get ssr’d data going, as opposed to remix/svelte/old next where I dump everything into an exported function and I have it

jackOP•8/12/24, 3:10 PM

Also more complex examples would be cool. I have no clue if I’m doing things properly rn

Brendonovich•8/12/24, 3:11 PM

tbf the route preloader isn’t mandatory but I get your point haha

jackOP•8/12/24, 3:11 PM

Maybe it’s just a docs thing then

jackOP•8/12/24, 3:12 PM

I think having everything in one docs is awesome, but also is confusing a lot when it’s jumping me between router and start

jackOP•8/12/24, 3:12 PM

But I thought that I needed the load/preload for it to work based on docs

Brendonovich•8/12/24, 3:13 PM

Yeah it’s tricky since technically none of what we’ve discussed has to do with Start but a lot of it gets demoed there

Brendonovich•8/12/24, 3:13 PM

Just the file based routing syntax

jackOP•8/12/24, 3:13 PM

Right right

jackOP•8/12/24, 3:14 PM

I’ll just start looking at source code to figure things out instead lol

Madaxen86•8/12/24, 4:27 PM

I have to agree.
createAsync is part of the router doc which has only this as an example

While a more sophisticated example can only be found in the solid-start docs for data loading.
But there’s no example showing how to fetch data and also do the mutation/ revalidation of cached functions which just gives a whole picture of how to do it the solid way.