robbert
robbert
PostsComments
NNuxt
Created by robbert on 9/25/2024 in #❓・help
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.
3 replies