feat: support effect scope outside of component, fix #1505

Author: Akryum

packages/test-e2e-composable-vue3/package.json

@@ -20,6 +20,7 @@
     "@vue/apollo-util": "workspace:*",
     "graphql": "^16.7.1",
     "graphql-tag": "^2.12.6",
+    "pinia": "^2.1.6",
     "test-server": "workspace:*",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"

packages/test-e2e-composable-vue3/src/components/App.vue

@@ -1,22 +1,21 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import ChannelList from './ChannelList.vue'
+import GlobalLoading from './GlobalLoading.vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const displayChannels = computed(() => !route.matched.some(r => r.meta?.layout === 'blank'))
+</script>
+
 <template>
   <GlobalLoading />
   <div class="flex h-screen items-stretch bg-gray-100">
-    <ChannelList class="w-1/4 border-r border-gray-200" />
+    <ChannelList
+      v-if="displayChannels"
+      class="w-1/4 border-r border-gray-200"
+    />
     <router-view class="flex-1 overflow-auto" />
   </div>
 </template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-import ChannelList from './ChannelList.vue'
-import GlobalLoading from './GlobalLoading.vue'
-
-export default defineComponent({
-  name: 'App',
-
-  components: {
-    ChannelList,
-    GlobalLoading,
-  },
-})
-</script>

packages/test-e2e-composable-vue3/src/components/ChannelListPinia.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { useChannels } from '@/stores/channel'
+
+const channelStore = useChannels()
+</script>
+
+<template>
+  <div
+    v-if="channelStore.loading"
+    class="p-12 text-gray-500"
+  >
+    Loading channels...
+  </div>
+
+  <div
+    v-else
+    class="flex flex-col bg-white"
+  >
+    <router-link
+      v-for="channel of channelStore.channels"
+      :key="channel.id"
+      v-slot="{ href, navigate, isActive }"
+      :to="{
+        name: 'channel',
+        params: {
+          id: channel.id,
+        },
+      }"
+      custom
+    >
+      <a
+        :href="href"
+        class="channel-link px-4 py-2 hover:bg-green-100 text-green-700"
+        :class="{
+          'bg-green-200 hover:bg-green-300 text-green-900': isActive,
+        }"
+        @click="navigate"
+      >
+        # {{ channel.label }}
+      </a>
+    </router-link>
+  </div>
+</template>

packages/test-e2e-composable-vue3/src/components/ChannelListPinia2.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { useChannels } from '@/stores/channel'
+import { onBeforeUnmount, ref, watch } from 'vue'
+
+const channels = ref<any[]>([])
+
+let unwatch: (() => void) | undefined
+setTimeout(() => {
+  const channelStore = useChannels()
+  unwatch = watch(() => channelStore.channels, (newChannels) => {
+    channels.value = newChannels
+  }, {
+    immediate: true,
+  })
+}, 0)
+
+onBeforeUnmount(() => {
+  unwatch?.()
+})
+</script>
+
+<template>
+  <div
+    v-if="channels"
+    class="flex flex-col bg-white"
+  >
+    <router-link
+      v-for="channel of channels"
+      :key="channel.id"
+      v-slot="{ href, navigate, isActive }"
+      :to="{
+        name: 'channel',
+        params: {
+          id: channel.id,
+        },
+      }"
+      custom
+    >
+      <a
+        :href="href"
+        class="channel-link px-4 py-2 hover:bg-green-100 text-green-700"
+        :class="{
+          'bg-green-200 hover:bg-green-300 text-green-900': isActive,
+        }"
+        @click="navigate"
+      >
+        # {{ channel.label }}
+      </a>
+    </router-link>
+  </div>
+</template>

packages/test-e2e-composable-vue3/src/main.ts

@@ -1,15 +1,13 @@
-import { createApp, h, provide } from 'vue'
+import { createApp } from 'vue'
 import { DefaultApolloClient } from '@vue/apollo-composable'
