[Vue-query ] TypeError: client.defaultQueryOptions is not a function in v5

[Ge6ben]

Describe the bug

I am using Vue @tanstack/vue-query I have latest packages:

    "@tanstack/vue-query": "^5.59.13",
    "@tanstack/vue-query-devtools": "^5.59.13",

i get this error:

Uncaught (in promise) TypeError: client.defaultQueryOptions is not a function
    at ComputedRefImpl.fn (chunk-XV6XIJVG.js?v=897b9526:3988:30)
    at refreshComputed (chunk-TF6X5W6F.js?v=897b9526:634:29)
    at get value (chunk-TF6X5W6F.js?v=897b9526:1825:5)
    at useBaseQuery (chunk-XV6XIJVG.js?v=897b9526:3992:58)
    at useQuery (chunk-XV6XIJVG.js?v=897b9526:4082:10)
    at useUpload (user.ts:8:10)
    at setup (UserDetails.vue:56:26)
    at callWithErrorHandling (chunk-TF6X5W6F.js?v=897b9526:2260:19)
    at setupStatefulComponent (chunk-TF6X5W6F.js?v=897b9526:9943:25)
    at setupComponent (chunk-TF6X5W6F.js?v=897b9526:9904:36)

main.ts:

app.use(VueQueryPlugin, {
  queryClientConfig: {
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
        retry: 0
      }
    }
  }
});

I solved my downgrade the version to : "@tanstack/vue-query": "^4.37.1", I hope to fix this issue

Your minimal, reproducible example

https://github.com/Ge6ben/TanStack-Query

Steps to reproduce

main.ts:

app.use(VueQueryPlugin, {
  queryClientConfig: {
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
        retry: 0
      }
    }
  }
});

package.json :

    "@tanstack/vue-query": "^5.59.13",

in vue file

<script lang="ts" setup>
 import { useSupabase } from '@/plugins/supabase';
import type { Ref } from 'vue';
import { computed, onMounted, ref } from 'vue';
import { useQuery } from '@tanstack/vue-query';

const sortModel = ref(1);

export const useUpload = ({ queryKey }: { queryKey: Ref<{ sortModel: number }> }) => {
  const { supabase } = useSupabase();

  return useQuery(
    // Query key for Vue Query - make sure it's reactive
    ['add-upc-scanner', queryKey.value],
    async () => {
       const { data, error } = await supabase.functions.invoke('/v1/doctors/user', {
        method: 'POST',
        body: JSON.stringify(queryKey.value)
      });

      if (error) {
        throw new Error(error.message);
      }

      return data;
    },{
    enabled: true
    }
  );
};

const getQueryKey = computed(() => ({
  sortModel: sortModel.value
}));
const { data: myData } = useUpload({ queryKey: getQueryKey });

onMounted(() => {});
</script>

<template>
  <div class="text-right">

   {{myData}}
  </div

</template>

Expected behavior

Just run

How often does this bug happen?

when load in the first time

Screenshots or Videos

Platform

macOS Chrome

Tanstack Query adapter

None

TanStack Query version

5.59.13

TypeScript version

5.6.3

Additional context

No response

[pawel-twardziak]

Hi @Ge6ben 👋 It seems that the way useQuery is used is wrong -> https://tanstack.com/query/latest/docs/framework/vue/reference/useQuery In the codebase I can see that:

const { data } = useQuery(['todo'], fetchData)

but I reckon that should have been this:

const { data } = useQuery({ queryKey: ['todo'], queryFn: fetchData })

Can you try this solution out?

[Ge6ben]

Hey @pawel-twardziak, thanks for your response for normal fetch this way works

const { data } = useQuery({ queryKey: ['todo'], queryFn: fetchData })

but when you use it, it will computed properties; it's not!

app.vue

<script lang="ts" setup>
  import { useGetData } from '@/fetchDataCompose'
  import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
  const imageUrl = ref('')
  const queryKey = computed(() => imageUrl.value)
  const { data } = useGetData({ queryKey })

 </script>

<template>
  <div class="text-right">
    {{ data }}
    <VueQueryDevtools />

  </div>
</template>

useGetData compose:

// const { data, error, isLoading, isError } = useGetDoctors({ queryKey: imageUrl });
import { useQuery } from '@tanstack/vue-query'
import { Ref } from 'vue'

export const useGetData = ({ queryKey }: { queryKey: Ref<string> }) => {
  return useQuery(
     ['get-data', queryKey.value],
    async () => {
      // Query data from Supabase
      const response = await fetch('https://jsonplaceholder.typicode.com/todos/1')

      return response.json()
    }

  )
}

link in GitHub