Why router is not passed to preFetch on SSR mode?

[CharlieBrownCharacter]

I'm using the following plugin @vue-use/router [docs]. This plugin allows the use to do:

import { useRouteQuery } from '@vueuse/router'

const search = useRouteQuery('search')

const search = useRouteQuery('search', 'foo') // or with a default value

Which keeps the URL query parameters in sync with search reactive variable. Unfurtonately they don't consider SSR in this plugin but it allows you to pass an instance of router and route. Using this plugin in preFetch brings the problem where we have currentRoute but we do not have router passed as an argument to the options function:

preFetch ({ store, currentRoute, previousRoute, redirect, ssrContext, urlPath, publicPath }) {
   // missing here `router`
},

Which brings the problem that we are unable to do something like:

preFetch ({ store, currentRoute, previousRoute, redirect, ssrContext, urlPath, publicPath }) {
   const page = useRouteQuery('page', '1');
},

Because useRouteQuery calls useRoute (and useRouter) internally, raising a inject() can only be used inside setup() or functional components. warning.

For now my solution is to simply pass the currentRoute and a mock router:

preFetch ({ store, currentRoute, previousRoute, redirect, ssrContext, urlPath, publicPath }) {
   const mockRouter = { push: () => {} };
   const page = useRouteQuery('page', '1', { router: mockRouter, route: currentRoute });
},

It seems a bit off having to pass a mock for a library to be able to work.

Question

Why isn't router passed as an option to preFetch args? Is there a technical reason for it or simply it was never necessary?

[CharlieBrownCharacter]

Worth to say that this is a silly example because why would you want to maintain reactivity of URL parameters in preFetch but in my case I use a composable to return all the filters for this particular page. Something like this:

export function useMeetupFilters() {
  const page = useRouteQuery('page', '1');
  
  const city = ref(loggedUser.city.id);

  const parameters = computed(() => ({
    page: page.value,
    city: city.value,
  }));

  return { parameters, page, city };
}

// in my component
preFetch ({ store, currentRoute, previousRoute, redirect, ssrContext, urlPath, publicPath }) {
   const mockRouter = { push: () => {} };
   const { parameters } = useMeetupFilters();

   store.fetchMeetups(parameters.value);
},
setup() {
  const mockRouter = { push: () => {} };
  const { parameters } = useMeetupFilters();

  const onFilterChanges = () => {
     store.fetchMeetups(parameters.value);
  }
}

[rstoenescu]

Composables are meant to be used inside of setup(). That's the textbook definition of them. What you are doing is trying to use them outside of setup() so that's why it's no wonder it doesn't works as you expect. It's like trying to use a composable in a plain js file.

The "router" is not passed to Quasar CLI's preFetch hook because: 1) it doesn't makes any sense to be using it there and (more aggravating) 2) it allows devs to make mistakes like assuming they can redirect to another page using it -- which would break the boot procedure from every angle. So there's "currentRoute", "previousRoute" and "redirect" method there.

[CharlieBrownCharacter]

@rstoenescu Thank you for the time to write such a nice answer. I totally get it now