T
TanStack•3y ago
deep-jade

Query Key Array not Updating with key is changed

I'm running into an issue where my query key array isn't updating when I change a selected warehouse ID in a dropdown menu. As a result, useQuery is using old query data instead of fetching new data for the selected warehouse ID. I'm not sure how to update the query key array when the selected warehouse ID changes, and I was wondering if you could provide any guidance on how to resolve this issue? Thank you! I've attached a video to this message that explains the issue in more detail. 
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)
    },
  },
)
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)
    },
  },
)
4 Replies
eager-peach
eager-peach•3y ago
seems like userStore is reactive not ref so accessing its properties breaks reactivity. Either use computed to get selectedWarehouse or pass whole userStore to query key depending on use case
xenial-black
xenial-black•3y ago
use storeToRefs 
import { useQuery } from '@tanstack/vue-query'
import { storeToRefs } from 'pinia'

const fetchTotalSellers = async warehouseId => {
  const res = await axios.get('/analytics/getTotalSellers', {
    params: {
      warehouseId,
    },
  })
  return res.data
}

const userStore = useUserStore() // pinia store
const { selectedWarehouse } = storeToRefs(userStore)
const { data } = useQuery(
  ['analytics', selectedWarehouse],
  () => fetchTotalSellers(selectedWarehouse),
  {
    refetchOnWindowFocus: false,
    onSuccess: data => {
      console.log('data', data)
    },
  },
)
import { useQuery } from '@tanstack/vue-query'
import { storeToRefs } from 'pinia'

const fetchTotalSellers = async warehouseId => {
  const res = await axios.get('/analytics/getTotalSellers', {
    params: {
      warehouseId,
    },
  })
  return res.data
}

const userStore = useUserStore() // pinia store
const { selectedWarehouse } = storeToRefs(userStore)
const { data } = useQuery(
  ['analytics', selectedWarehouse],
  () => fetchTotalSellers(selectedWarehouse),
  {
    refetchOnWindowFocus: false,
    onSuccess: data => {
      console.log('data', data)
    },
  },
)
rival-black
rival-black•3y ago
Hey @Eduardo García Thank you for this, I just started playing around with Nuxt/vue and was running to this issue spent some time looking for this, perhaps this could be added to the docs when using pinia
eager-peach
eager-peach•3y ago
This isn't strictly pinia related. It's how Vue handles destructuring of reactive objects. The same thing will happen when you would access component props. And for the same reason vue-query by default returns refs instead of reactive.

Did you find this page helpful?