Need Help! Child Dynamic Route Loader affects Parent Route Query?
I've the following setup:
Using Supabase for auth/db stuff, i have defined both a client and a server instance
in __root.tsx I call supabase auth getUser and getSession, pass it down to the component which uses useEffect to pass the session to the supabase client instance
_protected.tsx beforeLoad checks if getUser() returns a user, redirects to /login otherwise
/_protected/leads/index.tsx renders a table of leads, using a hook within the component that returns a useQuery which calls supabase (client instance) gets leads returns data
/_protected/leads/$leadsId/route.tsx detailed view of leads, router loader checks if data exists in query cache, if not calls database, returns data for the component to render. Then component has another hook within for mutations etc
My understanding of tanstack start is that I can have both server side rendering and client side rendering. In /leads im doing things client side and in /leads/id im using the loader which is server side.
however what im really struggling to understand is that when I'm calling the hook from /leads, its stuck pending/fetching/loading without ever returning data or an error IF the loader in /leads/id is present. If I remove the loader the query runs fine?
Can someone help me please, I've googled anywhere and no LLM has any idea whats going on either, so I've done my research. Going through the docs one more time in the meantime but this really feels strange. Am I forced to not use the loader function in /leads/id? If that's the case its fine I just want to know why this mismatch happens
My implementation is quite barebones so I dont believe there's an issue with the query hooks
Using Supabase for auth/db stuff, i have defined both a client and a server instance
in __root.tsx I call supabase auth getUser and getSession, pass it down to the component which uses useEffect to pass the session to the supabase client instance
_protected.tsx beforeLoad checks if getUser() returns a user, redirects to /login otherwise
/_protected/leads/index.tsx renders a table of leads, using a hook within the component that returns a useQuery which calls supabase (client instance) gets leads returns data
/_protected/leads/$leadsId/route.tsx detailed view of leads, router loader checks if data exists in query cache, if not calls database, returns data for the component to render. Then component has another hook within for mutations etc
My understanding of tanstack start is that I can have both server side rendering and client side rendering. In /leads im doing things client side and in /leads/id im using the loader which is server side.
however what im really struggling to understand is that when I'm calling the hook from /leads, its stuck pending/fetching/loading without ever returning data or an error IF the loader in /leads/id is present. If I remove the loader the query runs fine?
Can someone help me please, I've googled anywhere and no LLM has any idea whats going on either, so I've done my research. Going through the docs one more time in the meantime but this really feels strange. Am I forced to not use the loader function in /leads/id? If that's the case its fine I just want to know why this mismatch happens
My implementation is quite barebones so I dont believe there's an issue with the query hooks
