Memory leak in vue-query SSR

[schneefux]

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-query-memory-leak-reproduction

Steps to reproduce

npm install
npm run build
npm run start
while true; do curl -s localhost:3000 -o /dev/null; done

Perform a heap dump, for example in Chrome like this:

• Open Chrome's dev tools
• Click the NodeJS icon
• Click the Memory tab
• Click the trash icon to force garbage collection
• Click "Take Snapshot"

In the heap dump, open the Summary, set the class filter to QueryClient, observe that there are hundreds/thousands of query clients.

Expected behavior

vue-query should use a different method to unmount during SSR or the SSR docs should explicitly state that you have to call queryClient.unmount() after a request

Platform

Reproduced on macOS and Linux with Nuxt and without a framework (as per https://vuejs.org/guide/scaling-up/ssr.html#rendering-an-app)

TanStack Query version

4.24.4

Additional Context

Related Vue discussions and issues:

• App created with 'createSSRApp()' on the client side is not triggered beforeUnmount, unmounted hook. vuejs/core#5945
• SSR Memory Leak with Legacy API  intlify/vue-i18n#920
• .unmount() memory leak vuejs/core#2907 (comment)

[DamianOsipiuk]

@schneefux Could you please check if https://github.com/TanStack/query/releases/tag/v4.24.10 fixes your issue?

[schneefux]

Thank you, I have been running this in production for a while and have not seen any memory leaks since.