Vue3 Tanstack Query参数变更时未触发API请求的问题求助

你的问题核心在于queryKey没有响应式跟踪date ref的变化，导致参数更新时TanStack Query无法感知到查询条件已变，因此不会触发新的API请求。

问题原因 #

你当前的queryKey是在组件初始化时直接取了date.value.start和date.value.end的静态值：

queryKey: ["energyData", date.value.start, date.value.end],

当后续date ref的内容更新时，这个初始的queryKey不会自动更新，TanStack Query会认为这是同一个查询，自然不会重新发起请求。同时queryFn里虽然用了date.value，但因为queryKey没变化，也不会触发执行。

解决方案 #

将queryKey改为函数式返回，让它能响应date ref的变化；同时确保queryFn始终使用最新的date值：

<script lang="ts" setup>
import { fetchEnergyData } from "@/queries/useEnergyQuery";
import { useQuery } from "@tanstack/vue-query";
import { ref } from "vue";
// 需确保addDays函数已导入或实现，示例用date-fns的实现
import { addDays } from "date-fns";

type DateRange = {
  start: Date;
  end: Date;
};

const date = ref<DateRange>({
  start: new Date(2022, 0, 20),
  end: addDays(new Date(2022, 0, 20), 20),
});

const getDateString = (date: Date | undefined): string | undefined => {
  if (!date) return;

  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");

  // 修正模板字符串语法错误
  const formattedDate = `${year}-${month}-${day}`;
  return formattedDate;
};

const { data, isLoading, isError } = useQuery({
  // 用函数返回queryKey，响应date的变化
  queryKey: () => [
    "energyData",
    getDateString(date.value.start),
    getDateString(date.value.end)
  ],
  queryFn: () =>
    fetchEnergyData(
      getDateString(date.value.start),
      getDateString(date.value.end),
    ),
});
</script>

额外说明 #

• 用getDateString格式化后的字符串作为queryKey的一部分，比直接用Date对象更可靠——Date是引用类型，即使日期值相同，不同的Date实例会被认为是不同的queryKey，可能导致不必要的重复请求。
• 确认addDays函数已正确导入或自行实现，避免初始化时出现函数未定义的错误。

内容的提问来源于stack exchange，提问作者Floky99