QueryFn did not change when queryKeys include object

[rickvian]

Hi @TkDodo
i wanna ask your advice regarding my architecture setup and useQuery usage

react-query 3.6.0

Currently in my app, i need to feature toggle between API and graphQL depending on feature flag value in the app

My API and GraphQL functions are dependency-injected via RepositoryProvider,
it will toggle depending on featureFlag value

useQuery seems to only update if the queryKeys update (regardless if the queryFn passed is updated)

but my case, when i passed repository Object into queryKeys array, it recognized as {} , so toggling between API and GraphQL won't trigger useQuery update,
so even the feature flag value is updated, queryFn stays to be function initially passed

do you have advice on this?

Sandbox Reproduction:
https://codesandbox.io/p/sandbox/react-typescript-forked-5fkmkw?file=%2Fsrc%2FApp.tsx

[TkDodo]

sorry, I won't be looking into v3 because it's very old, but what I can say is that everything in the queryKey has to be json serializable. If you put something in there that's not, it won't work unless you provide your own queryKeyHashFn.

As far as I can see, you try to put a function into the query key, and that certainly won't work.

[rickvian]

ok, would be there a solution in v4 or v5?
or i won't able to trigger dependency update in useQuery by depending on the passed function alone? (since its not json serializeable)

the only workaround i can think of is to manually embedding unique value (string or etc) along with the functions being passed, thats the only way to trigger difference on the queryKeys

[TkDodo]

the issue is the same in all versions: the key is not serializable. don't put functions in the key, and if you must, provide a queryKeyHashFn that can serialize it to something unique.