what's the difference between? createResource andcreateAsync
and who can write about createAsync in more detail
essentially createAsync is a wrapper over createResource, but I don’t remember what it’s for?
and why do you need to indicate on the routes
export const route = {
load: () => historyLoadPdfFile()
} satisfies RouteDefinition;
4 Replies
My overly simplified way of looking at it:
old:
createResource
new: cache + createAsync
old: inform router via load property
new: inform router via using cache()
Conceptually createResource has been broken down into two pieces cache and createAsync.
Before the router found out about the load function with the load property. When cache is used that isn't necessary anymore but the cache result is still async so createAsync coverts it to a signal.
The load & createResource way:
https://stackblitz.com/edit/solidjs-templates-h7n8dj
The cache & createAsync way:
https://stackblitz.com/edit/solidjs-templates-vgam8kpeerreynders
StackBlitz
solidjs/router old Load Functions API demo - StackBlitz
A Solid TypeScript project based on @solidjs/router, solid-js, typescript, vite and vite-plugin-solid
peerreynders
StackBlitz
solidjs/router new Data API demo - StackBlitz
A Solid TypeScript project based on @solidjs/router, solid-js, typescript, vite and vite-plugin-solid
I guess you got that from here:
https://github.com/solidjs/solid-start/blob/6418beaa1985409f9fa5e038607c330d319fe72e/examples/with-auth/src/routes/index.tsx#L4-L6
I'm going to guess here but if you have a look at the old loader function there is also the
https://github.com/solidjs/solid-router?tab=readme-ov-file#load-functions With that
intent parameter which indicates “why” the loader function was called and preload is one of the possibilities.https://github.com/solidjs/solid-router?tab=readme-ov-file#load-functions With that
route export the page can communicate what data will be needed up front so the router can call load to warm all the necessary cache values even before any of the components run their createAsync.
Also that load function still has full access to RouteLoadFuncArgs
https://github.com/solidjs/solid-router/blob/d1a8aab5a3ebfb65726f1aabec80dd42a652bbaa/src/types.ts#L69
so params will hold the route parameters necessary to provide the keys for the cached functions.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
GitHub
solid-router/src/types.ts at d1a8aab5a3ebfb65726f1aabec80dd42a652bb...
A universal router for Solid inspired by Ember and React Router - solidjs/solid-router
GitHub
solid-start/examples/with-auth/src/routes/index.tsx at 6418beaa1985...
SolidStart, the Solid app framework. Contribute to solidjs/solid-start development by creating an account on GitHub.
Thank you very much.
Middleware is no longer needed?
I heard some discussions that they want to turn it off
Middleware?
This is what I refer to as middleware:
https://github.com/solidjs/solid-start/blob/fca4cec50e9cfcc008848416fd990c82e2079318/examples/experiments/src/middleware.ts
If you are talking about
route.load that may stick around as an optimization so that the fetches can be initiated and the cache loaded in response to a pre-load even before any of the new components can request the data via createAsync.
So in the old way the load performed the fetch and returned the processed response.
The new way uses load to start the fetches to fill the cache so that any subsequent, new component-local createAsync won't trigger new fetches but simply pickup the result of the pre-load.GitHub
solid-start/examples/experiments/src/middleware.ts at fca4cec50e9cf...
SolidStart, the Solid app framework. Contribute to solidjs/solid-start development by creating an account on GitHub.