bug: Sending Date from client triggers infinite loop

[iamnafets]

Provide environment information

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @tanstack/react-query: ^5.67.1 => 5.71.1 
    @trpc/client: npm:@trpc/client => 11.0.1 
    @trpc/next: npm:@trpc/next => 11.0.1 
    @trpc/react-query: npm:@trpc/react-query => 11.0.1 
    @trpc/server: npm:@trpc/server => 11.0.1 
    next: ^15.1.7 => 15.2.4 
    react: ^19.0.0 => 19.1.0 
    typescript: ^5.8.2 => 5.8.2 

https://stackblitz.com/edit/trpc-trpc-178aabk8?file=src%2Fpages%2Findex.tsx

Describe the bug

If you have superjson and pass a z.date() as input to a query, it triggers an infinite loop in the client where the query is constantly pending and refetching.

I've changed the sample project with 1 change: instead of passing name (a z.string()) I pass startDate (a z.date()).

See the console in the reproduction.

Link to reproduction

https://stackblitz.com/edit/trpc-trpc-178aabk8?file=src%2Fpages%2Findex.tsx

To reproduce

See stackblitz.

Additional information

Unclear what's causing the issue but if you give me some hypothesis/pointers I may be able to submit a patch.

👨‍👧‍👦 Contributing

• [x] 🙋‍♂️ Yes, I'd be down to file a PR fixing this bug!

[juliusmarminge]

Related: https://github.com/trpc/trpc/issues/5657

[iamnafets]

Hm, this seems like the superjson adapter is making a false promise. You can use it, but if you use any of the types that it allows then react query will be broken under the covers. @KATT I understand this is invasive but it seems like adapters are just plain broken here.

[juliusmarminge]

They work perfectly fine for output, eg returning Date from your procedure works as you expect.

I get that it's sort of a hidden footgun when using it as input though. Not sure what the repercussions would be to run the transformer when generating the queryKey, other than performance?

[Nick-Lucas]

I was going to suggest that the correct form is this to stabilise the reference (it's a react-query behaviour that when the input changes the request happens again) but it seems to also be some SSR behaviour mixed in because useState is also getting recreated in an infinite loop

  const [date] = useState(() => new Date());

  // 💡 Tip: CMD+Click (or CTRL+Click) on `greeting` to go to the server definition
  const result = trpc.greeting.useQuery({ startDate: date });

https://stackblitz.com/edit/trpc-trpc-3eksecr3?file=src%2Fpages%2Findex.tsx

In any case I'm not sure this is related to tRPC, it's either tanstack or nextjs behaviour

[github-actions[bot]]

This issue has been locked because we are very unlikely to see comments on closed issues. If you are running into a similar issue, please create a new issue. Thank you.