Getting data from useQueries

[Gants102]

Hello,

Am a little stuck and hoping someone will be able to help. I have a function that calls getBaseData where the arguments change based on a selected item (producer), which gives different fetch urls. I have things set up as follows but cant see a way of accessing the data from the useQueries call.

let prodId = ref(1)
let query = []

const getProducts = function(p){
      prodId = p
     query.push({
      queryKey: ['product', prodId],
      queryFn: getBaseData("product", "id, product_name, product_description, abv, product_style", [["eq", "producer", prodId]]),
    })
    return query
}

watch(
  () => productEntry.producer,
  (producer)=>{
    if(producer){
      getProducts(producer)
      let prodData = useQueries({queries: query})
    } 
  })

At the moment an array of queries appears in the component dev tools but only shows an array of objects containing the queryKey and queryFn properties but no data from the calls. In the vue query dev tools its showing the data I want against each queryKey that gets generated by the call. Is there a way to access the data through the queryKey? Is this expected behaviour or have I gone about it in the wrong way?

[DamianOsipiuk]

I would just use useQuery.
When queryKey changes, underlying observer automatically switches to observe new query in the cache, or the old one if it exists in the cache already.
You just need to provide a ref to your query key and change that. It will be automatically observed.
Let me know if that makes sense or you need more information.

Btw. Do not use component based devtools or useQueryProvider, use VueQueryPlugin only.

[Gants102]

Hello,
Thanks for this. I had tried useQuery originally but couldn't get it to work. I've revisited this but it's still not working I think because I am using Nuxt 3 and need to use suspense? If that's the case I think I need to use useQueries as a result? I've modified my code below but am still having problems:

const prodID= ref(1)

const enabled = computed(() => {
  return prodID.value ? true : false
})

function selectedData(item) { 
  prodID.value = Number(item.id);
}

async function getBaseData(table, columns, filters) {
    const {data, error} = await useFetch("/api/getSupabase", {
      method: "POST",
      body: {
        table: table,
        columns: columns,
        filters: filters,
      },
        initialCache: false,
    });
    return { data, error }
}

const query = [
  { queryKey: ["producer"],
    queryFn: ()=> getBaseData("producer", "id, name"),
    suspense: true
    },
  { queryKey: ['product', prodID.value],
    queryFn: () => getBaseData("product", "id, product_name, product_description, abv, product_style", 
                    [["eq", "producer", prodID.value]]),
    suspense: true,
    enabled
  },
  
]
const data = useQueries({queries: query})

I get the data for both queries showing in the dev tools but the product query never updates its prodID.value and weirdly on refresh will load data from the first producer query. Any help would be greatly appreciated.

[Gants102]

Ah I seem to have solved it a bit more by replacing the useFetch call with a simple fetch request. The data seems to update as expected, only trouble I am having now is the data only refreshes on a refocus of the window rather than the ref(prodID) changing, I'll have another read of the docs and see if I can get a better idea of how to solve the issue. Thanks again for your help :-)