Unexpected behaviour with Vue Query's persist plugin: deserialize method not always called

[nikolakrajinovic]

Hello,

I'm experiencing an issue with Vue Query's persist plugin where the deserialize method is not always being called as expected. This is causing inconsistent behavior in my components, as sometimes the data passed to the select function is serialized, even though it should always be the return type of queryFn, which in my case is a Model class instance (CiDetails).

Here's the relevant part of my code:

export const QUERY_CLIENT_OPTIONS: VueQueryPluginOptions = {
  queryClientConfig: {
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
        persister: experimental_createPersister({
          storage: localStorage,
          maxAge: 12 * HOUR,
          serialize: LocalStorageQuerySerializer.serialize,
          deserialize: LocalStorageQuerySerializer.deserialize
        })
      }
    }
  }
};

const QUERY_CONFIG = {
  CI_DETAILS: (instanceId: OptionallyReactive<string>, name: OptionallyReactive<string>) => ({
    queryKey: ['ci-details', instanceId, name],
    queryFn: () => CiService.getDetails(unref(instanceId), unref(name)),
    select: (data) => {
      if (!(data instanceof CiDetails)) {
        debugger;
      } else {
        debug('correctly deserialized');
    }
  })
};

I've confirmed that the deserialize method in my LocalStorageQuerySerializer class is correctly implemented and should return a CiDetails instance. However, the debugger statement inside the select function is sometimes hit, indicating that the data is serialized, and in these cases, the debugger statement inside LocalStorageQuerySerializer.deserialize is not hit:

deserialize = (cachedString: string): PersistedQuery => {
    const query = JSON.parse(cachedString);

    query.state.data = Array.isArray(query.state.data)
      ? query.state.data.map(this.deserializeQueryData)
      : this.deserializeQueryData(query.state.data);

    debugger;

    return query;
};

I did notice that in these cases, deserialize is called immediately after the first select call, which hits the debugger statement inside deserialize, after which select is called again with correctly deserialized data. Interestingly enough, when the data passed to select is not an instance of CiDetails, it is still an object, and not a string.

I would expect the deserialize method to always be called before the select function, ensuring that the data is always deserialized. Is there something I'm missing, or is this a potential bug?

{
    "@tanstack/query-persist-client-core": "^5.51.9",
    "@tanstack/vue-query": "^5.51.9"
}

Any help would be greatly appreciated.

Thanks!