Skip to content

Using a syncMode: "on-demand" collection breaks @tanstack/react-query-persist-client persister #901

@HaleyBoles

Description

@HaleyBoles
  • I've validated the bug against the latest version of DB packages

Describe the bug
When using @tanstack/react-query with an IndexedDB query persister via @tanstack/react-query-persist-client, setting a collection's "syncMode" to "on-demand" breaks the persister.

This seems to come from some functions that are set in the collection meta when using "on-demand" collections, which are then sent to the query itself when using queryCollectionOptions. Manually removing the subscription object from the query meta in the client in the persister does fix this, but presumably these functions would be needed in both the queried and the cached data?

To Reproduce
CodeSandbox

Steps to reproduce the behavior:

  1. Two collection versions of the same "pokemon" query exist. One with and without syncMode: "on-demand" to compare
  2. Pull up the browser debug > Console to view the error from the persister for the on-demand collection:
    Uncaught (in promise) DataCloneError: Failed to execute 'put' on 'IDBObjectStore': (event) => options.onUnsubscribe(event) could not be cloned.
  3. Pull up the browser debug > Application > IndexedDB > keyval-store > keyval > view there is no "pokemon-test" store (or there is a store that is missing the on-demand collection data, this seems to depend on the order the queries are called)
  4. In src/lib/graphql/gql-client.ts, swap the persistClient function to use the commented-out clientWithoutQueryMetaSubscription variables and set function instead of the raw client
  5. Reload the preview page
  6. Pull up the browser debug > Application > IndexedDB > keyval-store > keyval > view there is now a set "pokemon-test" store with clientState.queries containing each query

Expected behavior
The client can be persisted via the recommended setup from tanstack/query Building a Persister without client modification OR documention on the best practices for using on-demand collections with the tanstack query persister

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser: Chrome
  • Version: Chrome: 142.0.7444.164 (Official Build) (64-bit)

Additional context
Very excited to use this feature :) Otherwise, it seems great so far!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions