SolidJS•6d ago

Need help understanding preload and file conventions

Hello guys, I started with SolidStart and want to fetch data before rendering the page, So I found preload here https://docs.solidjs.com/solid-start/building-your-application/routing#additional-route-config and started with

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

export const routeDefinition: RouteDefinition = {
  async preload({ params }) {
    await new Promise((resolve, reject) => setTimeout(resolve, 3000)) // show pending component page
    throw new Error("ERR"); // show error component page
  }
}

export default function Page() {
    return <div>Page</div>;
}

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

export const routeDefinition: RouteDefinition = {
  async preload({ params }) {
    await new Promise((resolve, reject) => setTimeout(resolve, 3000)) // show pending component page
    throw new Error("ERR"); // show error component page
  }
}

export default function Page() {
    return <div>Page</div>;
}

It "somehow" works, the preload function was called. I also created 3 other components in the same directory => notFound.tsx, pending.tsx, error.tsx. All of those 3 files might need different names, I don't know. My questions are: - How do I render a 404 page? - Is it possible to render a pending page while preloading the data? How? - How do I render an error page if the preload function throws? - How do I access the fetched data inside my "success" page? I wasn't able to find it in the docs and maybe I completely misunderstood the concepts here 🙂 But I know that https://tanstack.com/router handles things this way

3 Replies

Madaxen86•6d ago

I suggest this talk from Ryan showing the basics of SolidStart https://youtu.be/ZVjXtfdKQ3g?si=monkC7XSNmDngA23

JSWORLD Conference

YouTube

Ryan Carniato - SolidJS - SolidStart - DevWorld 2024

SolidJS - SolidStart By Ryan Carniato Ryan Shares his journey of developing the framework over three years, inspired by the need for a more flexible approach than traditional meta frameworks. Solid Start leverages existing ecosystem projects like Vinci and Nitro for bundling and server runtime. They demonstrated how Solid Start streamlines de...

Madaxen86•6d ago

Concepts in the docs you should look at: 1. Suspense 2. ErrorBoundaries 3. createAsync -> deferStream 4. query In a nutshell. By default SolidStart streams responses. This means it is not waiting for async resource to resolve it will just fallback to the nearest Suspense boundary. This means that preloading just starts to request the data. That request mights have not fully resolved when the new page is rendering -> resulting in fallback to Suspense. I have also made a more detailed video about data fetching in SolidStart looking at all the concepts like suspense ErrorBoundaries query etc: https://youtu.be/Qw9am5NL6AI?si=fPMFo0Rgc0H7kJRv

Martin Rapp

YouTube

Data fetching in Solid-Start

In this video we cover the basics of the createAsync primitives, server functions, cache wrapper, Suspense, ErrorBoundaries, route preloading and how they interact with each other. Github repo: https://github.com/madaxen86/solid-tutorials/tree/master/data-fetching

peerreynders•6d ago

Just a preview to some stuff you're going to encounter. The preload function is not meant to be async. It's passed RoutePreloadFuncArgs so that it can synchronously derive arguments intended for query wrappers. While these wrappers are async, preload doesn't await them; the intent is to “warm” the query's so that the page being navigated to can get the response payload ASAP. The components on the page access query wrappers via createAsync. At this point the query wrappers serve request/response deduplication (don't make the mistake of thinking of it as a cache; it's not); multiple components on the page can access the response payload of the same query (each with its own createAsync()). Whether or not the query holds a resolved or rejected promise, it doesn't matter until at least one of the those consuming createAsyncs accessors is used somewhere; this is typically within the JSX. If the query just holds data, the JSX will render with that data. If the accessor however gets an Error, the error is thrown to the next highest ErrorBoundary which will then render it's fallback. You can use HttpStatusCode in JSX to set the status for an SSR page.

query - SolidDocs

Documentation for SolidJS, the signals-powered UI framework

<ErrorBoundary> - SolidDocs

Documentation for SolidJS, the signals-powered UI framework

HttpStatusCode - SolidDocs

Documentation for SolidJS, the signals-powered UI framework

GitHub

solid-router/src/types.ts at c05ce351b584a8db2247ddb7863915fdbfc332...

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

Gaming

Programming

Need help understanding preload and file conventions

Did you find this page helpful?