T
TanStack•3y ago
grumpy-cyan

component with query and table gets stuck indefinitely

I have the following code: 
"use client"
export default function TimesheetTable() {
  const [selectedWeek, setSelectedWeek] = useState<number>(0);

  const timesheet = trpc.employees.getTimesheet.useQuery({
    start: DateTime.now()
      .plus({ weeks: selectedWeek })
      .startOf("week")
      .toISO()!,
    end: DateTime.now().plus({ weeks: selectedWeek }).endOf("week").toISO()!,
  });

  const table = useReactTable({
    data: timesheet?.data ?? [],
    columns: TimesheetColumns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <div>
      <div>
        <button
          onClick={() => setSelectedWeek((prev) => prev - 1)}
        >
          Previous
        </button>
        <h2>{formattedWeekText()}</h2>
        <button
          onClick={() => setSelectedWeek((prev) => prev + 1)}
        >
          Next
        </button>
      </div>
      {/* This pre elemnet is just for debugging */}
      <pre>{JSON.stringify(timesheet.data, null, 2)}</pre>
      {/* Table component goes here */}
    </div>
  );
}
"use client"
export default function TimesheetTable() {
  const [selectedWeek, setSelectedWeek] = useState<number>(0);

  const timesheet = trpc.employees.getTimesheet.useQuery({
    start: DateTime.now()
      .plus({ weeks: selectedWeek })
      .startOf("week")
      .toISO()!,
    end: DateTime.now().plus({ weeks: selectedWeek }).endOf("week").toISO()!,
  });

  const table = useReactTable({
    data: timesheet?.data ?? [],
    columns: TimesheetColumns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <div>
      <div>
        <button
          onClick={() => setSelectedWeek((prev) => prev - 1)}
        >
          Previous
        </button>
        <h2>{formattedWeekText()}</h2>
        <button
          onClick={() => setSelectedWeek((prev) => prev + 1)}
        >
          Next
        </button>
      </div>
      {/* This pre elemnet is just for debugging */}
      <pre>{JSON.stringify(timesheet.data, null, 2)}</pre>
      {/* Table component goes here */}
    </div>
  );
}
When I increment or decrement the week, the whole app gets completely stuck. I see absolutely no errors either in the browser or the server logs. I removed the table component and replaced it with the raw Json of the result and in that case, the week increments and the query automatically refetches as expected. It is very likely that I am doing something incorrectly but I am not sure what.
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?