[Vue] Allow inject in callbacks by implementing runWithContext

[JoostKersjes]

I was recently playing around with provide/inject and discovered that inject does not work in callbacks like query onSuccess.

Vue 3.3 introduced app.runWithContext() (vuejs/core#7451) which allows inject to work outside of components.

vue-router implemented runWithContext so their global route guards can use inject: vuejs/router@909c45b

[DamianOsipiuk]

Callback on useQuery will be removed in v5 as they are not reliable.
You can read more about it in this blog post https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose#a-bad-api

[marlokessler]

Hi @DamianOsipiuk, what do you recommend as alternative when combining useQuery with provide?

[DamianOsipiuk]

Not sure if i understand the question.

If you are asking about running in runWithContext, it is supported from https://github.com/TanStack/query/releases/tag/v4.34.0 and v5.

You can also provide queryClient manually as a second parameter to useQuery, but you have to be careful about memory leaks, so make sure to wrap usage with custom effect scope.