What would cause a watcher to not react to updates to its source?

[fabis94]

I'm running into a strange issue where during SSR a watcher doesn't fire unless i've got flush: sync set, even if I prevent the page from loading by doing an infinite await wait() in its setup block.

The update is definitely going through with the flush: sync flag set, but if its left to be async then it just never fires at all.

Any ideas how to troubleshoot this?

[LinusBorg]

https://vuejs.org/guide/scaling-up/ssr.html#reactivity-on-the-server.

[fabis94]

@LinusBorg It can't be that it's entirely disabled, cause I've definitely seen some level of reactivity work during SSR - e.g. if I change the value of a ref during SSR, the final render will have the changed value.

In any case - how can I make watchers work in SSR? The use case is that I need one fetch (Apollo Client) call to finish, before starting up the other one, and both must finish before SSR can render. But because of reactivity not working, I can't get this working.

[LinusBorg]

The documentation could indeed be worded better here.

What is means to say is that reactive effects like watch and computed won't run again after a component has been mounted (provided that these effects were created in a component, and not i.e. in a store). The reason for that is that after the component has been mounted, it will directly be rendered into a string to be put into the HTML document in the server response - so generally, any reactive effect in a component after mounting won't be able to do anything sensible, and dibling these updates brings a few perf benefits for faster and more memory-efficient server-side rendering.

watchers that run synchronously or immediately are handled special here, so that they can run cleanly before the component mounts.

What's your usecase for a server-side watcher that re-runs after mount?

[fabis94]

@LinusBorg So I've got 2 Apollo Queries invoked using useQuery composables (https://apollo.vuejs.org/guide-composable/query.html). These queries allow their parameters to be fed in through Refs so that if they change, the query will be re-executed.

The 2nd query's parameters are dependent on the 1st query's results. So I want the 2nd query's parameters Ref to have enabled: false at first and then to switch enabled to true once the full parameters have been resolved. Unfortunately the watchers used internally in useQuery don't have flush: sync set so whenever my refs change, the query never re-executes.

In any case - I found that there's a lazy version of the same composable that seems to do what I'm looking for, even on SSR.

Thanks for your insight, it definitely made reactivity in SSR clearer for me