vue.jsvuejs3vueuse

VueUse useVirtualList issue


When I try to initialize the virtual list i get the following error message and I don't really understand why :

Argument of type 'AppItem[] | undefined' is not assignable to parameter of type 'MaybeRef<AppItem[]>'.
  Type 'undefined' is not assignable to type 'MaybeRef<AppItem[]>'.ts(2345)

Here is the initialization of the virtual list in my Vue Component

const { apps, isLoading, error } = useApps();

const { list, containerProps, wrapperProps } = useVirtualList(apps.value, {
  itemHeight: 22,
});

This is the hook where I retrieve my data : apps. I'm not sure if this is the cause of the error, but I use tanstack query

const useApps = () => {
  const params = reactive({
    appName: "",
    state: "",
    bucket: "",
  });

  const {
    isLoading,
    data: apps,
    error,
  } = useQuery(["apps"], () => getApps(params));
  return { isLoading, apps, error, params };
};

Solution

  • You probably should provide default: [] to your useQuery and use apps ref as is if you want it to retain reactivity

    The problem is you are missing "or []" somewhere - either in useQuery(..., []), computed(() => apps.value ?? []) or apps.value ?? []