search

TanStack / query

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.
https://tanstack.com/query
MIT License
40.09k stars 2.69k forks source link

Query not updating when Set used in query key #7336

Closed BrendanC23 closed 3 weeks ago

BrendanC23 commented 3 weeks ago

Describe the bug

I am trying to make a react-query call that involves using a set as a query key. However, updating the set (changing the reference passed in, not just adding an element to the set) does not cause the query to re-run.

/** @param {Set} set */
const useSetQuery = (set) => {
  return useQuery({
    queryKey: ['set-query', set],
    queryFn: () => {
      return Array.from(set.values());
    },
  });
};

See this TRPC issue for further discussion.

Your minimal, reproducible example

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

Steps to reproduce

  1. Click "Add Item"

This creates a copy of a set and adds a new element. The set is used as a query key, but changes to the set do not cause the query to trigger. The "React State" list updates with the new values, but the "RQ Data" list does not.

Expected behavior

The query should re-run when the button is clicked, and the data returned from react-query should contain the most up-to-date list of the set content.

How often does this bug happen?

Every time

Screenshots or Videos

https://github.com/TanStack/query/assets/4711227/72954e24-434e-46b2-84ea-4b46f6c0a6cd

Platform

Tanstack Query adapter

react-query

TanStack Query version

5.32.0

TypeScript version

No response

Additional context

No response

TkDodo commented 3 weeks ago

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.