useQuery and useInfiniteQuery's return data gets mixed up

[ArnaudWeyts]

Describe the bug
When sending identical queries to useQuery and useInfiniteQuery, te returned data structures get mixed up (I'm assuming because of the cache resolution).

To Reproduce
Steps to reproduce the behavior:

1. Navigate to this example sandbox https://codesandbox.io/s/nervous-wiles-jupgd?file=/src/App.js
2. You'll notice the data structure returned for the useInfiniteQuery is indeed an array (according to the docs)
3. Click the "Enable first request" button (this triggers a component render that uses the regular useQuery)
4. The data structure returned by useInfiniteQuery also changes to what was returned using useQuery (not an array)

Expected behavior

The return value of both queries should consistently be the data for useQuery or an array of data for useInfiniteQuery according to the documentation here https://react-query.tanstack.com/docs/guides/infinite-queries

I also noticed the docs https://react-query.tanstack.com/docs/api#useinfinitequery don't mention that the useInfiniteQuery returned data is an array.

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome
• Version: 86.0.4240.111

Additional context

We discovered this issue in production, it was pretty hard to reproduce as it required a specific flow of requests to happen. I think what we'll do for now is disable the caching on these specific queries until the bug is resolved.

Thanks for your work on this great library!

[TkDodo]

The return value of both queries should consistently be the data for useQuery or an array of data for useInfiniteQuery

My mental model of react-query is the following: the react query cache is just an object, and the serialized query key is the key of that object. When you fetch data from the backend, you put data into that cache and then just retrieve it via useQuery with a lookup. React-query will refetch and update that cache.

useQuery and useInfiniteQuery have different underlying data structures, so by using the same key, you are overriding the data. This is not a good idea - It’s like calling queryCache.setQueryData() and putting data of different structure into your cache.

My proposed solution would be:

• use a different query key for both instances
• if you want to “keep” / “transfer” data from one key to the other, use the initialData function to fill the cache with data - but you have to transform it to the correct structure first.

[MohammedFaragallah]

same issue

fixed for now by adding a single unique key to all useInfiniteQuery keys

- [endpoint, query]
+ ['Infinite', endpoint, query]

[flybayer]

I'm doing the same as @MohammedFaragallah. This was definitely not intuitive and caused a bug in blitz earlier. However, I'm not sure there's a good "fix".

At a minimum, something that'd greatly help is if react-query can throw an error if it sees you are using both useQuery and useInfiniteQuery with the same query key.

[tannerlinsley]

At a minimum, something that'd greatly help is if react-query can throw an error if it sees you are using both useQuery and useInfiniteQuery with the same query key.

I like this idea.

[tannerlinsley]

A PR to implement this warning is welcome :)