fix: use hasInjectionContext in useApolloClient before calling inject (…

…#1529)

Co-authored-by: Dawid Kopys <[email protected]>

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

@@ -0,0 +1,42 @@
+<script lang="ts">
+import { apolloClient } from '@/apollo'
+import gql from 'graphql-tag'
+import { provideApolloClient, useQuery } from '@vue/apollo-composable'
+import { ref, defineComponent, hasInjectionContext, effectScope, computed, watch, onBeforeUnmount } from 'vue'
+
+const hello = ref('')
+const scope = effectScope()
+
+scope.run(() => {
+  const query = provideApolloClient(apolloClient)(() => useQuery(gql`
+    query hello {
+      hello
+    }
+  `))
+  const innerHello = computed(() => query.result.value?.hello ?? '')
+
+  watch(innerHello, (newHello) => {
+    hello.value = newHello
+  }, {
+    immediate: true,
+  })
+})
+
+export default defineComponent({
+  setup () {
+    onBeforeUnmount(() => {
+      scope.stop()
+    })
+
+    return {
+      hello,
+    }
+  },
+})
+</script>
+
+<template>
+  <div class="no-setup-scope-query">
+    {{ hello }}
+  </div>
+</template>

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

@@ -72,5 +72,12 @@ export const router = createRouter({
         layout: 'blank',
       },
     },
+    {
+      path: '/no-setup-scope-query',
+      component: () => import('./components/NoSetupScopeQuery.vue'),
+      meta: {
+        layout: 'blank',
+      },
+    },
   ],
 })

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

@@ -119,4 +119,9 @@ describe('Vue 3 + Apollo Composable', () => {
     cy.get('[data-test-id="global-loading"]').should('not.contain', 'Global loading...')
     cy.contains('#app', 'Currently viewing # General')
   })
+
+  it('supports queries outside of setup but within scope', () => {
+    cy.visit('/no-setup-scope-query')
+    cy.contains('.no-setup-scope-query', 'Hello world!')
+  })
 })

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

@@ -1,4 +1,4 @@
-import { getCurrentInstance, getCurrentScope, inject } from 'vue-demi'
+import { hasInjectionContext, 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() && !getCurrentScope()) {
+  if (!hasInjectionContext()) {
     resolveImpl = (id?: ClientId) => {
       if (id) {
         return resolveClientWithId(savedCurrentClients, id)