+import { createPinia } from 'pinia'
 import { apolloClient } from './apollo'
 import App from './components/App.vue'
 import { router } from './router'
 import '@/assets/styles/tailwind.css'
 
-const app = createApp({
-  setup () {
-    provide(DefaultApolloClient, apolloClient)
-  },
-  render: () => h(App),
-})
+const app = createApp(App)
+app.use(createPinia())
 app.use(router)
+app.provide(DefaultApolloClient, apolloClient)
 app.mount('#app')

packages/test-e2e-composable-vue3/src/router.ts

@@ -50,5 +50,19 @@ export const router = createRouter({
       path: '/null-query',
       component: () => import('./components/NullQuery.vue'),
     },
+    {
+      path: '/pinia',
+      component: () => import('./components/ChannelListPinia.vue'),
+      meta: {
+        layout: 'blank',
+      },
+    },
+    {
+      path: '/pinia2',
+      component: () => import('./components/ChannelListPinia2.vue'),
+      meta: {
+        layout: 'blank',
+      },
+    },
   ],
 })

packages/test-e2e-composable-vue3/src/stores/channel.ts

@@ -0,0 +1,33 @@
+import gql from 'graphql-tag'
+import { useQuery } from '@vue/apollo-composable'
+import { defineStore } from 'pinia'
+import { computed, watch } from 'vue'
+
+interface Channel {
+  id: string
+  label: string
+}
+
+export const useChannels = defineStore('channel', () => {
+  const query = useQuery<{ channels: Channel[] }>(gql`
+    query channels {
+      channels {
+        id
+        label
+      }
+    }
+  `)
+
+  const channels = computed(() => query.result.value?.channels ?? [])
+
+  watch(query.loading, value => {
+    console.log('loading', value)
+  }, {
+    immediate: true,
+  })
+
+  return {
+    loading: query.loading,
+    channels,
+  }
+})

packages/test-e2e-composable-vue3/tests/e2e/specs/pinia.cy.ts

@@ -0,0 +1,19 @@
+describe('Pinia', () => {
+  beforeEach(() => {
+    cy.task('db:reset')
+  })
+
+  it('with current instance', () => {
+    cy.visit('/pinia')
+    cy.get('.channel-link').should('have.lengthOf', 2)
+    cy.contains('.channel-link', '# General')
+    cy.contains('.channel-link', '# Random')
+  })
+
+  it('with effect scope only', () => {
+    cy.visit('/pinia2')
+    cy.get('.channel-link').should('have.lengthOf', 2)
+    cy.contains('.channel-link', '# General')
+    cy.contains('.channel-link', '# Random')
+  })
+})

packages/vue-apollo-composable/src/useApolloClient.ts

@@ -1,4 +1,4 @@
-import { getCurrentInstance, inject } from 'vue-demi'
+import { getCurrentInstance, getCurrentScope, inject } from 'vue-demi'
 import { ApolloClient } from '@apollo/client/core/index.js'
 
 export const DefaultApolloClient = Symbol('default-apollo-client')
@@ -35,7 +35,7 @@ export function useApolloClient<TCacheShape = any> (clientId?: ClientId): UseApo
   // Save current client in current closure scope
   const savedCurrentClients = currentApolloClients
 
-  if (!getCurrentInstance()) {
+  if (!getCurrentInstance() && !getCurrentScope()) {
     resolveImpl = (id?: ClientId) => {
       if (id) {
         return resolveClientWithId(savedCurrentClients, id)
@@ -68,7 +68,7 @@ export function useApolloClient<TCacheShape = any> (clientId?: ClientId): UseApo
       throw new Error(
         `Apollo client with id ${
           id ?? 'default'
-        } not found. Use provideApolloClient() if you are outside of a component setup.`,
+        } not found. Use an app.runWithContext() or provideApolloClient() if you are outside of a component setup.`,
       )
     }
     return client