Skip to content

Unable to use Core QueryClient as Custom Query Client in Vue #8937

@rjdmacedo

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions