S
SolidJS•2y ago
Tommypop

Waiting for context provider to load before rendering children

My context provider doesn't load before the children are rendered. Therefore, the context is undefined when it is used. I've tried using suspense to fix this, but the same error persists
18 Replies
Tommypop
TommypopOP•2y ago
Moving the resource out of the provider fixes this somewhat, but then useServerContext doesn't return anything
thetarnav
thetarnav•2y ago
The usual cause is destructing children in the context provider component But I can only guess how is the context provider setup? why would it render children before context?
Tommypop
TommypopOP•2y ago
This is the provider
Tommypop
TommypopOP•2y ago
This is where it is in the component tree
Tommypop
TommypopOP•2y ago
These are how it's used:
Tommypop
TommypopOP•2y ago
Tommypop
TommypopOP•2y ago
thetarnav
thetarnav•2y ago
mm ok so this is not due to destructuring the provider looks fine so the issue is that ctx is undefined or ctx.user() is undefined?
Tommypop
TommypopOP•2y ago
ctx I'll get the error
Tommypop
TommypopOP•2y ago
thetarnav
thetarnav•2y ago
hmm could you move the provider above <Routes>?
Tommypop
TommypopOP•2y ago
Yep 2 Secs It works :) Thanks so much Do you know why it doesn't work within Routes? I'm just curious now
thetarnav
thetarnav•2y ago
alright so the reason might be that <FileRoutes> just returns a json structure - it doesn't render anything, just passes the cofiguration to <Routes> and the <Routes> is where the rendering happens, so your provider was executing before the pages, it was just providing the context to the wrong tree
Tommypop
TommypopOP•2y ago
ok awesome
thetarnav
thetarnav•2y ago
I'm curious if the devtools would show that 🤔
Tommypop
TommypopOP•2y ago
I thought that FileRoutes returned loads of Route elements Like with a For component But I guess not :) yeah that'd be interesting
thetarnav
thetarnav•2y ago
yeah but it doesn't render them the context provider uses the children helper to resolve all nested children to make sure they all are called under the provider but if the <route> returns something like this:
{
path: "some/path/*",
render: () => <MyPageComponent/>
}
{
path: "some/path/*",
render: () => <MyPageComponent/>
}
it won't call that function <Routes> calls it and it doesn't have a provider over it
Tommypop
TommypopOP•2y ago
oh, that's awesome again, thanks for the help
Want results from more Discord servers?
Add your server