feat(vue-query): support injectable contexts #5886

posva · 2023-08-19T09:22:08Z

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(): feat: hasInjectionContext() for libraries vuejs/core#8111
app.runWithContext(): feat(app): app.runWithContext() vuejs/core#7451

The only thing that I think is left to do is to add extra warnings in some APIs that rely on the Reactivity API (ref, watch, onScopeDispose etc) by checking if there is a current effect scope. I think this was previously achieved by checking for a current instance within the useQueryClient which seems to be used in functions relying on those functions. But since it wasn't tested, I didn't add them. Let me know if I should add them.

This change requires vue-demi to also be updated, if the package manager doesn't do it for their users, they shall run an pnpm update or similar, they can also install vue-demi and debug with pnpm why (or similar).

I can also replicate the PR for the beta branch

vercel · 2023-08-19T09:22:13Z

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 30, 2023 7:56am

codesandbox-ci · 2023-08-19T09:23:50Z

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 f81488e:

Sandbox	Source
@tanstack/query-example-react-basic-typescript	Configuration
@tanstack/query-example-solid-basic-typescript	Configuration
@tanstack/query-example-svelte-basic	Configuration
@tanstack/query-example-vue-basic	Configuration

nx-cloud · 2023-08-19T19:22:51Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit f81488e. 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

✅ Successfully ran 1 target

nx affected --targets=test:eslint,test:lib,test:types,test:build,test:bundle

Sent with 💌 from NxCloud.

DamianOsipiuk

I would prefer to not introduce this in the current v4.x version if it requires other libraries to be updated as well.
Even though bumping two packages minor version should not be a problem i would prefer to avoid people updating vue-query realize that it does not work via compilation errors and then trying to figure out what is wrong.
v5 is in beta already, so i guess it would be more appropriate to introduce this feature there.
This will have a proper message in migration guide and will encourage people to update to the latest version if they need this feature (which is a win-win).

As for

The only thing that I think is left to do is to add extra warnings in some APIs that rely on the Reactivity API (ref, watch, onScopeDispose etc) by checking if there is a current effect scope. I think this was previously achieved by checking for a current instance within the useQueryClient which seems to be used in functions relying on those functions. But since it wasn't tested, I didn't add them. Let me know if I should add them.

This is true, but we had an escape hatch in place, where you could provide queryClient as a parameter to useQuery which will in result skip call to useQueryClient.
Now when you mentioned it it seems that if someone would use it without effectScope() it would leak. So check for it on top of every composable just before const client = queryClient || useQueryClient() would prevent that from happening.

DamianOsipiuk · 2023-08-19T19:43:45Z

packages/vue-query/src/useQueryClient.ts

