[solid-query v5]: placeholderData returns wrong values when returned data is an array

[skokenes]

Describe the bug

In solid-query v5, if you use placeholderData: keepPreviousData with a query that returns arrays, the cacheing breaks and returns the wrong results when returning to previously fetched queries.

See the demonstration in the attached video and codesandbox. In the codesandbox, the returned result should always match with the search property. This works fine when NOT using placeholderData. However, with placeholderData on, the query.data values seem to get out of sync with the latest query key.

Your minimal, reproducible example

https://codesandbox.io/s/solid-query-placeholder-broken-392lsq?file=/index.js

Steps to reproduce

1. Type in "a". Notice that the correct result gets returned
2. Type in "ac". Notice that correct result gets returned
3. Delete "c" to return to "a", which should be cached. Notice that the query returns the wrong data

Expected behavior

When using placeholderData, the query cache should return the same values as if you weren't using placeholderData.

How often does this bug happen?

Every time

Screenshots or Videos

solid-query-placeholder-bug.mp4

Platform

OSX, Chrome

Tanstack Query adapter

None

TanStack Query version

v5 beta 23

TypeScript version

No response

Additional context

No response

[TkDodo]

Again, I can confirm that this works in react:

https://codesandbox.io/p/sandbox/peaceful-fire-4m3s9z

placeholderData is an observer level feature, which is part of the query-core, so I wouldn't expect any differences in solid. Are you sure this isn't another false-positive like the other issue?

[skokenes]

Are you sure this isn't another false-positive like the other issue?

I am fairly certain, I've updated the codesandbox to show side by side how placeholderData works properly if the return is a primitive like a string, but returns the wrong values if returning an object or array:

solid-query-placeholder-bug-2.mp4

Happy to be wrong here, but it's not obvious to me here how I might be using the library wrong with Solid. I discovered this bug in an app after migrating from solid-query v4 to v5. In v4, I had API calls that returned arrays and were using the keepPreviousData flag with no issues. Moving to v5 + the placeholderData method has broken my UX in the way shown in the video above. I did not change anything else about how I am using Solid with tanstack query.

[TkDodo]

@ardeora fyi

[skokenes]

I think I found a possible source of the problem and a user land workaround.

I suspect the problem is how Solid returns the arrays and objects as a store, which is a proxy object for the underlying data.
If I use a custom keepPreviousData function that deep clones the object, removing the proxy and all symbols:

placeholderData: (prevData) => {
  return structuredClone(prevData);
}

Then the cacheing now works as expected.

See this forked sandbox where I add this method for the object example and it fixes it: https://codesandbox.io/s/solid-query-placeholder-broken-forked-dp6s5w?file=/index.js

[ardeora]

Thanks for the reproduction. Yeah this is a bug that I'm taking a look at today. But PRs are welcome too! 😄

[AlexErrant]

FYI solid has unwrap to deproxify stores.

[ardeora]

Should be fixed in the new versions and up! v5.0.0-rc.8
If you could please update your dependency and check if it works as expected, that would be awesome :D

I was unable to fork your sandbox but this is the package.json for the reproduction you posted in the issue. I was able to confirm that this has now been fixed

{
  "name": "solid-query-placeholder-broken",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "start": "parcel index.html --open",
    "build": "parcel build index.html"
  },
  "dependencies": {
    "@tanstack/solid-query": "5.0.0-rc.8",
    "babel-preset-solid": "latest",
    "solid-js": "latest"
  },
  "devDependencies": {
    "@babel/core": "7.2.0",
    "parcel-bundler": "^1.6.1"
  },
  "keywords": []
}