Me he quedado atascado con un problema, digamos que tengo este gancho de consulta de reacción personalizado a continuación.

 export const useGetData = () => { const { filter } = useSelector((state) => state.filterReducer); const queryInfo = useQuery(["filter", filter], () => getData(), { staleTime: Infinity, cacheTime: Infinity, enabled: false, keepPreviousData: true }); return { ...queryInfo, data: useMemo(() => queryInfo.data, [queryInfo.data]) }; };

así que aquí estoy almacenando el estado del filtro del usuario en la tienda redux global y cada vez que el usuario realiza algún cambio, esto creará un nuevo caché con datos como indefinidos. por lo tanto, dado que esta consulta se ha configurado como falsa, no realizará una llamada a la API y el usuario debe hacer clic manualmente en el botón Aplicar filtro en la interfaz de usuario para obtener los datos, lo que en realidad hace una llamada de recuperación y obtiene la actualización de los datos. caché indefinida existente con los datos devueltos desde el servidor.

dado que esta consulta tiene keepPreviousData establecido en verdadero, mantendrá los datos anteriores en la interfaz de usuario. pero en el caché, el nuevo filtro se ha actualizado con undefined. Así que ahora digamos que el usuario no aplica el filtro (haciendo clic en el botón Aplicar filtro), simplemente cambia el filtro (que en realidad crea un nuevo caché), y digamos que el usuario desmonta el componente y vuelve a montar el componente ( usando un interruptor), ¡los datos anteriores que se mostraban han desaparecido! (porque ahora se muestra indefinido)

¿Es posible mantener los datos anteriores si está enabled: false , keepPreviousData: true , incluso si el componente se desmonta y se vuelve a montar?

aquí está el código sandbox reproducido - enlace

Estoy atascado con este problema durante los últimos días, no estoy seguro de cómo solucionarlo. Cualquier ayuda en esto será muy apreciada gracias de antemano.