How do I avoid caching on page in Ionic 3?


#1

I’m struggling trying to avoid caching a view in my Ionic application. My http calls will not show the newest item in the list even though I know there is a newer item. It works perfectly fine when I disable the cache in my browser but when I build the app on my iPhone, it never updates with the latest item.

I have also tried to create a pull to refresh feature that should get new data but it still does not work.

From what I have read everywhere else, it seems the life cycle events should update the page with new data. I have tried all the different events and IonViewDidEnter is mentioned multiple times. However, this still does not update the data on the page.

How do I avoid the caching in my app???

This is the call in my typescript file on the page.

ionViewDidEnter() {

    // load the items
    this.loadItems();
  }

  // the function to load all items
  loadItems() {
    
    // Create the loader
    let loader = this.loadingController.create({
      content: "Getting items.."
    });
    loader.present();

    // Get the most recent 100 posts
    this.itemApi.getItems(100).then(data => {
      loader.dismiss();
      this.posts = data
      this.initializeItems();
    });

  }

  initializeItems() {
    // The data is reset to all items
    this.items = this.posts;
  }

This is a call to my service that looks like this.

getItems(number) {
    return new Promise(resolve => {
      this.http.get('http://website.dk/wp-json/wp/v2/posts?per_page=' + number)
        .subscribe(res => resolve(res.json()));
    });
  }

My Ionic info:

@ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 1.3.7
    Cordova Platforms  : android 6.4.0 ios 4.5.4
    Ionic Framework    : ionic-angular 3.1.1

System:

    Node : v8.10.0
    npm  : 5.6.0
    OS   : macOS High Sierra

#2

You’re updating outside the Angular zone. The change detection algorithm doesn’t realize it has to update. There are a few fixes for this, worth reading up on change detection.


#3

Thank you! I will read some articles on the subject.


#4

See: How to detect changes?


#5

Change detection has not helped me with this problem. I have tried multiple solutions involving both zone.run() and other changeDetection options in Angular.

Do you have any other idea as to what might be causing the view to show the same data?