fix: change teardown to use onScopeDispose

vuejs · Mar 26, 2024 · 50a8ab1 · 50a8ab1
1 parent 0f5ae61
commit 50a8ab1
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 8 deletions.
diff --git a/packages/test-e2e-composable-vue3/src/components/ChannelListPiniaContainer.vue b/packages/test-e2e-composable-vue3/src/components/ChannelListPiniaContainer.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import ChannelListPinia from './ChannelListPinia.vue'
+
+const isComponentVisible = ref(true)
+</script>
+
+<template>
+  <div>
+    <button
+      data-test-id="channel-list-toggle"
+      @click="isComponentVisible = !isComponentVisible"
+    >
+      Toggle ChannelListPinia component
+    </button>
+
+    <div
+      v-if="isComponentVisible"
+      data-test-id="channel-list-container"
+    >
+      <ChannelListPinia />
+    </div>
+  </div>
+</template>
diff --git a/packages/test-e2e-composable-vue3/src/router.ts b/packages/test-e2e-composable-vue3/src/router.ts
@@ -72,6 +72,13 @@ export const router = createRouter({
         layout: 'blank',
       },
     },
+    {
+      path: '/pinia3',
+      component: () => import('./components/ChannelListPiniaContainer.vue'),
+      meta: {
+        layout: 'blank',
+      },
+    },
     {
       path: '/no-setup-scope-query',
       component: () => import('./components/NoSetupScopeQuery.vue'),

diff --git a/packages/test-e2e-composable-vue3/tests/e2e/specs/pinia.cy.ts b/packages/test-e2e-composable-vue3/tests/e2e/specs/pinia.cy.ts
@@ -16,4 +16,15 @@ describe('Pinia', () => {
     cy.contains('.channel-link', '# General')
     cy.contains('.channel-link', '# Random')
   })
+
+  it('works after component unmount if used in pinia', () => {
+    cy.visit('/pinia3')
+    cy.get('[data-test-id="channel-list-container"]').should('exist')
+    cy.get('[data-test-id="channel-list-toggle"]').first().click()
+    cy.get('[data-test-id="channel-list-container"]').should('not.exist')
+    cy.get('[data-test-id="channel-list-toggle"]').first().click()
+    cy.get('.channel-link').should('have.lengthOf', 2)
+    cy.contains('.channel-link', '# General')
+    cy.contains('.channel-link', '# Random')
+  })
 })
diff --git a/packages/vue-apollo-composable/src/useMutation.ts b/packages/vue-apollo-composable/src/useMutation.ts
@@ -1,6 +1,6 @@
 import { DocumentNode } from 'graphql'
 import { MutationOptions, OperationVariables, FetchResult, TypedDocumentNode, ApolloError, ApolloClient } from '@apollo/client/core/index.js'
-import { ref, onBeforeUnmount, isRef, Ref, getCurrentInstance, shallowRef } from 'vue-demi'
+import { ref, onScopeDispose, isRef, Ref, getCurrentInstance, shallowRef } from 'vue-demi'
 import { useApolloClient } from './useApolloClient'
 import { ReactiveFunction } from './util/ReactiveFunction'
 import { useEventHook } from './util/useEventHook'
@@ -118,7 +118,7 @@ export function useMutation<
     return null
   }
 
-  vm && onBeforeUnmount(() => {
+  vm && onScopeDispose(() => {
     loading.value = false
   })
 

diff --git a/packages/vue-apollo-composable/src/useQuery.ts b/packages/vue-apollo-composable/src/useQuery.ts
@@ -6,7 +6,7 @@ import {
   watch,
   onServerPrefetch,
   getCurrentInstance,
-  onBeforeUnmount,
+  onScopeDispose,
   nextTick,
   shallowRef,
 } from 'vue-demi'
@@ -615,7 +615,7 @@ export function useQueryImpl<
   }
 
   // Teardown
-  vm && onBeforeUnmount(() => {
+  vm && onScopeDispose(() => {
     stop()
     subscribeToMoreItems.length = 0
   })

diff --git a/packages/vue-apollo-composable/src/useSubscription.ts b/packages/vue-apollo-composable/src/useSubscription.ts
@@ -6,7 +6,7 @@ import {
   isRef,
   computed,
   getCurrentInstance,
-  onBeforeUnmount,
+  onScopeDispose,
   nextTick,
   shallowRef,
 } from 'vue-demi'
@@ -298,7 +298,7 @@ export function useSubscription <
   })
 
   // Teardown
-  vm && onBeforeUnmount(stop)
+  vm && onScopeDispose(stop)
 
   return {
     result,

diff --git a/packages/vue-apollo-composable/src/util/loadingTracking.ts b/packages/vue-apollo-composable/src/util/loadingTracking.ts
@@ -1,4 +1,4 @@
-import { Ref, watch, onUnmounted, ref, getCurrentInstance, onBeforeUnmount } from 'vue-demi'
+import { Ref, watch, onUnmounted, ref, getCurrentInstance, onScopeDispose } from 'vue-demi'
 import { isServer } from './env.js'
 
 export interface LoadingTracking {
@@ -61,7 +61,7 @@ function track (loading: Ref<boolean>, type: keyof LoadingTracking) {
     immediate: true,
   })
 
-  onBeforeUnmount(() => {
+  onScopeDispose(() => {
     if (loading.value) {
       if (tracking) tracking[type].value--
       globalTracking[type].value--