TanStackT
TanStack•2y ago•
5 replies
gothic-amber

Vue 3 setup API Tanstack Query with params not refetching data

Hi everyone could anyone help me with Vue3 Tanstack Query usage I've went through the docs and tried applying data refetch on parameter change but for some reason the api call is not being triggered... Any ideas?

<script lang="ts" setup>
import { fetchEnergyData } from "@/queries/useEnergyQuery";
import { useQuery } from "@tanstack/vue-query";
import { ref } 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 { data, isLoading, isError } = useQuery({
  queryKey: ["energyData", date.value.start, date.value.end],
  queryFn: () =>
    fetchEnergyData(
      getDateString(date.value.start),
      getDateString(date.value.end),
    ),
});
</script>
Was this page helpful?