[vue-query]: @tanstack/query/exhaustive-deps rule can't recognize getter in queryKey

[Jungzl]

Describe the bug

<script setup lang="ts">
import { reactive } from 'vue';
import { useQuery } from '@tanstack/vue-query';

const obj = reactive<{ foo?: string }>({});

const query = useQuery({
  queryKey: ['demo', () => obj.foo],
  // queryKey: ['demo', () => obj.foo, obj.foo], <== no error, but redundant
  queryFn: () => fetch(`/mock/getSomething/${obj.foo}`),
  enable: () => !!obj.foo,
});
</script>

For codes like above, @tanstack/query/exhaustive-deps rule will throw an error:

The following dependencies are missing in your queryKey: obj.foo

Your minimal, reproducible example

https://stackblitz.com/edit/vitejs-vite-ucguwp?file=src%2FApp.vue

Steps to reproduce

1. pnpm run lint
2. see the error

Expected behavior

Is it possible to see getter as a dep in queryKey, or we can only wrap it in computed to escape this error?

<script setup lang="ts">
import { reactive } from 'vue';
import { useQuery } from '@tanstack/vue-query';

const obj = reactive<{ foo?: string }>({});

const foo = computed(() => obj.foo);

const query = useQuery({
  queryKey: ['demo', foo],
  queryFn: () => fetch(`/mock/getSomething/${foo.value}`),
  enable: () => !!foo.value,
});
</script>

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

Not related

Tanstack Query adapter

None

TanStack Query version

v5.57.1

TypeScript version

No response

Additional context

No response

[pawel-twardziak]

Hi @Jungzl
I've just raised a PR for this issue. If it is ok, should get merged soon I guess.