useQuery returning old data with new params
I have a react component that takes in a date range and calculates a users net worth (sums up all assets) between that window. For some reason it is returning the previous drop downs data instead of the current one. I'm not sure if I have to use a queryKey to force a new fetch.
import React, { useState } from "react";
import type { DateRangePickerValue } from "@tremor/react";
import {
AreaChart,
DateRangePicker,
DateRangePickerItem,
Title,
} from "@tremor/react";
import { api } from "~/utils/api";
const NetWorthChart = () => {
const [value, setValue] = useState<DateRangePickerValue>({
from: new Date(2023, 1, 1),
to: new Date(),
});
const netWorthHistory = api.user.getUserNetWorthHistory.useQuery(
{
from: value.from,
to: value.to,
},
);
const valueFormatter = (number: number) =>
`$${Intl.NumberFormat("us").format(number).toString()}`;
if (netWorthHistory.isLoading) {
return <div>Loading...</div>;
}
if (!netWorthHistory.data) {
return <div>Something went wrong</div>;
}
return (
<div>
<Title>Net Worth</Title>
<DateRangePicker
className="mx-auto max-w-md"
value={value}
onValueChange={setValue}
selectPlaceholder="Select"
color="rose"
>
<DateRangePickerItem
key="1y"
value="1y"
from={new Date(2023, 0, 1)}
to={new Date()}
>
Past Year
</DateRangePickerItem>
<DateRangePickerItem
key="1d"
value="1d"
from={new Date(2023, 8, 3)}
to={new Date(2023, 8, 4)}
>
Past Day
</DateRangePickerItem>
</DateRangePicker>
<AreaChart
className="mt-4 h-72"
data={netWorthHistory.data}
index="date"
categories={["amount"]}
colors={["cyan", "cyan"]}
valueFormatter={valueFormatter}
/>
</div>
);
};
export default NetWorthChart;import React, { useState } from "react";
import type { DateRangePickerValue } from "@tremor/react";
import {
AreaChart,
DateRangePicker,
DateRangePickerItem,
Title,
} from "@tremor/react";
import { api } from "~/utils/api";
const NetWorthChart = () => {
const [value, setValue] = useState<DateRangePickerValue>({
from: new Date(2023, 1, 1),
to: new Date(),
});
const netWorthHistory = api.user.getUserNetWorthHistory.useQuery(
{
from: value.from,
to: value.to,
},
);
const valueFormatter = (number: number) =>
`$${Intl.NumberFormat("us").format(number).toString()}`;
if (netWorthHistory.isLoading) {
return <div>Loading...</div>;
}
if (!netWorthHistory.data) {
return <div>Something went wrong</div>;
}
return (
<div>
<Title>Net Worth</Title>
<DateRangePicker
className="mx-auto max-w-md"
value={value}
onValueChange={setValue}
selectPlaceholder="Select"
color="rose"
>
<DateRangePickerItem
key="1y"
value="1y"
from={new Date(2023, 0, 1)}
to={new Date()}
>
Past Year
</DateRangePickerItem>
<DateRangePickerItem
key="1d"
value="1d"
from={new Date(2023, 8, 3)}
to={new Date(2023, 8, 4)}
>
Past Day
</DateRangePickerItem>
</DateRangePicker>
<AreaChart
className="mt-4 h-72"
data={netWorthHistory.data}
index="date"
categories={["amount"]}
colors={["cyan", "cyan"]}
valueFormatter={valueFormatter}
/>
</div>
);
};
export default NetWorthChart;
