Clear the view cache in Ionic React

Question

I am facing exactly the same problem as this other question where my Ionic react application caches some views so that when a user logs out and logs in directly with another account, they see for a few seconds the previous data (list of news for example) of the previous user. So the solution is to clear all the cached views when the user access the login view.

This solution proposes to add this code in the view:

$scope.$on("$ionicView.enter", function () {
  $ionicHistory.clearCache();
  $ionicHistory.clearHistory();
});

However this is not the same API used in Ionic v5 for react. I could replaced the event listener with:

import { useIonViewWillEnter } from '@ionic/react'

useIonViewWillEnter(() => {
  // ...
})

But what is the equivalent of:

$ionicHistory.clearCache();
$ionicHistory.clearHistory();

I didn't find anything in the official doc so if someone has an idea I will really appreciate some help.

Answer 1

In the state definition in app.js you can add cache:false to disable caching (See Disable cache within state provider in the Ionic docs. Or, you can keep caching except when you know data has changed.

If you're already on the page, you can do, $state.go($state.currentState, {}, {reload:true})

If you're on another state and want to go back to the state that is normally cached but you want it to be refreshed, you can do, $ionicHistory.clearCache().then(function(){ $state.go('app.fooState') })

Note, the latter requires clearCache to return a promise. See the changes I made in this pull request and compare the implementation of clearCache that you have now with mine: https://github.com/driftyco/ionic/pull/3724

Hope This Works!!