Nuxt•4w ago

Append data on useFetch on page change instead reload

Hi I would like to keep my data of previewed pages and append new data of the existing cached or stop if no more pages. Should I do separate useState or try it inside useFetch, i do not care about hard reloaded data, galleryData is for infinite gallery variable

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
  },
})

4 Replies

kapa.ai•4w ago

Hi @HardWare. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To append data on useFetch when the page changes instead of reloading, you can modify your existing code to achieve this. Here's how you can approach it: 1. Use a separate useState to store the accumulated data:

const accumulatedData = useState<ImageItemSchema[]>('accumulatedGalleryData', () => [])

const accumulatedData = useState<ImageItemSchema[]>('accumulatedGalleryData', () => [])

2. Modify your useFetch call to append the new data to the accumulated 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) {
    // Append new data to accumulated data
    accumulatedData.value = [...accumulatedData.value, ...input.data]
    return {
      ...input,
      data: accumulatedData.value, // Use accumulated data
      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) {
    // Append new data to accumulated data
    accumulatedData.value = [...accumulatedData.value, ...input.data]
    return {
      ...input,
      data: accumulatedData.value, // Use accumulated data
      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
  },
})

This approach will keep appending new data to the accumulatedData state on each page change, while still maintaining the caching behavior you've implemented. To stop fetching when there are no more pages, you can add a condition in your component that increments the page value:

const loadMore = () => {
  if (galleryData.value?.next) {
    page.value++
  }
}

const loadMore = () => {
  if (galleryData.value?.next) {
    page.value++
  }
}

This way, you'll only load more data if there are more pages available. Remember that this approach will keep accumulating data in memory. If you're dealing with a large amount of data, you might want to consider implementing a strategy to limit the amount of data stored, such as keeping only the last N pages or implementing virtual scrolling. Docs > Api > Composables > useFetch provides more information on the useFetch composable and its options. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@358326054357565442> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Mittchel•4w ago

use pinia

HardWareOP•4w ago

I had consider it but I think thats to much powerhouse just for gallery infinite scroll

Gaming

Programming

Append data on useFetch on page change instead reload

Did you find this page helpful?