POC: fine grained storage persister

[DamianOsipiuk]

Ref: #4693

This is a POC of a persister that works for both sync and async storage

Things that are missing from the currently implemented client persister:

• throttling
  • do we need it when persisting one query at a time?
• retry
  • TODO
  • needed for out of space issues that were reported previously
• single key storage
  • do we really need it? you can search in local storage, but may trigger some people OCD
• persisting paused mutations
  • offline mode?

How to run?

• cd examples/vue/persister
• pnpm i
• pnpm run dev
• list is persisted to localStorage and pages to idb

Seems to be working pretty well...

Extending useQuery api layer:

What we could do to make it even better is to add a persister to the option list of useQuery.
This will allow to pass in persister without touching queryFn.
Additionally we would be able to add it to the global defaultOptions of QueryClient if we would like to achieve global client persistance with the least amount of code. Without the need to wrap every queryFn with persister.
Two additional benefits would be the ability to get rid of setTimeout to store the state of query (or maybe we can do it now? I'm not sure). And also we would not have to push queryClient to the persister, as it could be passed to the persister along query function context.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Updated
query	⬜️ Ignored (Inspect)		Mar 13, 2023 at 11:18PM (UTC)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 9ed0d9a:

Sandbox	Source
@tanstack/query-example-react-basic-typescript	Configuration
@tanstack/query-example-solid-basic-typescript	Configuration
@tanstack/query-example-svelte-basic	Configuration
@tanstack/query-example-vue-basic	Configuration