Matching of reactive keys not working

[andresespinosapc]

I will give an example to show my issue. I have a query key like this: reactive(['products', 'show', productId]), where productId is a Ref. If I use setQueryData with this key, the change is not reflected in a query that uses exactly the same key. I know the problem is the ref because if I use this key instead it works: reactive(['products', 'show', productId.value]).

[DamianOsipiuk]

Hi, you are correct, but this is a problem with how Vue reactivity works.
Quote from https://v3.vuejs.org/guide/reactivity-fundamentals.html#access-in-reactive-objects

Ref unwrapping only happens when nested inside a reactive Object. There is no unwrapping performed when the ref is accessed from an Array or a native collection type like Map

Therefore you need to manually unwrap refs, when accessing query client directly, not via vue-query hooks.
Another solution is to pass ref inside an object, not directly in the array.
reactive(['products', 'show', {productId}])

[aantipov]

As I see it, the problem is:

• useQuery and other hooks are aware of Vue and they unwrap all the refs in the provided options
• setQueryData is not aware of Vue and doesn't do any refs unwrapping in the provided keys.

I believe it's a point of confusion and, going forward, such issues will pop up more frequently.

I think we need to create a wrapper around QueryClient and make sure the key and other options are consistently unwrapped. It would give better developer experience.

@DamianOsipiuk what do you think?

[DamianOsipiuk]

@aantipov If we would create a wrapper for QueryClient we should create a wrapper for QueryCache and MutationCache. Not to mention react-query persistor plugins and all other hooks that we have.

Nevertheless i think it is a valid concern and we could create a single utility to deepUnref an object/array and use it everywhere.

[henribru]

To reduce the amount of stuff you need to wrap, maybe you could suggest to the react-query guys that they add an option for a custom query key serializer?

[aantipov]

@henribru that's an interesting idea 💡
I see that React Query does have such an option https://react-query.tanstack.com/reference/useQuery

[DamianOsipiuk]

I think that this hash function is only relevant for hooks, and it can also be set in provider via queryClient.setDefaultOptions.

But it will not work on other functions that uses queryKey like queryClient.invalidateQueries or queryClient.getQueriesData.
They are using partial matching and therefore require non-stringified version of the query key (Relevant piece of code).

Also besides unwrapping queryKey we would need to unwrap options objects as well to streamline the experience if we are going this way.

So either:

• we create wrappers and deepUnref everything everywhere
• we put in the documentation that when working with QueryClient QuerueryCache etc. user has to unwrap parameters by himself (maybe using our deepUnref utility). Only hooks deal with unwrapping automatically.

Personally i would go with option 2. This would be much easier to maintain, as we would not have to track changes in the core and only care about properly working hooks.
Unless there is very high demand for option 1.

Edit: When i thought about it more creating wrappers seems like the way to go.