Nuxt•3mo ago

Typing weirdness multiple AsyncData in array

Hi All, i can't seem to figure out why storing multiple asyncData objects in an array seems to unref the data, status etc properties. I have an example on this stackblitz: https://stackblitz.com/edit/nuxt-starter-qezsnt?file=useMyAsyncData.ts

import type { AsyncData } from 'nuxt/app';

type Wrapper<DataType> = {
  asyncData?: AsyncData<{ items: DataType[] } | null, Error | null>;
};

type WrapperArray<DataType> = Wrapper<DataType>[];

export function useMyAsyncData<DataType>(): Wrapper<DataType> {
  const asyncData = useAsyncData<{ items: DataType[] }>(
    'cacheKey',
    async () => {
      return {
        items: [] as DataType[],
      };
    },
    { lazy: true, server: false }
  );

  return {
    asyncData,
  };
}

export function useMultiple<DataType>() {
  const wrapperArray = ref<WrapperArray<DataType>>([]);
  const wrapper = useMyAsyncData<DataType>();

  wrapperArray.value.push(wrapper);
}

import type { AsyncData } from 'nuxt/app';

type Wrapper<DataType> = {
  asyncData?: AsyncData<{ items: DataType[] } | null, Error | null>;
};

type WrapperArray<DataType> = Wrapper<DataType>[];

export function useMyAsyncData<DataType>(): Wrapper<DataType> {
  const asyncData = useAsyncData<{ items: DataType[] }>(
    'cacheKey',
    async () => {
      return {
        items: [] as DataType[],
      };
    },
    { lazy: true, server: false }
  );

  return {
    asyncData,
  };
}

export function useMultiple<DataType>() {
  const wrapperArray = ref<WrapperArray<DataType>>([]);
  const wrapper = useMyAsyncData<DataType>();

  wrapperArray.value.push(wrapper);
}

Might be something very stupid, but it has been keeping me busy for a while now.

1 Reply

robbertOP•3mo ago

Got it working by using wrapperArray as a reactive instead of a ref. Still not sure why. So it is because of ref unwrapping and works for reactive arrays because it doesn't unwrap arrays. https://vuejs.org/guide/essentials/reactivity-fundamentals.html#additional-ref-unwrapping-details

Gaming

Programming

Typing weirdness multiple AsyncData in array