robust-apricot

Failed to execute 'put' on 'IDBObjectStore'

After moving the react-query state to be persistent in the indexedDB, but using the example present in the documentation, I am facing some serialisation errors, namely for infinity queries, where the fetch

const refetchNewEvents = useCallback(
    () => refetch({ refetchPage: (_, index) => index === 0 }),
    [refetch]
  );

const refetchNewEvents = useCallback(
    () => refetch({ refetchPage: (_, index) => index === 0 }),
    [refetch]
  );

is throwing an error when trying to be saved in the persister database. Is there anyone with this issue who could guide me on fixing this? NOTE: This also happens when using the broadcastQueryClient.

Error: Failed to execute 'put' on 'IDBObjectStore': (z,D)=>D===0 could not be cloned.

Failed to execute 'postMessage' on 'BroadcastChannel': (_, index) => index === 0 could not be cloned

Error: Failed to execute 'put' on 'IDBObjectStore': (z,D)=>D===0 could not be cloned.

Failed to execute 'postMessage' on 'BroadcastChannel': (_, index) => index === 0 could not be cloned

16 Replies

vicious-gold•3y ago

seems like the function can't be serialized. refetchPage option is deprecated btw

robust-apricotOP•3y ago

I'm still using version 4. Does this means that on version 5 this will no longer be a problem? Because as far as I know, I don't have the control to handle these serializations. How can I prevent this?

vicious-gold•3y ago

on v5, refetchPage doesn't exist. And you are in control about serialization

robust-apricotOP•3y ago

This is also happening when I use infinite query for the fetchNextPage. When you mean I am in control about serialization, what do you mean? For now, we are omitting the errors on await set(idbValidKey, client).

vicious-gold•3y ago

PersistedClient is just an object, you can define how you serialize that. Not sure what indexedDB expects to be passed to set also, we only persist state, so there shouldn't be any funtions in there. so please show an example

robust-apricotOP•3y ago

I got the change to replicate the error here. https://codesandbox.io/p/sandbox/prod-sun-vthqrw?embed=1 It seems that the issue only occurs when using the refetch method with the refetchPage parameter. As this method is no longer supported in the latest version, we can conclude that the problem has been resolved. If I encounter this error for any other reason, I will try to update the example and provide notification here.

harsh-harlequin•13mo ago

hi @TkDodo 🔮 (i'm not sure if it is allowed to @ ping you or not), so i have the same problem, but i don't know where's the problem but i suspect it is in my prefetch thing, i try to inspect directly to the indexeddb in devtool and i notice something suspicious "promise" that persist. and that query is lead to this line, what's wrong with my code? in that code i'm trying prefetching the next 2 page data. i need to get the data for also prefetching the image.

vicious-gold•13mo ago

it seems that your are persisting pending queries; the reason I usually don't respond to screenshots is because as ALWAYS, the important parts are missing from screenshots. You are NOT showing how you actually persist the data. And please don't add another screenshot 😭. I will look at a minimal reproduction if you provide one.

harsh-harlequin•13mo ago

uh, i'm sorry. wait i will try to create the minimal reproduction. I'm not sure if this is enough: https://codesandbox.io/p/devbox/7ny3f8. The hooks are quite complex and have many dependencies. how to not persist pending queries? should i put the gcTime 0 ?

vicious-gold•13mo ago

they aren't persisted per default unless you have overwritten the dehydrateOptions (which you haven't) oh, you do. WHY?

dehydrate: {
  serializeData: SuperJSON.serialize,
  shouldDehydrateQuery: (query) =>
    defaultShouldDehydrateQuery(query) ||
      query.state.status === "pending",
}

dehydrate: {
  serializeData: SuperJSON.serialize,
  shouldDehydrateQuery: (query) =>
    defaultShouldDehydrateQuery(query) ||
      query.state.status === "pending",
}

this literally says "please dehydrate pending queries" ...

harsh-harlequin•13mo ago

What?! I didn’t even notice that. I’m using the T3 stack as a base—it’s meant for things like integrating tRPC with TanStack Query. Honestly, I’m not sure why they included that in the code. I’ll give it a try without it. So, I just need to remove query.state.status === "pending", right?

harsh-harlequin•13mo ago

oww that code is actually come from the docs https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#streaming-with-server-components

TanStack | High Quality Open-Source Software for Web Developers

Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.

vicious-gold•13mo ago

yes, for SSR; so you're doing streaming SSR and localstorage?

harsh-harlequin•13mo ago

Hmm, kinda, The SSR is only for the tRPC-related queries, but for regular (client-side) queries I want to persist the data in IndexedDB. Is it possible to have some specific queries use IndexedDB for persistence, while others use SSR streaming?

vicious-gold•13mo ago

yes, you can implement a different shouldDehydrateQuery function for both. There's an option available on the persistQueryClient

harsh-harlequin•13mo ago

okay, i will try to learn and implement first, thanks for the support! So I just needed to pass the shouldDehydrateQuery option, and now the error’s gone! Haha, can’t believe I missed that.

  {
    persister,
    maxAge: 1000 * 60 * 60 * 24,
    buster: 'v0.0.1',
    dehydrateOptions: {
      shouldDehydrateQuery: defaultShouldDehydrateQuery,
    },
  }

  {
    persister,
    maxAge: 1000 * 60 * 60 * 24,
    buster: 'v0.0.1',
    dehydrateOptions: {
      shouldDehydrateQuery: defaultShouldDehydrateQuery,
    },
  }

Gaming

Programming

Failed to execute 'put' on 'IDBObjectStore'

Did you find this page helpful?