Next.js Discord

Discord Forum

Get router singleton

Answered
Southeastern blueberry bee posted this in #help-forum
Open in Discord
Avatar
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
View full answer

25 Replies

Avatar
No, you have to pass the router hook into your ts function
Answer
Avatar
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...
Avatar
Southeastern blueberry beeOP
i made a hook:
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
Avatar
just call router.refresh() manually... it makes so much more sense...
Avatar
its fine as long as you follow the rule of hooks
Avatar
Southeastern blueberry beeOP
what do you mean
Avatar
like why can't you just run .refresh after your api req?
Avatar
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
Avatar
hmm ok, and whats the issue?
Avatar
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
Avatar
but isn't .refresh is a but wasteful to just remove cache
Avatar
Southeastern blueberry beeOP
what's the alternative?
Avatar
hmm i can't find anything simple 😭
wdym by global instance? you want it auto applied to all functions?
Avatar
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 <>
    ...
  </>
}
`
Avatar
yeah that look good
Avatar
Southeastern blueberry beeOP
yeah, but i need the router instance xD
Avatar
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
Avatar
Southeastern blueberry beeOP
at that point it's like doing it manually but u are forced to pass it along
Avatar
but it satifies your requirement of not forgeting
🙂
id say its better underneath tho
Avatar
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