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

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

preload

function was called. I also created 3 other components in the same directory =>

notFound.tsx

notFound.tsx

pending.tsx

pending.tsx

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

SolidJS•11mo ago•

3 replies

Garzec

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

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

preload

function was called. I also created 3 other components in the same directory =>

notFound.tsx

notFound.tsx

pending.tsx

pending.tsx

error.tsx

error.tsx

But I know that https://tanstack.com/router handles things this way

Need help understanding preload and file conventions

Similar Threads

Need help understanding preload and file conventions

Similar Threads

Similar Threads

Similar Threads