Get router singleton
Answered
Southeastern blueberry bee posted this in #help-forum
Southeastern blueberry beeOP
is there a way to get an instance of the client router so i can call
router.refresh()
inside a typescript file?Answered by Alfonsus Ardani
No, you have to pass the router hook into your ts function
25 Replies
No, you have to pass the router hook into your ts function
Answer
you can just import it into your all files if nessary, at least in nextjs app dir ... im not sure if i understand the question...
Southeastern blueberry beeOP
i made a hook:
that i call whenever i make an api call that will cause client router cache data to be invalid, but this is getting really annoying, so i wanted to move this invalidation to the function that calls the library itself, i have a class that wraps all the api calls so i'd put that there instead
export function useClientCacheInvalidator(){
const router = useRouter()
return useCallback(() => {
router.refresh()
}, [router])
}
that i call whenever i make an api call that will cause client router cache data to be invalid, but this is getting really annoying, so i wanted to move this invalidation to the function that calls the library itself, i have a class that wraps all the api calls so i'd put that there instead
just call router.refresh() manually... it makes so much more sense...
its fine as long as you follow the rule of hooks
Southeastern blueberry beeOP
what do you mean
like why can't you just run .refresh after your api req?
Southeastern blueberry beeOP
that's what i'm doing, but i'm doing it inside the component itself, i wanted to move the logic to the class that handles the api calls so i don't have repetition and i don't forget to call the function
hmm ok, and whats the issue?
Southeastern blueberry beeOP
i'd need a reference to the router instance in that typescript file
so i was asking if there was a global instance that i could use for that
but isn't .refresh is a but wasteful to just remove cache
Southeastern blueberry beeOP
what's the alternative?
hmm i can't find anything simple ðŸ˜
wdym by global instance? you want it auto applied to all functions?
Southeastern blueberry beeOP
class ApiHandler{
...
createPost(data){
const created = await fetch(...)
router.refresh()
return created
}
}
export const apiHandler = new ApiHandler()
then in my component
function Something(){
async function createPost(){
const data = await apiHandler.createPost(...)
//i don't have to worry about clearing the cache manually here
}
return <>
...
</>
}
`yeah that look good
Southeastern blueberry beeOP
yeah, but i need the router instance xD
o.O you can't create it there?
ig you can make it an input to createPost and let TS get angry if not inputted
Southeastern blueberry beeOP
at that point it's like doing it manually but u are forced to pass it along
Southeastern blueberry beeOP
i guess for now i'll make a context that handles the api wrappers and it calls a function to set the router instance so i can use it there