uzelac•11mo ago

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;

0 Replies

No replies yetBe the first to reply to this messageJoin