Get Search Params from Localstorage before loading a page
Hello, I'd like to save last used search params in localstorage and re-set them when user go to this page again. I need it beacause it's admin panel and there're a lot of filters. Is it possible to get this data from localstorage and set proper params?
11 Replies
plain-purple•15mo ago
Is it possible to get this data from localstorage and set proper params?sure, you just need to store them there what is your actual question?
crude-lavenderOP•15mo ago
How to retrieve them and where? I'd like to do this operation inside
createFileRoute, not at <Link /> level. I'm not sure whether it should be done in loader, beforeLoad or where exactly?
The case is that users use mostly the same set of filters every time, so I'd like to save them in localstorage and apply them every time they go to this page
Sorry if it's stupid question
I've tried to retrieve these filters in loader, then use them in my async function queryClient.ensureQueryData(getData(...)) , but these filters are obviously not set in the URL as search paramsplain-purple•15mo ago
not at all, but your inital question was just a bit vague
you could do it in
validateSearch
there you could check if a param is set, if not try to load it from localstorage and return itplain-purple•15mo ago
here is a VERY simplistic implementation:
https://stackblitz.com/edit/tanstack-router-3ppts4?file=src%2Froutes%2Fabout.tsx&preset=node
Manuel Schiller
StackBlitz
Router Quickstart File Based Example (forked) - StackBlitz
Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz
crude-lavenderOP•15mo ago
thank you for this example. I've tried to do this like that before, but I abandoned it for some reason. As far as I understand, in validateSearch we kinda override default params, however we don't set them in URL at that time. I guess it's probably not possible to set these search params even before we call
validateSearch. Your solution seems working, but I have some issues when reloading this page: Warning: Error in route match: *here is something like /my-page{"foo": "123"}* and this crashes the page
I will try to recreate this issue in stackblitz later
Having hard time recreating this issue, but looks like it starts here: Uncaught TypeError: Cannot read properties of undefined (reading 'queryClient'). And this happens when I go to this page (at this point URL has no search params) and refresh it (after refreshing params appear)plain-purple•15mo ago
are you reading
queryClientfrom context?crude-lavenderOP•15mo ago
exactly
plain-purple•15mo ago
yeah we currently have an issue with context sometimes being undefined
if you can make this reproducable, please create a github issue for this
we need to track all of these context issues down
crude-lavenderOP•15mo ago
ok, I will do my best to recreate it
plain-purple•15mo ago
it might be the same thing as this here: https://github.com/TanStack/router/discussions/1839
GitHub
Loader function is not executed, when optional params are not set. ...
I could narrow the issue down, and here is a basic reproduction of it. When navigation from anything else then tanstack router without setting the optional search params in the URL to at least an e...
crude-lavenderOP•15mo ago
I see that all my params are defined in
validateSearch when this error happens
so it looks more like a context problem imo, but I might be wrong