bug: Infinite loop when using useQuery or useSuspenseQuery

[ayoubphy]

Provide environment information

System:
OS: Windows 11 10.0.22000
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Memory: 7.71 GB / 15.89 GB
Binaries:
Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
npm: 10.5.1 - C:\Program Files\nodejs\npm.CMD
pnpm: 8.14.0 - ~\AppData\Roaming\npm\pnpm.CMD
bun: 1.1.3 - ~.bun\bin\bun.EXE

Describe the bug

useQuery keeps infinitely refetching. There was a previous bug report #1771 and a fix was merged in #1772 but it doesn't seem to have fixed the issue.

Reproduction repo

N/A

To reproduce

call trpc.route.procedure.useQuery() or trpc.route.procedure.useSuspenseQuery() inside a page.tsx

Additional information

No response

[saulflores95]

@ayoubphy I am having a very similar issue

So here is my example

import { api } from "~/trpc/react";
import * as React from "react";

const Reciepts = () => {
  const [startDate, setStartDate] = useState <Date> new Date();

  const {
    data: receipts,
    refetch,
    isLoading,
  } = api.recipiets.getAllByRange.useQuery({
    startDate: startDate,
  });

  return (
    <>
      <Calendar
        mode="single"
        selected={startDate}
        onSelect={(date) => {
          if (date) {
            setStartDate(date);
          }
        }}
      />
    </>
  );
};

export default Receipts

In this example the moment the user changes the date this causes an infinte looop causing the browser to crash.