Vue-query with <KeepAlive>

[Lovor01]

My component is a dynamic component inside , for producing reports for various farms. There are other similar components, hence dynamic component, but this one takes farm Id as prop and produces report from data read from server. Inside setup function, I have useQuery which has query key ['report', props.farmId]. Now, since it is inside KeepAlive, setup runs only once and useQuery does not react on props change.

Simplified code would be:

useQuery({
  queryKey: ['/report/list', props.farm_id],
  notifyOnChangeProps: () => props.farm_id,
  queryFn: async ({ queryKey: [endpoint, farm_id] } = {}) => {
    await $api.value.get(endpoint, { params: { farm_id } })
  }
})

How to make this useQuery reactive, so it switches to different query when farm Id changes?

[DamianOsipiuk]

The issue you have here is from accessing prop.farm_id in setup which breaks reactivity.
You can fix it either by

const { farm_id } = toRefs(props);
useQuery({
  queryKey: ['/report/list', farm_id],
  queryFn: async ({ queryKey: [endpoint, farmId] } = {}) => {
    await $api.value.get(endpoint, { params: { farm_id: farmId } })
  }
})

or

const farm_id = computed(() => props.farm_id );
useQuery({
  queryKey: ['/report/list', farm_id],
  queryFn: async ({ queryKey: [endpoint, farmId] } = {}) => {
    await $api.value.get(endpoint, { params: { farm_id: farmId } })
  }
})