Update @tanstack/query/exhaustive-deps eslint-rule to throw if a reactive-variable is unwrapped in the queryKey by using ".value"

[mrcwbr]

we had a bug using the latest version of @tanstack/vue-query in our vue 3 application.

const options = [1, 2, 3, 4, 5];
const selectedOption = ref(options[0]);

const { data } = useQuery({
  queryKey: ['todos', selectedOption.value], // isn't refreshed if selectedOption changes
  // correct usage would be: queryKey: ['todos', selectedOption], 
  queryFn: async () => {
    const res = await fetch(
      `https://dummyjson.com/todos/${selectedOption.value}`,
    );
    return res.json();
  },
});

would it be possible to handle this via @tanstack/eslint-plugin-query if you kill the reactivity using .value in the queryKey?

Obviously it totally makes sense why the refetch is not working, but this could be a common mistake if you're not familiar using TanStack query. There is also a section in the documentation, but from my point of view it's pretty hidden: https://tanstack.com/query/latest/docs/framework/vue/guides/query-keys#if-your-query-function-depends-on-a-variable-include-it-in-your-query-key