Best practices for combining tanstack router context + tanstack query [React, Typescript]?
Howdy,
I am building an app that tries to implement authentication without using any stored state on the frontend (no localestorage/session). My project uses tanstack router and tanstack query so I am a bit confused how I can combine both to make my life easier?
I am currently setting user/setUser as tantack router context and setting user on login/signup with a cookie.
I could also use setQueryData for user and pass queryClient as tanstack context.
any preference or ideas here? I will also need to fetch to grab user everytime I open the app since I'm not using localestorage.
8 Replies
evident-indigo•12mo ago
How are you storing the state
Cookie?
If you are using cookie what I do personally is create a
/me endpoint and on page load it fetches from /me and store it in Tanstack Router context and get it from there on subsequent navigationsafraid-scarletOP•12mo ago
Yeah that’s my idea
But the issue than is I have login and signup endpoints
Which also return user
So by having the /me endpoint, I’d have to login, than fetch /me with cookie.
2 fetch requests when I could probably just use one? Than there’s also how to easily manage refetch which would be piss easy with query state.
national-gold•12mo ago
I asked a similar question but alot more vague yesterday, here's the thread
https://discord.com/channels/719702312431386674/1291786139232899134
I think that kitchen sink example shows you how to set up router + query using
useSuspenseQuery so you can still dial in on the cache a bit more carefully when needed but also you get the loader style data loading as wellafraid-scarletOP•12mo ago
Thanks @Olamide and @Jon Higger (He / Him)
does router context persist if I were to close my application than open it again
it looks like the kitchen sink example relies on session storage (which I do not wish to use)
continuing-cyan•12mo ago
no. if you want that, you have to somehow implement persistence
session storage is one possible way to do it
afraid-scarletOP•12mo ago
How would you implement with status without locale/session? Seems like user context and set user context with setQueryData within login/signup is the best way?
continuing-cyan•12mo ago
if you don't want to persist on client side, then do it on the server. and then you need to retrieve it. the way you describe sounds reasonable
afraid-scarletOP•12mo ago
perfect, thanks Manuel