How can we use a computed property in the query key (e.g. page number)?

The react-query docs describe how to use a compound query key (Array Keys). I want to be able to do something similar with vue-query, but I’ve struggled to make it work.

💡 Proposed Vue 3 Composition API Example:

export default defineComponent({
  // ...
  setup: (props) => {
    const queryKey = `widgets:${props.query}`;
    const page = ref(0);
    const { data: widgets, isFetching: fetching } = useQuery<Widget[]>(
      reactive([queryKey, computed(() => page.value)],
      () =>
        getWidgets({
          p: page.value,
          q: props.query,
        })
    )
})

… but that doesn’t work as-is. Changing the page value does not trigger a re-query. The computed does’t appear to do anything; and otherwise I need to explicitly trigger an invalidation (e.g. queryClient.invalidateQueries([queryKey, 0]);).

Is there some other method I’m missing for how to use a reactive value in the QueryKey?

[DamianOsipiuk]

@andresespinosapc Unfortunately Vue reactivity cannot unwrap a ref directly in the array as mentioned in official Vue docs: https://v3.vuejs.org/guide/reactivity-fundamentals.html#access-in-reactive-objects

Ref unwrapping only happens when nested inside a reactive Object. There is no unwrapping performed when the ref is accessed from an Array or a native collection type like Map

Second relevant piece of information is that Vue cannot track plain object changes, and uses ES6 proxies for that. If you unwrap it by yourself, Vue will loose abili to track changes for it. https://v3.vuejs.org/guide/reactivity.html#how-vue-tracks-these-changes

I think you should be able to use computed the same way as ref. So inside an object of reactive array.

[DamianOsipiuk]

Hi @bikegriffith, Reactivity in Vue is… very hard to nail down. It has some quirks that you have to be aware of.

You almost nailed it down. If you take a look at the third code block from the Readme, you will notice that ref is passed to the object, not directly to the query key array.

So in your case, something like this should work:

export default defineComponent({
  // ...
  setup: (props) => {
    const queryKey = `widgets:${props.query}`;
    const page = ref(0);
    const { data: widgets, isFetching: fetching } = useQuery<Widget[]>(
      reactive([queryKey, {page}]),
      () =>
        getWidgets({
          p: page.value,
          q: props.query,
        })
    )
})

Let me know if that works for you.