Need some help about useFetch usage
Hello friends,
anyone knows why a useFetch would trigger once on the client although the getCachedData return data from localstorage ? I got getCachedData into getCachedData into onReponse into Transform.
Some code since it might help :
export const useItemStore = defineStore('items', () => {
const lang = computed(() => {return useCookieLocale().value})
const {data: items, refresh} = useFetch(
`some url`,
{
method: 'GET',
params: {
lang: lang,
limit: 25000
},
headers: { 'Content-Type': 'application/json' },
key: "items",
server: false,
lazy: true,
immediate: false,
deep: false,
transform(raw_items:Item[]) {
console.log({step: 'transform', data: raw_items})
return new Map(
raw_items.map(raw_item => {
return [raw_item.id, raw_item];
}),)
},
getCachedData(key) {
if (localStorage.hasOwnProperty(key)) {
const buffer = JSON.parse(localStorage.getItem(key))
console.log({step: 'buffer', data: buffer})
return buffer
}
},
onResponse({ request, response, options }) {
console.log({step: 'resp', data: response._data})
localStorage.setItem('items', JSON.stringify(response._data))
return response._data
},
},
)
async function clear_cache() {
localStorage.removeItem('items')
await refresh()
}
onHydrated(async () => {
await refresh();
})
return {items, clear_cache}
})
if (import.meta.hot) {
import.meta.hot.accept(acceptHMRUpdate(useItemStore, import.meta.hot))
}
export const useItemStore = defineStore('items', () => {
const lang = computed(() => {return useCookieLocale().value})
const {data: items, refresh} = useFetch(
`some url`,
{
method: 'GET',
params: {
lang: lang,
limit: 25000
},
headers: { 'Content-Type': 'application/json' },
key: "items",
server: false,
lazy: true,
immediate: false,
deep: false,
transform(raw_items:Item[]) {
console.log({step: 'transform', data: raw_items})
return new Map(
raw_items.map(raw_item => {
return [raw_item.id, raw_item];
}),)
},
getCachedData(key) {
if (localStorage.hasOwnProperty(key)) {
const buffer = JSON.parse(localStorage.getItem(key))
console.log({step: 'buffer', data: buffer})
return buffer
}
},
onResponse({ request, response, options }) {
console.log({step: 'resp', data: response._data})
localStorage.setItem('items', JSON.stringify(response._data))
return response._data
},
},
)
async function clear_cache() {
localStorage.removeItem('items')
await refresh()
}
onHydrated(async () => {
await refresh();
})
return {items, clear_cache}
})
if (import.meta.hot) {
import.meta.hot.accept(acceptHMRUpdate(useItemStore, import.meta.hot))
}
1 Reply
also why do I get this on nuxt.com ? xD
