The query gets stuck at fetching status when re-fetched data has cycles

[stanislav-halyn]

Describe the bug

The query gets stuck at fetching status when you try to re-fetch data and it has cycles in it.

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/react-query-mfsz4x

Steps to reproduce

• create a query that returns data with cycles in it
• re-fetch the query
• see that the fetchStatus gets stuck at fetching

Expected behavior

The query should change the fetchStatus to idle when re-fetch has been finished.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: MaxOs
• Browser: Chrome
• Version: 121.0.6167.184 (Official Build) (x86_64)

Tanstack Query adapter

react-query

TanStack Query version

v5.22.2

TypeScript version

No response

Additional context

As far as I understand, when you turn off structuralSharing for the query - the issue will go away.
After some digging, I found that default structuralSharing functionality is to call replaceEqualDeep function. And when there are cycles in the data, this function goes into infinite loop because it recursively calls itself on each data property.

[stanislav-halyn]

I will prepare a PR since the fix seems quite straightforward: add a visited WeakSet to check if we have processed the item already.

[TkDodo]

maybe we need to make it more obvious in the docs, but for structuralSharing to work, data must be JSON-serializable.

if that's not the case, you can:

• turn off structuralSharing by setting it to false
• provide your own method to structuralSharing to share data yourself.

add a visited WeakSet to check if we have processed the item already.

I think this is something you would do in a custom structuralSharing function. It's a conscious decision to only work with JSON serializable data on our end.

[TkDodo]

however, I think the query should go into error state if that happens. I think that might be the real issue ?

[stanislav-halyn]

@TkDodo yeah, I think it should, because it took me some time to figure out what was the issue with the query, since I didn't know my data wasn't JSON-serializable

[NikSimonov]

got stuck with this problem for a long time too, would be good to get error in this case

[TkDodo]

however, I think the query should go into error state if that happens. I think that might be the real issue ?

okay, does someone want to contribute this ? I think a try/catch around here:

query/packages/query-core/src/query.ts

Line 499 in e3240f0

this.setData(data)

• calling onError in the catch should do it