vuejs / apollo

🚀 Apollo/GraphQL integration for VueJS
http://apollo.vuejs.org
MIT License
6.03k stars 523 forks source link

`onBeforeUnmount` hook in `useQuery` is undesirable when used in pinia store #1538

Closed ADALimtec closed 8 months ago

ADALimtec commented 8 months ago

Describe the bug I was recently investigating a bug where various refetch calls for queries where not fetching data anymore after some time on the page. What I found is that queries are being stopped internally by Apollo through the onBeforeUnmount hook. While this might make sense on components, it can get troublesome on pinia stores where they are currently defined in my project. The hooks defined in a store are directed to the component the store is initialized on, and once that component is unmounted it also stops the query, even if it is still in use through the store. This might pose no problem if the store was initialized e.g. on the root component which never is unmounted, but is undesirable if initialized on any component that will unmount during the page's lifetime.

To Reproduce Steps to reproduce the behavior:

  1. Create a pinia store and use useQuery.
  2. Initialize the pinia store (= call the use[..]Store for the first time) on a component that you can unmount through any means.
  3. Unmount the component.
  4. Call refetch from the useQuery defined in the store - it will return undefined, the query object from useQuery will be null, and the data - if being changed - will not update.

Expected behavior In pinia stores, queries should not be stopped internally at all, regardless of the component they were first initialized on.

Versions vue: 3.4.20 vue-apollo: 4.0.1 @apollo/client: 3.9.5

Additional context A workaround for this issue would be to initialize every store that uses useQuery on the root component to ensure that the onBeforeUnmount hook will never be called before the lifetime of the page ends.

676962537 commented 8 months ago

I encountered the same problem,After reading your explanation,And I also checked the source code,You're right,Your solution is ok,I initially wanted to package <keep-alive></keep-alive> outside the <router-view></router-view>,But this is not a good solution