bug: Update to Set (with superjson) not triggering query

[BrendanC23]

Provide environment information

System:
    OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (2) x64 AMD EPYC
    Memory: 1.72 GB / 4.01 GB
    Container: Yes
    Shell: Unknown
  Binaries:
    Node: 20.9.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.8.1 - /usr/local/bin/npm
    pnpm: 8.10.2 - /usr/local/share/npm-global/bin/pnpm
  npmPackages:
    @tanstack/react-query: ^4.33.0 => 4.36.1 
    @trpc/client: ^10.38.0 => 10.45.0 
    @trpc/next: ^10.38.0 => 10.45.0 
    @trpc/react-query: ^10.8.1 => 10.45.0 
    @trpc/server: ^10.8.1 => 10.45.0 
    next: 13.4.19 => 13.4.19 
    react: 18.2.0 => 18.2.0 

Describe the bug

I have a TRPC query like the following

  getSetSize: publicProcedure
    .input(
      z.object({
        data: z.set(z.string()),
      }),
    )
    .query(({ input }) => {
      return {
        data: input.data.size,
      };
    }),

This is called from React with

const [data, setData] = useState(new Set(["1"]));
const setSizeQuery = api.example.getSetSize.useQuery({ data });

When the data is updated, the TRPC query is not re-run. If I use an array instead of a set, it works fine.
I am calling setData() with an entirely new object, not mutating an existing object. So the reference is different and React is re-rendering. See the sandbox below.

Link to reproduction

https://codesandbox.io/p/devbox/great-leftpad-g69tdw

To reproduce

Click the "Add to Set" button. An element will be added to the Set and the size of the local set in React will be updated. However, the size returned by TRPC will not be updated, because the query was not re-run.

When "Add to Array" is clicked, both the local React length and the length returned from TRPC are properly updated.

The console logs reflect this. Clicking "Add to Set" multiple times will not log that the server query is being run. Clicking "Add to Array" will result in a log for each button click.

Additional information

No response

👨‍👧‍👦 Contributing

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

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

[KATT]

If this is a bug, it's with 95% probability a bug in https://github.com/TanStack/query and not tRPC

[juliusmarminge]

Sandbox with raw RQ: https://stackblitz.com/edit/github-wgxcnf?file=src%2Findex.jsx

The first one represents the flow tRPC would work. We don't serialize the input before using is as a query key, so the query doesn't update.

We could "fix" this in trpc by transforming input before using is as a query key, although I'm not sure how wise that is 🤔

CleanShot.2024-04-25.at.11.01.12.mp4

[KATT]

Yeah, this is most likely an issue in RQ's getQueryKey, but we shouldn't fix it in tRPC.

@BrendanC23 could you open an issue at https://github.com/TanStack/query using @juliusmarminge' sandbox above?

[BrendanC23]

I created this React Query issue. They will not fix it on their end.

we only support json serializable values in the key. If you need something more, you can provide your own queryKeyHashFn and use something like superjson to serialize Sets.

[KATT]

Yeahhhhh..... I don't think we'll do this.

There are a lot of places we depend on the query hash being whatever RQ produces so I think it'll be quite hairy to make this work.

I'd advise you not to use Sets as an input argument. Personally, I only use JSON-serializable values as it maps better to React and <form>s etc, and if something needs to be a complex type, i use .transform(() => on code zod schema

[KATT]

You're free to make a PR to implement, but we'd have to update

• utils proxy
• any SSR fetcher
• all of useQuery/ useInfiniteQuery / [...]

Not sure if it's worth the squeeze, we've had 3 years of no one reporting an issue related to this so it feels like an edge-case and I'd like us to just piggy-back on RQ's hash fn that works great for the 99% use-case

AFAIK, you can still pass the hashQueryFn in tRPC as well as we just forward the options from RQ

[github-actions]

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.