keepPreviousData doesn't work with useQueries

[david-roeger]

Describe the bug

Using keepPreviousData in useQueries always returns:

{
  data: undefined,
  status: "pending",
  isPlaceholderData: false
 ...
}

while the query-function is running.
This produces different results for using the same query.

(See the reproduction)

Your minimal, reproducible example

Reproduction

Steps to reproduce

1. use useQuery -> the previousData is kept

2. use useQueries and return the query-> the previousData is discarded

3. See the reproduction and increment the input

4. Both results hold different values

Expected behavior

I don't know if this is a limitation due to how useQueries or keepPreviousData works but I would expect the placeHolderData to be kept around. If that's not possible maybe this could be documented somewhere.

How often does this bug happen?

Every time

Screenshots or Videos

Platform

System:
    OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (2) x64 AMD EPYC
    Memory: 2.28 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/eslint-plugin-query: @latest => 5.20.1 
    @tanstack/react-query: @latest => 5.24.8 
    @tanstack/react-query-devtools: @latest => 5.25.0 
    @vitejs/plugin-react: ^2.0.0 => 2.2.0 
    react: ^18.0.0 => 18.2.0 
    react-dom: ^18.0.0 => 18.2.0 
    vite: ^3.0.0 => 3.2.8 

Tanstack Query adapter

react-query

TanStack Query version

v5.24.8

TypeScript version

No response

Additional context

No response

[TkDodo]

That's a known limitation:

https://tanstack.com/query/v5/docs/framework/react/reference/useQueries

The placeholderData option exists for useQueries as well, but it doesn't get information passed from previously rendered Queries like useQuery does, because the input to useQueries can be a different number of Queries on each render.

It's very hard to know what the "previous" query was in a dynamic list of queries. We tried to be smart and figure out which queries belong together, or only do it if the length didn't change, but even then, you could've swapped things around in the array, and keeping previous data would yield wrong results.

If you think it should be better documented that this doesn't work, please open a PR to the docs.

[knilink]

came across with the same issue
could we introduce an item identifier? like the key prop when dealing with array of elements in react.
@TkDodo