Unable to use Core QueryClient as Custom Query Client in Vue

[rjdmacedo]

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

[TkDodo]

vue-query has a wrapper around the QueryClient, so I guess this is expected @DamianOsipiuk ?

https://github.com/TanStack/query/blob/1b542518450ba9c71bf54bc1f78f798c18ed9e7e/packages/vue-query/src/queryClient.ts

[rjdmacedo]

Hi @TkDodo, thanks for chiming in.
We want to create a generic Query Client implementation leveraging @tanstack/query-core and use it on the API level to use it's cache, invalidation, ...etc.
On the other hand we have our frontend apps (vue, react, svelte) that would use this generic package Query Client instance.
But what we're seeing is that VueQueryPlugin expects the custom query client to be an instance of Vue Query Client rather than Core Query Client, which:

1. thats not what the documentation suggests and
2. defeats the purpose of accepting a custom query client if a core instance is not allowed.

[DamianOsipiuk]

Well, this could potentially be fixed.
Right now it's tripping on watcher that looks for isRestoring ref on the client
watch(client.isRestoring, ...)

This was added to keep track of cache restoration progress of Persister.

It should be possible to add null checks in few spots, so core client would be compatible.

You would loose some Vue specific logic though, like unreffing arguments or making sure that invalidateQueries waits for reactive updates before computing invalidation key.

[dominicpedro]

Is there any update on this?