what is the size limit of the cache

[AlonGvili]

when trying to setQueryData with 37mb json file == 441633 lines the app just crashed with an error to many properties to enumerate

[TkDodo]

Do you have a stacktrace? Try turning off structural sharing - it might be too large fir that.

[AlonGvili]

sp i update like you said but still the same issue, app crached with the same error RangeError: to many properties to enumerate

[TkDodo]

In which browser on which OS? What’s the stack trace? Do you have a codesandbox reproduction?

[AlonGvili]

browser: Microsoft Edge
Version 89.0.774.68 (Official build) (64-bit)

OS:

i can't create a codesandbox reproduction because we using React, React-Query as a "base language" in our platform, all the code execution and all the endpoints apis are using microsoft powershell language, so in my case i get the json data using this powershell command Find-Module | ConvetTo-Json the output will be a +-35mb json file with +-441,633 lines of json after i get the data back from powershell i just do setQueryData(/endpoint/${endpoint?.id}/output, data)

to make things simple ( i hope )

this is the flow

UI => React.js
user write some powershell code in a monaco-editor component and click on the run button =>
then using axios we make post request to a asp.net core controller =>
the controller take the request and forward it to powershell =>
powershell engine run =>
the result convert to json and pull back =>
using this axios code
this code is in a web worker

return axios.get(url, {
        transformResponse: (res) => {
            // Do your own parsing here if needed ie JSON.parse(res);
            return res;
        },
    })

then the web worker using this command this.postMessage(the json data)
send the json data back to the component that requested it in this component i do
setQueryData(/endpoint/${endpoint?.id}/output, data)
then i used another monaco-editor to display the data.
monaco-editor using a property named value to get the data to display,
in this property i do getQueryData(/endpoint/${endpoint?.id}/output)

after the step setQueryData the app crashed if i have the devtools mounted if i don't have the devtools the app won't crashed.

i hope it was clear.

if you want a copy of the data you can download from https://github.com/PowerShell/PowerShell/releases/tag/v7.1.3
and after starting the shell/terminal you can run Find-Module | ConvertTo-Json and you will see all the return data,
if you want to save it to a file run this Find-Module | ConvertTo-Json | out-file -path <file path you wanna save>.json

[TkDodo]

So copy the 35mb json into codesandbox and read that for the api call 🤷‍♂️

[AlonGvili]

So copy the 35mb json into codesandbox and read that for the api call 🤷‍♂️

just try to do that they have a limit of 5mb for free account and 30mb for pro so i can't do that i will try to find a nother way to get the data into codesandbox

[AlonGvili]

https://codesandbox.io/s/react-query-devtools-crash-zcok0?file=/src/index.js
click on the get data button when the devtools are open you will see the error,
if the devtools are close and i click the button it won't crash but when i open the devtools after, it won't display any entry just an empty window

[TkDodo]

thanks. now that I'm seeing the stacktrace, I can pinpoint it to this line of code:

https://github.com/tannerlinsley/react-query/blob/7e29579c60e2b309e0c1fa9dc58a649c9c9fcc6a/src/devtools/Explorer.tsx#L112

Object.getOwnPropertyNames seems to be the culprit - not sure why we need that replacer in JSON.stringify in the first place 🤔

[AlonGvili]

idk but im sure you can fix it, the strange thing for me is i pass it a string of json why it trying to stringify it ??