-
-
Notifications
You must be signed in to change notification settings - Fork 3.4k
Description
Describe the bug
In the docs we can read the following:
If You provide
QueryClientConfig
,QueryClient
instance will be created internally and provided to Vue context.
I am trying to provide/inject a Query Client instance that comes from Core, rather then from Vue into VueQueryPlugin
and I'm getting an error:
Cannot read properties of undefined (reading 'value')
This error occurs because the VueQueryPlugin expects an instance of QueryClient that comes from @tanstack/vue-query
, which is not whats the docs say.
Can you please help us understand what we need to do, if we're doing anything wrong, otherwise if this can be supported as a feature.
This would really help in allowing core
to be used across different apps like Vue, React, ...etc.
Your minimal, reproducible example
https://stackblitz.com/edit/tanstack-query-u8arfppk?file=src%2FApp.vue
Steps to reproduce
//--- custom package
import { QueryClient } from "@tanstack/query-core";
export const queryClient = new QueryClient();
// --- vue app
import { useHeadlessQuery } from "@custom-package";
const { queryClient } = useHeadlessQuery();
app.use(VueQueryPlugin, {
queryClient, // this instance is coming from @tanstack/query-core
});
// --- vue composable
const query = useQuery({ // This will throw -> Cannot read properties of undefined (reading 'value')
queryKey: ["some", "key"], // this key exists on the custom package
queryFn: () => getAll(),
});
Expected behavior
VueQueryPlugin
should be able to consume a Core
query client instance rather than only Vue
query client instances
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
- OS: macOS
- Broswer: Chrome, Arc, Firefox
- Version: latest
Tanstack Query adapter
vue-query
TanStack Query version
v5.71.3
TypeScript version
v5.7.3
Additional context
No response