How to share async data inside a context
I'm currently refactoring a website from Sveltekit -> SolidStart. I'm currently working on the layout for our dashboard As you can see in the sveltekit layout, I request some data via a graphql client I wrote that is then available that is then available in the load for any child routes as a typed object. Very nice feature.
Obviously you would do this with a context in Solid. You can see the code I currently have which gets the data for the sidebar, based on https://docs.solidjs.com/guides/fetching-data#calling-multiple-async-events, but it's not currently set up to have that data be in the context. I tried refactoring the createQuery (urql/solid package, under the hood it's basically a createResource) to be inside a context but it didn't seem to want to be reactive. Any knowledge of how to do this correctly so that it updates when the data is loaded/I don't have any hydration issues? The context documentation only showed examples with local state.
5 Replies
The problem here is the
const currentPlan = query.plans[0], which takes the data out of the proxy that tracks reactive changes. The solution is to return a function instead of a value: const currentPlan = () => query.plans[0].The right side is svelte code - sorry.
The left hand side is me getting the same information in Solid in a layout route.
But svelte would just automatically add that to the data object in any descendant routes that was strongly typed. Just trying to replicate that functionality in Solid through context but as you can see, result is obviously an async object so I was just trying to figure out how to pass that plan down to children while having that be reactive. Every example in the docs is some static store being passed in context. I tried updating that in a
createEffect inside the Provider I believe, but I think that led to hydration errors?Every example in the docs is some static store being passed in context.Not sure if it is relevant but you can retrigger async operations (with reactive results) via context like this: https://discord.com/channels/722131463138705510/1327938064185819136/1328377167377334303
You can also wrap you async function in query and use call it with createAsync in the layout and in any child component.
Query will dedupe request.
https://docs.solidjs.com/solid-router/reference/data-apis/query
I'll test this out and let you know, thanks.