Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Jungzl opened this issue Sep 24, 2024 · 0 comments

Comments

@Jungzl
Copy link
Contributor

Jungzl commented Sep 24, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant