T
TanStack•3y ago
initial-rose

exhaustive-deps with a ref

I've read a couple threads here and on GitHub but couldn't find a clear answer. Is the lint rule correct and should I add articleUuid?.value to the queryKey array, or is the lint rule wrong? 
import { useQuery } from "@tanstack/vue-query";
import { computed, Ref } from "vue";

export const useArticleQuery = (articleUuid?: Ref<string | undefined>) => {
  const enabled = computed(() => !!articleUuid?.value?.length);
  return useQuery({
    queryKey: ["api-article", articleUuid], // "The following dependencies are missing in your queryKey: articleUuid?.value" eslint@tanstack/query/exhaustive-deps
    queryFn: () => Promise.resolve(`/api/articles/${articleUuid?.value}`),
    enabled,
  });
};
import { useQuery } from "@tanstack/vue-query";
import { computed, Ref } from "vue";

export const useArticleQuery = (articleUuid?: Ref<string | undefined>) => {
  const enabled = computed(() => !!articleUuid?.value?.length);
  return useQuery({
    queryKey: ["api-article", articleUuid], // "The following dependencies are missing in your queryKey: articleUuid?.value" eslint@tanstack/query/exhaustive-deps
    queryFn: () => Promise.resolve(`/api/articles/${articleUuid?.value}`),
    enabled,
  });
};
2 Replies
fascinating-indigo
fascinating-indigo•3y ago
Hi, Lint rule is wrong as it was created and tested for React. Vue version would need modification as we want to pass whole ref proxy instead of a value.
initial-rose
initial-roseOP•3y ago
Thanks!

Did you find this page helpful?