query icon indicating copy to clipboard operation
query copied to clipboard

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

Open Ge6ben opened this issue 1 year ago • 0 comments

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

Image

Platform

macOS Chrome

Tanstack Query adapter

None

TanStack Query version

5.59.13

TypeScript version

5.6.3

Additional context

No response

Ge6ben avatar Oct 19 '24 12:10 Ge6ben