feat(vue-query): support invoke in vue runWithContext()

[Mini-ghost]

Currently, we cannot use useQuery and useMutation outside of setup, maybe a nuxt plugin or middleware or vue router beforeEach.

In Vue 3.3, we can use app.runWithContext to look up injections from the values provided by the current app without being restricted to use in setup

This is Vue document example:

import { inject } from 'vue'

app.provide('id', 1)

const injected = app.runWithContext(() => {
  return inject('id')
})

console.log(injected) // 1

Application API | Vue.js # app.runWithContext()

So I adjusted the order of throwing errors, we can try to inject first, and if the queryClient cannot be found, it will be determined which error message to display according to the result of getCurrentInstance().

This change will not break projects before Vue 3.3, it is backward compatible

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
query	⬜️ Ignored (Inspect)	Visit Preview		Aug 23, 2023 7:12am

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit f67e796. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

🟥 Failed Commands
nx affected --targets=test:eslint,test:lib,test:types,test:build

✅ Successfully ran 1 target

• nx affected --targets=test:lib --base=a41f0bfdeeb197017a0837b4a23f4a54309ac5bb

---

Sent with 💌 from NxCloud.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit f67e796:

Sandbox	Source
@tanstack/query-example-vue-basic	Configuration

[codecov-commenter]

Codecov Report

Patch coverage: 100.00% and project coverage change: +7.70 🎉

Comparison is base (b18426d) 92.29% compared to head (0f8263b) 100.00%.

❗ Your organization is not using the GitHub App Integration. As a result you may experience degraded service beginning May 15th. Please install the Github App Integration for your organization. Read more.

Additional details and impacted files

@@             Coverage Diff             @@
##             main     #5703      +/-   ##
===========================================
+ Coverage   92.29%   100.00%   +7.70%     
===========================================
  Files         112        13      -99     
  Lines        4283       400    -3883     
  Branches     1117        79    -1038     
===========================================
- Hits         3953       400    -3553     
+ Misses        309         0     -309     
+ Partials       21         0      -21     

Impacted Files	Coverage Δ
packages/vue-query/src/useQueryClient.ts	100.00% <100.00%> (ø)

... and 99 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

[DamianOsipiuk]

@Mini-ghost Could you please add a test to verify that vue-query composable executed in app.runWithContext would not leak, by checking if onScopeDispose is properly called?

[Mini-ghost]

@DamianOsipiuk I tried it and noticed that onScopeDispose is not called after app.unmount(). I'm not sure if this is an intended feature for vue or maybe a bug that needs to be tracked down.

Reproduction

1. Open reproduction link: onScopeDispose will not be called in runWithContext - stackblitz
2. Open Devtool > Console
3. Check if cope dispose is printed

[posva]

You need to add a second parameter to inject to avoid Vue warning