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}
})
}
// /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}
})
}
1 Reply
yeah I started to convert this into a standard const with $fetch, just wondering why it would trigger on the server.
I'm sad because I wanted to use the same function in all stores (some can be prerendered and some can't/shouldn't)
Is there any advantages in keeping some check on nuxt.static.data ?