feat(vue-query): support injectable contexts

This feature requires Vue 3.3.0, which has been out for a while now. It
allows using vue-query APIs in places where it is valid to use them but
currently throws an error.

- `hasInjectionContext()`: vuejs/core#8111
- `app.runWithContext()`: vuejs/core#7451

Author: posva

examples/vue/basic/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@tanstack/vue-query": "^5.0.0-beta.0",
-    "vue": "^3.2.47"
+    "vue": "^3.3.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",

examples/vue/dependent-queries/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@tanstack/vue-query": "^5.0.0-beta.0",
-    "vue": "^3.2.47"
+    "vue": "^3.3.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",

examples/vue/persister/package.json

@@ -11,7 +11,7 @@
     "@tanstack/query-persist-client-core": "^5.0.0-beta.0",
     "@tanstack/query-sync-storage-persister": "^5.0.0-beta.0",
     "@tanstack/vue-query": "^5.0.0-beta.0",
-    "vue": "^3.2.47"
+    "vue": "^3.3.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",

package.json

@@ -83,6 +83,7 @@
     "solid-js": "^1.7.8",
     "stream-to-array": "^2.3.0",
     "tsup": "^7.1.0",
+    "ts-node": "^10.7.0",
     "type-fest": "^3.13.0",
     "typescript": "^5.0.4",
     "vite": "^4.4.4",

packages/vue-query/package.json

@@ -61,7 +61,7 @@
     "@tanstack/match-sorter-utils": "^8.8.4",
     "@tanstack/query-core": "workspace:*",
     "@vue/devtools-api": "^6.5.0",
-    "vue-demi": "^0.13.11"
+    "vue-demi": "^0.14.5"
   },
   "devDependencies": {
     "@vue/composition-api": "1.7.1",
@@ -71,7 +71,7 @@
   },
   "peerDependencies": {
     "@vue/composition-api": "^1.1.2",
-    "vue": "^2.5.0 || ^3.0.0"
+    "vue": "^2.5.0 || ^3.3.0"
   },
   "peerDependenciesMeta": {
     "@vue/composition-api": {

packages/vue-query/src/__tests__/useQueryClient.test.ts

@@ -1,12 +1,12 @@
-import { getCurrentInstance, inject } from 'vue-demi'
+import { hasInjectionContext, inject } from 'vue-demi'
 import { vi } from 'vitest'
 import { useQueryClient } from '../useQueryClient'
 import { VUE_QUERY_CLIENT } from '../utils'
 import type { Mock } from 'vitest'
 
 describe('useQueryClient', () => {
   const injectSpy = inject as Mock
-  const getCurrentInstanceSpy = getCurrentInstance as Mock
+  const hasInjectionContextSpy = hasInjectionContext as Mock
 
   beforeEach(() => {
     vi.restoreAllMocks()
@@ -32,10 +32,10 @@ describe('useQueryClient', () => {
   })
 
   test('should throw an error when used outside of setup function', () => {
-    getCurrentInstanceSpy.mockReturnValueOnce(undefined)
+    hasInjectionContextSpy.mockReturnValueOnce(false)
 
     expect(useQueryClient).toThrowError()
-    expect(getCurrentInstanceSpy).toHaveBeenCalledTimes(1)
+    expect(hasInjectionContextSpy).toHaveBeenCalledTimes(1)
   })
 
   test('should call inject with a custom key as a suffix', () => {

packages/vue-query/src/useQueryClient.ts

@@ -1,12 +1,15 @@
-import { getCurrentInstance, inject } from 'vue-demi'
+import { getCurrentScope, hasInjectionContext, inject } from 'vue-demi'
 
 import { getClientKey } from './utils'
 import type { QueryClient } from './queryClient'
 
 export function useQueryClient(id = ''): QueryClient {
-  const vm = getCurrentInstance()?.proxy
-
-  if (!vm) {
+  if (
+    // ensures that `inject()` can be used
+    !hasInjectionContext() ||
+    // ensures `ref()`, `onScopeDispose()` and other APIs can be used
+    !getCurrentScope()
+  ) {
     throw new Error('vue-query hooks can only be used inside setup() function.')
   }