Caching mechanism error in VueJS

[ScreamZ]

Hi everyone,

import { supabase } from '@modules/supabase';
import { useQuery } from '@tanstack/vue-query';
import { MaybeRef, computed, toValue } from 'vue';

export function useServicesTitleList(
  currentServiceType: MaybeRef<string | undefined>
) {
  return useQuery({
    queryKey: ['servicesTitleList', currentServiceType],
    initialData: [],
    staleTime: Infinity,
    enabled: computed(() => !!toValue(currentServiceType)),
    queryFn: async () => {
      const val = toValue(currentServiceType);

      if (!val) return [];

      const { data } = await supabase
        .from('bubble_os_os___wording_prestation')
        .select('*')
        .eq('type0', val);

      return (
        data?.map((d) => ({
          label: d.display,
          value: d.display,
        })) ?? []
      );
    },
  });
}

Can anyone explains me why when i put staleTime: Infinity even if the the key is changing thanks to currentServiceType being reactive the queryFn never gets called and therefore I have an empty array ?

If i remove staleTime, everything works, but this fetch everytime the currentServiceType changes, which i don't want because those data are not likely to change (if I go A to B to A, A is the same values, no need to fetch)

Thanks

[DamianOsipiuk]

initialData is treated like a valid response, therefore when you change the queryKey it will use initialData and do not refetch it due to staleTime: Infinity.

You could try with placeholderData.

[ScreamZ]

Alright, I get it. Thank you very much :) It's way clearer now :)