feat: replace `JSON.stringify` with `replaceDeepEqual` in structural sharing integrity check

[jxom]

This PR is a follow up on #7966 to:

• ~not surface console errors for values that are referentially stable (e.g. BigInt)~
• ~detect circular references in replaceDeepEqual~
• ~catch errors from replaceDeepEqual in replaceData, and surface them in the console + propagated to the query.~
• replace JSON.stringify with replaceDeepEqual in structural sharing integrity check

[nx-cloud[bot]]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit cd2c14c04e34886a4632f8e0d7dd40f2c9085ec1. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 2 targets

- [`nx affected --targets=test:sherif,test:knip,test:eslint,test:lib,test:types,test:build,build --parallel=3`](https://cloud.nx.app/runs/M4vziCLNnD?utm_source=pull-request&utm_medium=comment) - [`nx run-many --target=build --exclude=examples/** --exclude=integrations/**`](https://cloud.nx.app/runs/fOpFGK6LBv?utm_source=pull-request&utm_medium=comment)

---

Sent with 💌 from NxCloud.

[pkg-pr-new[bot]]

Open in Stackblitz

More templates

- [@tanstack/query-example-angular-basic](https://pkg.pr.new/template/2fc319c0-fe6d-4354-996c-b2a29365765b) - [@tanstack/query-example-angular-infinite-query-with-max-pages](https://pkg.pr.new/template/94f5d153-fd06-45e7-891b-a08e9f9687e8) - [@tanstack/query-example-angular-router](https://pkg.pr.new/template/5ee8cc11-498f-4bf6-962f-87de01b08981) - [@tanstack/query-example-angular-simple](https://pkg.pr.new/template/d306ef71-6408-4c57-b7bd-34eb97a7656f) - [@tanstack/query-example-solid-astro](https://pkg.pr.new/template/d590bdbc-360d-4388-9cd0-ded7117b74b1) - [@tanstack/query-example-solid-basic](https://pkg.pr.new/template/7a5b4f7a-b87a-4f25-99ed-9b5666a729e7) - [@tanstack/query-example-solid-basic-graphql-request](https://pkg.pr.new/template/c0828dc5-5dcf-46a1-874c-627dacb72f9b) - [@tanstack/query-example-solid-default-query-function](https://pkg.pr.new/template/6a26b2f8-4dd5-44b4-9416-a41ddf12c993) - [@tanstack/query-example-solid-simple](https://pkg.pr.new/template/6206ca57-773a-469a-bce0-53e03ced5489) - [@tanstack/query-example-solid-start-streaming](https://pkg.pr.new/template/5972fa05-d172-49a6-82e8-f53f820e9dfd) - [@tanstack/query-example-react-algolia](https://pkg.pr.new/template/4962cd42-cb88-4fc5-b879-f75159252865) - [@tanstack/query-example-react-auto-refetching](https://pkg.pr.new/template/8f2d295b-0159-437f-a67e-aadd925765f3) - [@tanstack/query-example-react-basic](https://pkg.pr.new/template/26a77f03-23e3-49b2-9234-3e171a68d40d) - [@tanstack/query-example-react-basic-graphql-request](https://pkg.pr.new/template/3800ec65-5d5f-41b5-9016-18e164b2012f) - [@tanstack/query-example-react-default-query-function](https://pkg.pr.new/template/4a9a672c-4acf-42d8-898e-59e56223778e) - [@tanstack/query-example-react-devtools-panel](https://pkg.pr.new/template/ef27f1da-2fbe-4126-8974-10de7f3d951b) - [@tanstack/query-example-react-infinite-query-with-max-pages](https://pkg.pr.new/template/fb002524-86f1-4051-880a-ed59bbce39d1) - [@tanstack/query-example-react-load-more-infinite-scroll](https://pkg.pr.new/template/9bd05354-14c3-41db-8f04-015725f10265) - [@tanstack/query-example-react-nextjs](https://pkg.pr.new/template/0daf34c1-3938-449d-9d73-69fcef696d7d) - [@tanstack/query-example-react-nextjs-app-prefetching](https://pkg.pr.new/template/7f9bc6e1-6185-4b47-83ae-890aa723a56b) - [@tanstack/query-example-nextjs-suspense-streaming](https://pkg.pr.new/template/54b0ea7c-b9e8-4534-a579-d0b965e1f7c1) - [@tanstack/query-example-react-offline](https://pkg.pr.new/template/8c1b9d56-e1bd-4ccc-a41d-9cd48fea74f1) - [@tanstack/query-example-react-optimistic-updates-cache](https://pkg.pr.new/template/e3683c9d-e1d3-4dee-b1e1-a393ffd6c80a) - [@tanstack/query-example-react-optimistic-updates-ui](https://pkg.pr.new/template/8f733675-6923-4abd-a892-1ae4f2831bbc) - [@tanstack/query-example-react-pagination](https://pkg.pr.new/template/bef13e06-590e-4563-ba9c-c9748c1349fb) - [@tanstack/query-example-react-prefetching](https://pkg.pr.new/template/e0881689-bc90-47f2-9287-fa911b69cc1d) - [@tanstack/query-example-react-playground](https://pkg.pr.new/template/d8e2bb81-173e-4f44-8749-2ec6f9dc09dc) - [@tanstack/query-example-react-react-native](https://pkg.pr.new/template/f3b86dd2-9d89-40c7-8e73-7fb010a17d83) - [@tanstack/query-example-react-rick-morty](https://pkg.pr.new/template/fd0c0184-bca2-45d9-ae23-2c019ef8d597) - [@tanstack/query-example-react-shadow-dom](https://pkg.pr.new/template/4138b436-a45c-4540-bddf-1048b29e83f9) - [@tanstack/query-example-react-simple](https://pkg.pr.new/template/9163117f-679b-4b06-ac8d-64e0d5b290dc) - [@tanstack/query-example-react-star-wars](https://pkg.pr.new/template/22a747d6-3e64-4c80-a84a-aabce365f7b3) - [@tanstack/query-example-react-suspense](https://pkg.pr.new/template/f769cc12-0996-41e8-90fd-8d5b48ee65bc) - [@tanstack/query-example-svelte-auto-refetching](https://pkg.pr.new/template/b4e304a3-fd38-43a2-8283-40d0ea12dc01) - [@tanstack/query-example-svelte-basic](https://pkg.pr.new/template/39639ac0-e292-435f-a515-ec46fa1dfbb3) - [@tanstack/query-example-svelte-load-more-infinite-scroll](https://pkg.pr.new/template/74195302-9bc2-4422-bccd-09925df15de0) - [@tanstack/query-example-svelte-optimistic-updates](https://pkg.pr.new/template/fe1b0d7c-f0f4-40e6-b296-8c3e0fb83af9) - [@tanstack/query-example-svelte-playground](https://pkg.pr.new/template/4347bddb-4eb0-4da6-808e-77271524b463) - [@tanstack/query-example-svelte-simple](https://pkg.pr.new/template/32d8a845-de73-4fc1-aa42-751af84f48e8) - [@tanstack/query-example-svelte-ssr](https://pkg.pr.new/template/078c3724-6561-4d5f-8854-7155310e13ea) - [@tanstack/query-example-svelte-star-wars](https://pkg.pr.new/template/fcf2ab96-2011-4645-abe0-37e53cfb42a2) - [@tanstack/query-example-vue-2.6-basic](https://pkg.pr.new/template/60f9be86-d37a-4c92-aa2b-66aa9f4ba459) - [@tanstack/query-example-vue-2.7-basic](https://pkg.pr.new/template/5cd0ec50-83f5-42e8-a5a0-fbf772005c8e) - [@tanstack/query-example-vue-basic](https://pkg.pr.new/template/fb1da922-ff4f-4d4f-9837-abb9b101ad1a) - [@tanstack/query-example-vue-dependent-queries](https://pkg.pr.new/template/d8ce708e-b040-4319-b109-90226f33cd43) - [@tanstack/query-example-vue-nuxt3](https://pkg.pr.new/template/f6b1478c-1328-4e14-83a9-b05b06833098) - [@tanstack/query-example-vue-persister](https://pkg.pr.new/template/cf90f2e9-128a-4a89-8e60-4172722b70b4) - [@tanstack/query-example-vue-simple](https://pkg.pr.new/template/c86f5361-fb80-4589-8b62-d29f350a85cb) - [@tanstack/query-example-react-router](https://pkg.pr.new/template/22997b65-4edc-4407-bb4e-a487c36be8d5)

@tanstack/eslint-plugin-query

``` pnpm add https://pkg.pr.new/@tanstack/eslint-plugin-query@8030 ```

@tanstack/angular-query-experimental

``` pnpm add https://pkg.pr.new/@tanstack/angular-query-experimental@8030 ```

@tanstack/query-async-storage-persister

``` pnpm add https://pkg.pr.new/@tanstack/query-async-storage-persister@8030 ```

@tanstack/query-broadcast-client-experimental

``` pnpm add https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@8030 ```

@tanstack/query-core

``` pnpm add https://pkg.pr.new/@tanstack/query-core@8030 ```

@tanstack/query-devtools

``` pnpm add https://pkg.pr.new/@tanstack/query-devtools@8030 ```

@tanstack/query-persist-client-core

``` pnpm add https://pkg.pr.new/@tanstack/query-persist-client-core@8030 ```

@tanstack/query-sync-storage-persister

``` pnpm add https://pkg.pr.new/@tanstack/query-sync-storage-persister@8030 ```

@tanstack/react-query

``` pnpm add https://pkg.pr.new/@tanstack/react-query@8030 ```

@tanstack/react-query-devtools

``` pnpm add https://pkg.pr.new/@tanstack/react-query-devtools@8030 ```

@tanstack/react-query-next-experimental

``` pnpm add https://pkg.pr.new/@tanstack/react-query-next-experimental@8030 ```

@tanstack/react-query-persist-client

``` pnpm add https://pkg.pr.new/@tanstack/react-query-persist-client@8030 ```

@tanstack/solid-query

``` pnpm add https://pkg.pr.new/@tanstack/solid-query@8030 ```

@tanstack/solid-query-devtools

``` pnpm add https://pkg.pr.new/@tanstack/solid-query-devtools@8030 ```

@tanstack/solid-query-persist-client

``` pnpm add https://pkg.pr.new/@tanstack/solid-query-persist-client@8030 ```

@tanstack/svelte-query

``` pnpm add https://pkg.pr.new/@tanstack/svelte-query@8030 ```

@tanstack/svelte-query-devtools

``` pnpm add https://pkg.pr.new/@tanstack/svelte-query-devtools@8030 ```

@tanstack/svelte-query-persist-client

``` pnpm add https://pkg.pr.new/@tanstack/svelte-query-persist-client@8030 ```

@tanstack/vue-query

``` pnpm add https://pkg.pr.new/@tanstack/vue-query@8030 ```

@tanstack/vue-query-devtools

``` pnpm add https://pkg.pr.new/@tanstack/vue-query-devtools@8030 ```

@tanstack/angular-query-devtools-experimental

``` pnpm add https://pkg.pr.new/@tanstack/angular-query-devtools-experimental@8030 ```

commit: cd2c14c

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 61.85%. Comparing base (d58cf08) to head (cd2c14c). Report is 1 commits behind head on main.

Additional details and impacted files

[](https://app.codecov.io/gh/TanStack/query/pull/8030?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) ```diff @@ Coverage Diff @@ ## main #8030 +/- ## ========================================= + Coverage 0 61.85% +61.85% ========================================= Files 0 135 +135 Lines 0 4679 +4679 Branches 0 1306 +1306 ========================================= + Hits 0 2894 +2894 - Misses 0 1543 +1543 - Partials 0 242 +242 ``` | [Components](https://app.codecov.io/gh/TanStack/query/pull/8030/components?src=pr&el=components&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | Coverage Δ | | |---|---|---| | [@tanstack/angular-query-devtools-experimental](https://app.codecov.io/gh/TanStack/query/pull/8030/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `∅ <ø> (∅)` | | | [@tanstack/angular-query-experimental](https://app.codecov.io/gh/TanStack/query/pull/8030/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `86.58% <ø> (∅)` | | | [@tanstack/eslint-plugin-query](https://app.codecov.io/gh/TanStack/query/pull/8030/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `∅ <ø> (∅)` | | | [@tanstack/query-async-storage-persister](https://app.codecov.io/gh/TanStack/query/pull/8030/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `43.85% <ø> (∅)` | | | [@tanstack/query-broadcast-client-experimental](https://app.codecov.io/gh/TanStack/query/pull/8030/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `∅ <ø> (∅)` | | | [@tanstack/query-codemods](https://app.codecov.io/gh/TanStack/query/pull/8030/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `∅ <ø> (∅)` | | | [@tanstack/query-core](https://app.codecov.io/gh/TanStack/query/pull/8030/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `92.86% <100.00%> (∅)` | | | [@tanstack/query-devtools](https://app.codecov.io/gh/TanStack/query/pull/8030/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `4.86% <ø> (∅)` | | | [@tanstack/query-persist-client-core](https://app.codecov.io/gh/TanStack/query/pull/8030/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `57.73% <ø> (∅)` | | | [@tanstack/query-sync-storage-persister](https://app.codecov.io/gh/TanStack/query/pull/8030/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `82.50% <ø> (∅)` | | | [@tanstack/react-query](https://app.codecov.io/gh/TanStack/query/pull/8030/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `92.50% <ø> (∅)` | | | [@tanstack/react-query-devtools](https://app.codecov.io/gh/TanStack/query/pull/8030/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `10.00% <ø> (∅)` | | | [@tanstack/react-query-next-experimental](https://app.codecov.io/gh/TanStack/query/pull/8030/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `∅ <ø> (∅)` | | | [@tanstack/react-query-persist-client](https://app.codecov.io/gh/TanStack/query/pull/8030/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `100.00% <ø> (∅)` | | | [@tanstack/solid-query](https://app.codecov.io/gh/TanStack/query/pull/8030/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `78.20% <ø> (∅)` | | | [@tanstack/solid-query-devtools](https://app.codecov.io/gh/TanStack/query/pull/8030/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `∅ <ø> (∅)` | | | [@tanstack/solid-query-persist-client](https://app.codecov.io/gh/TanStack/query/pull/8030/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `100.00% <ø> (∅)` | | | [@tanstack/svelte-query](https://app.codecov.io/gh/TanStack/query/pull/8030/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `87.33% <ø> (∅)` | | | [@tanstack/svelte-query-devtools](https://app.codecov.io/gh/TanStack/query/pull/8030/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `∅ <ø> (∅)` | | | [@tanstack/svelte-query-persist-client](https://app.codecov.io/gh/TanStack/query/pull/8030/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `100.00% <ø> (∅)` | | | [@tanstack/vue-query](https://app.codecov.io/gh/TanStack/query/pull/8030/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `71.51% <ø> (∅)` | | | [@tanstack/vue-query-devtools](https://app.codecov.io/gh/TanStack/query/pull/8030/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=TanStack) | `∅ <ø> (∅)` | |

[jxom]

I think we had a bit of a miscommunication. Ideally, we don't want any runtime changes for production builds - that's why the initial code was behind an env check.

So my idea was something like this:

if (process.env.NODE_ENV !== 'production') {
  try {
    return replaceEqualDeep(prevData, data)
  }
  catch(error) {
    console.error(...)
  }
}
return replaceEqualDeep(prevData, data)

This will remove the dev mode overhead of json stringify. If everything goes right, replaceEqualDeep will only be called once. If there is a circularity, the first call will log the error and the second call will then throw, so it will be caught in setData and the query will go to error state.

I think this would be the best of both worlds.

Got it. Can do that!

[jxom]

@TkDodo - lmk what you think