Possible to customize Persistor's options for JSON?

[bengry]

Right now the (experimental) persistor functionality or at least the two built-in ones use simple JSON stringify and parse.
This is fine, but I'd like to get some more control over the serialization and deserialization of the data.
For example, the data I store in react-query's cache is already JS objects which are not valid JSON in some cases - e.g. Date reviving upon fetching from the server:

const data = fetch('https://my-api.com')
.then(response => response.text())
.then(text => JSON.parse(text, dateReviver); // see https://gist.github.com/davehax/2f32e7b09c3da3531601e6543fcff82e for an example for a `dateReviver` implementation

I can, of course, create either my own storage, or Persistor, but I think that this is common enough and easy enough to add that it should be built into react-query.

I want to ask for some feedback from the community before opening a PR for this.

The relevant code is basically this:
https://github.com/tannerlinsley/react-query/blob/a85d822e24e64713d16b412a05cb2b26efcc7744/src/createWebStoragePersistor-experimental/index.ts#L21-L32

https://github.com/tannerlinsley/react-query/blob/a85d822e24e64713d16b412a05cb2b26efcc7744/src/createAsyncStoragePersistor-experimental/index.ts#L25-L37

[TkDodo]

do you have an api proposal?

[bengry]

I thought of simply adding a serialize + deserialize (optional) functions to:
https://github.com/tannerlinsley/react-query/blob/a85d822e24e64713d16b412a05cb2b26efcc7744/src/createWebStoragePersistor-experimental/index.ts#L4-L12.

interface CreateWebStoragePersistorOptions {
  // existing options 👇
  storage: Storage; 
  key?: string;
  throttleTime?: number;

  // new options 👇
  /**
   * @defualt `JSON.stringify`
   */
  serialize?: (client: PersistedClient) => string;
  /**
   * @defualt `JSON.parse`
   */
  deserialize?: (cachedString: string) => PersistedClient;
}

then the usage for my use-case above would be to supply a deserialize function like so:

import { dateReviver } from '...';

const persistor = createWebStoragePersistor({
  deserialize: cachedString => JSON.parse(cachedString, dateReviver) as PersistedClient
});

I'm not sure this is the ideal API, but it seems simple enough, yet useful. And I prefer to avoid over-complicating things unless there's a need to do so, especially since this is an experimental feature, the API of which can change at any time if we think of a better one :).

[TkDodo]

I like it, please add a PR if you want, but please don't forget about the async persistor :)

[bengry]

Done: #2864