From 460a0dbd113015275bee6f8b3b88ed86dc79d75e Mon Sep 17 00:00:00 2001
From: Dawid Kopys <dewke17@gmail.com>
Date: Wed, 24 Jan 2024 09:41:26 +0100
Subject: [PATCH] fix: use hasInjectionContext in useApolloClient before
 calling inject (#1529)

Co-authored-by: Dawid Kopys <dawid.kopys@creativestyle.pl>
---
 .../src/components/NoSetupScopeQuery.vue      | 42 +++++++++++++++++++
 .../test-e2e-composable-vue3/src/router.ts    |  7 ++++
 .../tests/e2e/specs/test.cy.ts                |  5 +++
 .../src/useApolloClient.ts                    |  4 +-
 4 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 packages/test-e2e-composable-vue3/src/components/NoSetupScopeQuery.vue

diff --git a/packages/test-e2e-composable-vue3/src/components/NoSetupScopeQuery.vue b/packages/test-e2e-composable-vue3/src/components/NoSetupScopeQuery.vue
new file mode 100644
index 00000000..c57c2128
--- /dev/null
+++ b/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>
diff --git a/packages/test-e2e-composable-vue3/src/router.ts b/packages/test-e2e-composable-vue3/src/router.ts
index 51bbbdc6..03615be8 100644
--- a/packages/test-e2e-composable-vue3/src/router.ts
+++ b/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',
+      },
+    },
   ],
 })
diff --git a/packages/test-e2e-composable-vue3/tests/e2e/specs/test.cy.ts b/packages/test-e2e-composable-vue3/tests/e2e/specs/test.cy.ts
index d2a37ce1..f52279ba 100644
--- a/packages/test-e2e-composable-vue3/tests/e2e/specs/test.cy.ts
+++ b/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!')
+  })
 })
diff --git a/packages/vue-apollo-composable/src/useApolloClient.ts b/packages/vue-apollo-composable/src/useApolloClient.ts
index cee3e60a..134392a1 100644
--- a/packages/vue-apollo-composable/src/useApolloClient.ts
+++ b/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)