Vue 3 中的参数化数据获取：使用 Tanstack Query 的最佳实践

Vue 3 Tanstack Query：掌握参数化数据获取的技巧

简介

在 Vue 3 中使用 Tanstack Query 进行数据获取时，使用参数可能会导致 API 调用无法触发。为了解决此问题，本文将深入探讨如何确保在参数更改时重新获取数据。

依赖项数组

在 useQuery 函数中，将依赖项数组指定为查询键的第二个参数。当依赖项中的任何值发生更改时，将触发重新获取。例如：

const { data, isLoading, isError } = useQuery({
  queryKey: ["energyData", date.value.start, date.value.end],
  queryFn: () =>
    fetchEnergyData(
      getDateString(date.value.start),
      getDateString(date.value.end),
    ),
  deps: [date.value], // 依赖项数组
});

监听依赖项

使用 watch 函数来监听依赖项数组中的值的变化。当值更改时，执行查询。

watch(
  () => date.value,
  () => {
    // 当date.value更改时执行查询
    queryClient.invalidateQueries("energyData");
  }
);

手动触发查询

还可以使用 queryClient 手动触发查询。

queryClient.invalidateQueries("energyData");

排除空值

确保在构建查询键时排除空值。否则，查询将永远不会触发。

改进后的代码

<script lang="ts" setup>
import { fetchEnergyData } from "@/queries/useEnergyQuery";
import { useQuery } from "@tanstack/vue-query";
import { ref, watch } from "vue";

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 queryClient = useQueryClient();

watch(
  () => date.value,
  () => {
    // 当date.value更改时执行查询
    queryClient.invalidateQueries("energyData");
  }
);

const { data, isLoading, isError } = useQuery({
  queryKey: ["energyData", date.value.start, date.value.end],
  queryFn: () =>
    fetchEnergyData(
      getDateString(date.value.start),
      getDateString(date.value.end),
    ),
  deps: [date.value], // 依赖项数组
});
</script>

结论

通过遵循这些步骤，你可以确保在使用参数时正确获取数据。记住，在 Vue 3 中使用 Tanstack Query 进行参数化数据获取时，依赖项数组、依赖项监听和排除空值是至关重要的。

常见问题解答

1. 为什么在使用参数时 API 调用无法触发？

   • 因为 Tanstack Query 需要明确的依赖项数组才能在参数更改时触发重新获取。

2. 如何监听依赖项数组中的值的变化？

   • 使用 watch 函数来监听依赖项数组中的值，并在它们更改时重新获取数据。

3. 手动触发查询有什么好处？

   • 当你需要在特定事件或操作后立即触发查询时，手动触发查询非常有用。

4. 为什么排除空值很重要？

   • 包含空值会阻止查询键匹配，从而无法触发重新获取。

5. 如何处理更复杂的参数化数据获取场景？

   • 对于更复杂的情况，可以使用 useQueryClient 和 setQueryData 来手动管理缓存状态。