+    !hasInjectionContext() ||
+    // ensures `ref()`, `onScopeDispose()` and other APIs can be used
+    !getCurrentScope()
+  ) {
    throw new Error('vue-query hooks can only be used inside setup() function.')


I guess we would need to refine this message to be in line with the logic.
Maybe something along
'vue-query hooks can only be used inside setup() function or functions that support injection context. In case a function with injection context is used, make sure that vue-query hook runs in the effectScope().'
?

Or we could split the check to provide more fine-grained error message.

I think splitting makes more sense as one could use the query client independently

I split the message and checks. I made it only a warning because it might not be critical in all application (e.g SPA)

posva · 2023-08-20T17:03:56Z

I would prefer to not introduce this in the current v4.x version if it requires other libraries to be updated as well.
Even though bumping two packages minor version should not be a problem i would prefer to avoid people updating vue-query realize that it does not work via compilation errors and then trying to figure out what is wrong.

I understand but for Vue 3.3 users, not being able to use the query client within a navigation guard would be a bug. So you can also see this as a bugfix. In practice, users update multiple libraries at the same time and they should also see the requirement in peer deps.

Mini-ghost · 2023-08-21T06:52:20Z

@posva I'm not sure if PR #5703 can serve as a progressive transition solution for this PR?

posva · 2023-08-21T08:35:56Z

it should make it work in most cases yes

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

DamianOsipiuk · 2023-08-25T21:38:21Z

Build should be fixed with vueuse/vue-demi#241

posva · 2023-08-28T08:25:00Z

I released a new version of vue-demi 🙂

callumacrae · 2023-10-18T15:15:13Z

If anyone has issue with getting this to work and comes across this PR / comment, be aware that it doesn't always work like you might think in async functions - if you await anything, the injectable context doesn't exist anymore afterwards and the library will throw an error.

I worked around this by getting the query client before my async stuff and then passing it in to my query function:

  const queryClient = useQueryClient();

  const { isClient } = useCurrentOrg();
  if (!(await isClient())) {
    next('/');
    return;
  }

  const { trial, isTrialEnded } = useTrial({}, queryClient);

(where useTrial passes queryClient through as the second option to useQuery)

An alternative would be to just move the useQuery calls together to the top of the function, but in this case, that would send an extra unwanted request.

btw @posva, thanks for adding this! it's super useful :)

escapedcat · 2023-10-25T09:54:35Z

#5783 and #5703 brought me here.
So by adding the client as a second param everything works (again) ~~but the warning continues to show up, right?~~
This helped. Thanks!

MarioC3 · 2023-10-30T21:33:31Z

Will this work on Nuxt plugins? I'm trying to use useQueryClient, but still getting that error.

Edit: It works, but you must declare the useQueryClient at the top of the plugin function.

andredewaard · 2024-02-22T15:09:32Z

It works but can we get rid of the warning somehow?

DamianOsipiuk requested changes Aug 19, 2023

View reviewed changes

DamianOsipiuk force-pushed the feat/injection-context branch from 26b076c to 50b12f7 Compare August 25, 2023 21:15

DamianOsipiuk changed the base branch from main to beta August 25, 2023 21:15

posva and others added 3 commits August 25, 2023 23:20

refactor: add dev warning for effectScope

3639d00

fix: add memory leak warnings, fix tests

efb01a9

DamianOsipiuk force-pushed the feat/injection-context branch from 50b12f7 to efb01a9 Compare August 25, 2023 21:21

DamianOsipiuk approved these changes Aug 25, 2023

View reviewed changes

DamianOsipiuk added the package: vue-query label Aug 25, 2023

DamianOsipiuk added 2 commits August 28, 2023 15:31

chore: bump vue-demi

e4f0ec2

chore: bump vue version in integrations

f81488e

DamianOsipiuk merged commit a0fae50 into TanStack:beta Aug 30, 2023
9 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(vue-query): support injectable contexts #5886

feat(vue-query): support injectable contexts #5886

posva commented Aug 19, 2023

vercel bot commented Aug 19, 2023 •

edited

codesandbox-ci bot commented Aug 19, 2023 •

edited

nx-cloud bot commented Aug 19, 2023 •

edited

DamianOsipiuk left a comment

DamianOsipiuk Aug 19, 2023

posva Aug 20, 2023

posva Aug 20, 2023

posva commented Aug 20, 2023

Mini-ghost commented Aug 21, 2023 •

edited

posva commented Aug 21, 2023

DamianOsipiuk commented Aug 25, 2023

posva commented Aug 28, 2023

callumacrae commented Oct 18, 2023 •

edited

escapedcat commented Oct 25, 2023 •

edited

MarioC3 commented Oct 30, 2023 •

edited

andredewaard commented Feb 22, 2024

feat(vue-query): support injectable contexts #5886

feat(vue-query): support injectable contexts #5886

Conversation

posva commented Aug 19, 2023

vercel bot commented Aug 19, 2023 • edited

codesandbox-ci bot commented Aug 19, 2023 • edited

nx-cloud bot commented Aug 19, 2023 • edited

☁️ Nx Cloud Report

DamianOsipiuk left a comment

Choose a reason for hiding this comment

DamianOsipiuk Aug 19, 2023

Choose a reason for hiding this comment

posva Aug 20, 2023

Choose a reason for hiding this comment

posva Aug 20, 2023

Choose a reason for hiding this comment

posva commented Aug 20, 2023

Mini-ghost commented Aug 21, 2023 • edited

posva commented Aug 21, 2023

DamianOsipiuk commented Aug 25, 2023

posva commented Aug 28, 2023

callumacrae commented Oct 18, 2023 • edited

escapedcat commented Oct 25, 2023 • edited

MarioC3 commented Oct 30, 2023 • edited

andredewaard commented Feb 22, 2024

vercel bot commented Aug 19, 2023 •

edited

codesandbox-ci bot commented Aug 19, 2023 •

edited

nx-cloud bot commented Aug 19, 2023 •

edited

Mini-ghost commented Aug 21, 2023 •

edited

callumacrae commented Oct 18, 2023 •

edited

escapedcat commented Oct 25, 2023 •

edited

MarioC3 commented Oct 30, 2023 •

edited