Should I submit PR to improve persistQueryClient?

[jonathanstanley]

Merry Christmas and thank you for React Query! In that spirit, I'd like to offer an update to persistQueryClient 😀

I already built the update, and it's fully backwards compatible with the existing code (working on v4.0.0-alpha.5). I don't think there is much downside. Before I go through the contributing guidelines and submit a PR, I wanted to check that this would be considered. Here's the highlights:

break down the processes in persistQueryClient

// this wrapper remains for backwards compatibility
export async function persistQueryClient(props: PersistQueryClientOptions) {
  if (typeof window !== "undefined") {
    // Attempt restore
    persistQueryClientRestore(props);

    // Subscribe to changes in the query cache to trigger the save
    persistQueryClientSubscribe(props);
  }
}

This helps in several ways, especially when a user can choose to Remember Me or not:

1. currently there is no way to unsubscribe a persister
2. currently, there is no way to restore persisted data without also initiating subscription (such as on initial site load or [internet connection restored (see Refetch persistQueryClient when there is internet connection #2508 persistQueryClient removes cached entries if the network is down #2207 Offline/Persistor network error when device is offline #2477)
3. this enabled me to build a nice and easy Indexed DB persister so we don't have to mess with serialization (see Cache Persistence in IndexedDB #1638 Lazy-load persisted query cache #2107)

Return an unsubscribe callback when subscribing a persister

export function persistQueryClientSubscribe(
  props: PersistedQueryClientSaveOptions
) {
  return props.queryClient.getQueryCache().subscribe(() => {
    persistQueryClientSave(props);
  });
}

I can also submit a PR for docs

1. Note that removeClient is executed when data expired, busted, throws, or empty
2. Note that current implementation has maxAge is hardcoded to 24 hours
3. Note that these functions check for window undefined (no need deal with checking in the persister)
4. Correct misleading throttle information (persistQueryClient does not throttle; the throttle is currently set in the persisters)
5. Correct misleading serialization information (hydrate/dehydrate don't require serialization; however persisters might)
6. Note that current implementation silently ignores data imports that are older than maxAge
7. Note that maxAge is milliseconds
8. Note that hydrate will silently reject persisted data if the cache has newer data. (see It is not possible to rewrite cacheTime when using queryClient.setQueryData #2146)

I can also submit a PR with some issues I noticed along the way

1. Run the logger any time removeClient() is executed (ex: to warn that data age is > maxAge and is being ignored)
2. Move throttle so it isn't necessary for persister to implement a throttle
3. Preset maxAge to Infinity or drop it. It seems redundant of cacheTime and was hard to understand initially.

Summary

1. Would React Query team like me to submit as a PR?
2. Should I also submit documentation PR?
3. Should I also submit the other issues I noticed as a PR?

[TkDodo]

thank you for this, I ❤️ it. looking forward to your PR(s).

currently there is no way to unsubscribe a persister

I've also already noticed that 👍

Note that current implementation has maxAge is hardcoded to 24 hours

It' not hardcoded - it's just a default value, is it not?

[jonathanstanley]

here's the PR: #3141