search

TanStack / query

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.
https://tanstack.com/query
MIT License
41.74k stars 2.84k forks source link

React Query Devtools cannot serialize BigInt type #3082

Closed themagickoala closed 2 years ago

themagickoala commented 2 years ago

Describe the bug One of the models that I am caching with React Query is a BigInt type. Unfortunately, when I try and inspect the data in the devtools explorer, I get an uncaught error: TypeError: Do not know how to serialize a BigInt.

To Reproduce Steps to reproduce the behavior:

  1. Add an object using a BigInt type to the query cache
  2. Open the Devtools
  3. Select the query in the browser to inspect the data
  4. See the error

Expected behavior I should be able to view properly serialised data in the devtools browser.

Screenshots image

Desktop (please complete the following information):

Additional context The error can be traced to this line: https://github.com/tannerlinsley/react-query/blob/master/src/devtools/Explorer.tsx#L112. If there's a reason that the data is being stringified, then hopefully there's a way to keep doing it, but there are data types which cannot be parsed by JSON.stringify. There may be other options, such as https://github.com/blitz-js/superjson but I understand that would add further complexity.

TkDodo commented 2 years ago

hmm, how should we serialize the BigInt ? You can certainly have non-serializable data in your cache, its just not very common. A couple of things won't work with non-serializable data:

for the persist plugins, we actually have an option to provide a different serializer:

https://github.com/tannerlinsley/react-query/blob/b84681fdc7d37645cd149f40e98cb18fd8bc393c/src/createWebStoragePersister/index.ts#L28-L29

if you want, you can contribute something similar to the devtools, as long as it defaults to JSON.stringify

themagickoala commented 2 years ago

Thanks Dominik. I think you raise a good point, this will also cause an issue with hydration. Is there an option to specify the serializer for hydration, because that's probably a bigger issue? I'd love to take a look at this if I get the time. I'm busy right now, but might get time in the new year if my manager lets me!

TkDodo commented 2 years ago

@Ephem I think we decided with this issue:

that its a limitation of hydration to only support json serializable values, right? We have since documented it here:

https://react-query.tanstack.com/reference/hydration#limitations

it's actually not a concern of hydration / dehydration, because that gives you an object, but it seems that passing this object to the return value of getStaticProps in nextJs expects it so be json serializable ?

themagickoala commented 2 years ago

Yeah I just dug into the hydration code and the serialisation will all be the purview of Next, so I can just serialise it myself for hydration. I'll take a look into the dev tools in the new year.

TkDodo commented 2 years ago

@themagickoala any updates here, are you actively working on a serializer option for the devtools?

themagickoala commented 2 years ago

Afraid not, circumstances have conspired against me and I don't see myself having capacity for this.

HenriqueDerosa commented 2 years ago

Hey @themagickoala, @TkDodo , I'd like to have a look on this issue!

I didn't get why javascript doesn't stringify the BigInt. Checking it here.

tannerlinsley commented 2 years ago

:tada: This issue has been resolved in version 3.34.18 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

themagickoala commented 2 years ago

Thanks Henrique! I've actually just this week stopped storing the bigint and started using the select option to convert to bigint on the way out of the cache.

tannerlinsley commented 2 years ago

:tada: This issue has been resolved in version 4.0.0-alpha.24 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

mc-petry commented 1 year ago

Should we reopen this issue?

@tanstack/react-query" 4.13.5 @tanstack/react-query-devtools: 4.13.5

When i open devtools all is ok:

image

but when i tried to select detailed view with key that contains bigint i have an error:

image
vctqs1 commented 1 year ago

I got same issue but in @tanstack/react-query not in the devtool. do we have any way to bypass this since Im using generate tool and the generate code required BigInt

TkDodo commented 1 year ago

if it's in the QueryKey: pass a custom queryKeyHashFn if it's in the data, it shouldn't be a problem.

vctqs1 commented 1 year ago

ohh I see thank you

0x33dm commented 3 months ago

I'm having the same problem but on react-query-devtools while using https://wagmi.sh/ library.

In some screens when i opened the dev tools it will throw that error.

BigInt.prototype['toJSON'] = function () {
  return this.toString()
}

I had to add this to my ReactQueryProvider file

murderteeth commented 1 week ago

I'm having the same problem but on react-query-devtools while using https://wagmi.sh/ library.

In some screens when i opened the dev tools it will throw that error.

BigInt.prototype['toJSON'] = function () { return this.toString() } I had to add this to my ReactQueryProvider file

so helpful, tu! i ended up adding it my react apps' entry, main.tsx. this way it applied everywhere which doesn't seem to hurt anything