Auth - Supabase - Protected Routes - Tanstack Query
Im wondering if i could get some help understand all of this and how it all comes/works together.
So i looked at this video:
https://www.youtube.com/watch?v=6c8kuvBolQg&t=7s&ab_channel=DevLeonardo
repo: https://github.com/Balastrong/confhub/tree/dc79c9f8fd2a4fb621e2b7029bb0e8dd202d6eb6
i was playing around with some of the code in my own project. If you use ensureQueryData in the root and then in your profile route you delete the cookies for the session in the browser dev tools, then go /home then back to /profile it will let you go to /profile even though you dont have the cookies. When using fetchQuery in root route, it does fix this issue, but then it makes (authQueries) 1 network request when going from /profile to /home and 2 networks requests when going from /home to /profile.
You can try out what im talking about here: https://tanstarter.nize.ph/
repo: https://github.com/dotnize/react-tanstarter
it uses the same concept.
Im just trying to understand how all these things come together. The authenticated/protected routes with tanstack query. Different staleTimes for the session? etc..
I would really appreciate it. Thank you so much!
3 Replies
correct-apricotOP•3mo ago
@Leonardo hey pinging you since its your video and maybe you can provide some more insight. Sorry if it's not allowed to ping, let me know. Thank you
rare-sapphire•3mo ago
Heyy, over time I think I improved a bit my approach (on a project using better-auth but that shouldn't matter)
I moved to
fetchQuery as IIRC ensureQueryData had different behaviours on stale data (don't quote me on this, the right answer should be in this rfc to just have query soon)
And I added a staleTime on the queryOptions
https://github.com/Balastrong/confhub/blob/main/src/routes/__root.tsx#L18
https://github.com/Balastrong/confhub/blob/main/src/services/queries.ts#L53
Just throwing in some notes here sorry, let me know if that helps 🙂correct-apricotOP•3mo ago
hey, sorry for the late reply. That helps, thank you so much!