Encountering an issue with the query key array not updating when the selected warehouse ID is changed. This causes useQuery to use outdated data instead of fetching new data for the updated warehouse ID. Struggling to figure out how to update the query key array upon selection change, seeking guidance on resolving this matter. Appreciate any assistance provided. Thank you!
import { useQuery } from '@tanstack/vue-query'
const fetchTotalSellers = async warehouseId => {
const res = await axios.get('/analytics/getTotalSellers', {
params: {
warehouseId,
},
})
return res.data
}
const userStore = useUserStore() // pinia store
const { data } = useQuery(
['analytics', userStore.selectedWarehouse],
() => fetchTotalSellers(userStore.selectedWarehouse),
{
refetchOnWindowFocus: false,
onSuccess: data => {
console.log('data', data)
},
},
)
// userStore.js
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => {
return {
info: null,
isLoggedIn: false,
warehouses: [],
selectedWarehouse: null,
}
},
getters: {
userInfo: state => {
return state.info
},
getSelectedWarehouse: state => {
return state.selectedWarehouse
},
getWarehouses: state => {
return state.warehouses
},
},
actions: {
setUser(user) {
this.info = user
this.isLoggedIn = true
},
setSelectedWarehouse(warehouseId) {
this.selectedWarehouse = warehouseId
localStorage.setItem('selected_warehouse', warehouseId)
},
logout() {
this.token = null
this.user = null
this.isLoggedIn = false
localStorage.removeItem('id_token')
},
},
})