Memory leak in SSR
Hi,
I'm using the latest Vue Query plugin with vite-plugin-ssr. As suggested by the docs, the client is created for each request and the cache time is unset, so it defaults to
Infinity during SSR. Queries are fetched using suspense.
I noticed that my app leaked memory on every request so I analyzed some heap dumps and found that there are many Vue Query instances that cannot be garbage collected because there are active subscription listeners (set by Vue Query, not by me).
As a workaround, I do client.unmount() at the end of a request which removes those.
Is this a bug or due to wrong usage?3 Replies
foreign-sapphire•3y ago
Hi.
Plugin cleans up when
app calls onUnmount.
https://github.com/TanStack/query/blob/main/packages/vue-query/src/vueQueryPlugin.ts#L86
It might be the case that vite-plugin-ssr does not call that method for some reason.
Additional question. Are you by any chance using Vue2?
Vue2 has a one global instance, unlike Vue3 where app instances are separated. So if this is the case we might need to find a better way for unmount hook.probable-pinkOP•3y ago
I'm using Vue 3.
You are correct, vite-plugin-ssr does not call it. I looked into Nuxt's source code and the Vue SSR examples (without frameworks) and they do not unmount the app either.
When I try to unmount the app during SSR, I get a warning (cannot unmount an app that is not mounted) so this does not look like it would be a good practice 🤔
probable-pinkOP•3y ago
I created an issue with a reproduction: https://github.com/TanStack/query/issues/4953
GitHub
Memory leak in vue-query SSR · Issue #4953 · TanStack/query
Describe the bug In SSR, Vue will never do app.unmount(), so the query client never unmounts and cannot be garbage collected Your minimal, reproducible example https://github.com/schneefux/vue-quer...