Nuxt 3 useAsyncData access previous value with refresh method

Question

I am trying to implement infinite scroll using nuxt3.

Key target:
Initial load should contain server rendered content

So my code is

const { data, refresh } = await useAsyncData(async () => {
  const response = await $fetch(`/api/whatever?limit=${limit}&skip=${skip}`);

  return {
    totalElements: response.count,
    items: response.items,
  };
});

Everything is fine here except I couldn't accumulate previous result with current result after refresh() to achieve infinite scroll because data is not accessible inside useAsyncData handler so i can't use

return {
  totalElements: response.count,
  items: [...data.value.items, ...response.items],
};

Also it is impossible to assign current value to ref and reuse it inside handler as server ref will take changes and client ref will be empty value at initial load.

I have a workaround but it is a kind of a crutch and sometimes results to a glitchy scroll behaviour because server rendered data.value.items is an array of objects and after modifying data.value.items on client side it becomes an array of proxies.

  // This code is outside useAsyncData composable
  ...
  const response = await useFetch(...);
  data.value.items = [...data.value.items, ...response.items];

Any ideas?

Answer 1

I've figured it out. I don't know if this is the right way to do it but it works! Seems like data is accessible inside useAsyncData on client side so I just have to check it first.

const { data, refresh } = await useAsyncData(async () => {
  const response = await $fetch(
    `/api/whatever?limit=${limit}&skip=${skip}`,
  );

  if (response) {
    return {
      totalElements: response.count,
      items: data?.value?.items
        ? [...data.value.items, ...response.items]
        : response.items,
    };
  }
});

And in scrollHandler I can use refresh now. Hope it can help anyone who's struggling with infinite scroll and nuxt3.

Answer 2

The callback in the useAsyncData hook uses the Nuxtapp instance as a parameter (app). Through this parameter, you can access the current value of your useAsyncData by the set key.

const { data } = useAsyncData('my-data', async (app) => {
    // reference the previous data
    const previousData : Result | undefined = app?._asyncData?.['my-data']?.data.value;

    console.log(previousData);

    // Fetch the new data
    const result : Result = await $fetch('/api/whatever');

    return result
});