quickest-silver

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

rising-crimson•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

optimistic-gold•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)
    },
  },
)

correct-apricot•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

rising-crimson•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.

Gaming

Programming

Query Key Array not Updating with key is changed

Did you find this page helpful?