NuxtN
Nuxt2y ago
Wild

useFetch triggers on ssr while server: false ?

I put console.log in my useFetch, and I can see that getCachedData get triggered twice while on ssr.
Why is that and how can i prevent this ? Thanks
// /stores/items.ts
export const useItemStore = defineStore('items', () => {
  const key = 'items'
  const lang = computed(() => {return useCookieLocale().value})
  const {data: items, refresh} = useFetch(
    `https://api.profus.net/datacenter/dofus2/items`,
    {
      method: 'GET',
      params: {
        lang: lang
      },
      key: key,
      server: false,
      lazy: true,
      immediate: false,
      deep: false,
      transform(raw_items:Item[]) {
        return new Map<number, Item>(
          raw_items.map(raw_item => {
            return [raw_item.id, raw_item];
          }),)
      },
      getCachedData(key, nuxtapp) {
        if (nuxtapp.static.data[key] !== undefined) {
          console.log({step: 'static'})
          return nuxtapp.static.data[key]
        } 
        if (process.client) {
          if (localStorage.hasOwnProperty(key)) {
          const arr_buffer = JSON.parse(localStorage.getItem(key))
          let map_buffer = new Map<number, Item>(
            arr_buffer.map(raw_item => {
              return [raw_item.id, raw_item];
            })
          )
          console.log({step: 'localstorage'})
          nuxtapp.static.data[key] = map_buffer
          return map_buffer
          }
          else {
            return null
          }
        }
        console.log({step: 'not cached'})
        return {}
      },
      onResponse({ request, response, options }) {
        console.log({step: 'resp'})
        localStorage.setItem('items', JSON.stringify(response._data))
      },
    },
  )

  async function clear_cache() {
    await refresh()
  }

  onHydrated(async () => {
    const nuxtApp = useNuxtApp()
    if (!localStorage.hasOwnProperty(key) || items.value == null) {
        await refresh()
    }
  })

  return {items, clear_cache}
})

}
Was this page helpful?