S
SolidJS•16mo 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
Tommypop•16mo ago
Moving the resource out of the provider fixes this somewhat, but then useServerContext doesn't return anything
thetarnav
thetarnav•16mo 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
Tommypop•16mo ago
This is the provider
Tommypop
Tommypop•16mo ago
This is where it is in the component tree
Tommypop
Tommypop•16mo ago
These are how it's used:
Tommypop
Tommypop•16mo ago
Tommypop
Tommypop•16mo ago
thetarnav
thetarnav•16mo 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
Tommypop•16mo ago
ctx I'll get the error
Tommypop
Tommypop•16mo ago
thetarnav
thetarnav•16mo ago
hmm could you move the provider above <Routes>?
Tommypop
Tommypop•16mo 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•16mo 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
Tommypop•16mo ago
ok awesome
thetarnav
thetarnav•16mo ago
I'm curious if the devtools would show that 🤔
Tommypop
Tommypop•16mo 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•16mo 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
Tommypop•16mo ago
oh, that's awesome again, thanks for the help