Append data on useFetch on page change instead reload

const {
  data: galleryData,
  status: galleryStatus,
  error: galleryError
} = await useFetch<{
  data: ImageItemSchema[],
  next: boolean,
  }>('/api/images', {
  key: 'gallery-data',
  query: { page },
  watch: [ page ],
  retry: 3,
  retryDelay: 3000,
  lazy: true,
  default() {
    return { data: [], next: false }
  },
  transform(input) {
    return {
      ...input,
      fetchedAt: new Date(),
      currentPage: page.value,
    }
  },
  getCachedData(key) {
    const data = nuxtApp.payload.data[key] || nuxtApp.static.data[key]

    if (!data) return

    if (data.fetchedAt && new Date().getTime() - data.fetchedAt.getTime() > 1000 * 60 * 60) return // 60 minutes

    return data
  },
})

const {
  data: galleryData,
  status: galleryStatus,
  error: galleryError
} = await useFetch<{
  data: ImageItemSchema[],
  next: boolean,
  }>('/api/images', {
  key: 'gallery-data',
  query: { page },
  watch: [ page ],
  retry: 3,
  retryDelay: 3000,
  lazy: true,
  default() {
    return { data: [], next: false }
  },
  transform(input) {
    return {
      ...input,
      fetchedAt: new Date(),
      currentPage: page.value,
    }
  },
  getCachedData(key) {
    const data = nuxtApp.payload.data[key] || nuxtApp.static.data[key]

    if (!data) return

    if (data.fetchedAt && new Date().getTime() - data.fetchedAt.getTime() > 1000 * 60 * 60) return // 60 minutes

    return data
  },
})