How do I refresh Data Store data in Ember.Js?

Question

How do I get fresh data from the server/DS in ember without reloading a page?

here is the updated component for ember

 import Component from '@ember/component';
import { set } from '@ember/object';
import { inject as service } from '@ember/service';
import { alias } from '@ember/object/computed';

export default Component.extend({
  router: service(),


  init() {
    this._super(...arguments);
    let alertColor = this.alertColor;
  this.refreshInterval = setInterval(() => {
      if (this.isDestroyed || this.isDestroying) return;

      this.router.refresh();
    }, 3_000);
  }

 })

this is the route... I think. There are other ones but this I think is the one it uses. Im not positive though. Theres also a component which i deleted because Stackoverflow said there wasnt enough details and mostly code...so thats why Im adding all this text here

import AddThis from '../mixins/add-this';
import getQueryVariable from '../utils/get-query';
import Route from '@ember/routing/route';
import { get } from '@ember/object';

export default Route.extend(AddThis, {
  model: function(args) {
    this._super(...arguments);

    return this.store.findRecord('landing-page', args.id);
  },

  setupController: function(controller, model) {
    this._super(...arguments);
    const  href = get(model, 'uri') +
                  window.location.search +
                  window.location.hash,
           id = getQueryVariable('id');

    if (id && !isNaN(id) && get(model, 'cardPageType') === '2') {
      this.transitionTo('image', get(model, 'id'), 0, id);
    }

    // @TODO Not 100% clear on what this is for
    if (get(model, 'uri')) {
      window.history.replaceState('', get(model, 'title'), href);
    }
  },

  actions: {
    goToVideo: function(id) {
      this.transitionTo('video', id);
    },
  },
});

that's not a model, that's a component. how are you fetching data? — NullVoxPopuli
– NullVoxPopuli, Commented Mar 10, 2022 at 16:02
also, feel free to ignore me, if you know what you're doing, but it seems like you're struggling to understand how the different pieces of the framework interact with each other. I highly recommend reading through the official tutorial: guides.emberjs.com/release/tutorial/part-1 It is top-notch! — NullVoxPopuli
– NullVoxPopuli, Commented Mar 11, 2022 at 18:02

NullVoxPopuli · Accepted Answer · 2022-03-14 18:19:41Z

0

Since your loading data in the landing-page route, you can use the RouterService to refresh the route.

For example, whenever you want to refresh our data fetched from a route, you do the following:

import { service } from '@ember/service';
import Component from '@glimmer/component';

export default class Demo extends Component {
  @service router;

  refreshMe = () => {
    this.router.refresh('landing-page');
    // or to refresh all routes:
    // this.router.refresh();
  }
}

<button {{on 'click' this.refreshMe}}>
  Refresh Me
</button>

Note that prior to [email protected], you'll need to install this polyfill: https://github.com/Windvis/ember-router-service-refresh-polyfill (which supports all the way back to [email protected], which is > 3.5 years ago, at the time of writing)

edit: demonstrating how to use the legacy syntax and refreshing every 60s.

import { inject as service } from '@ember/service';

// ...
export default Component.extend({
  // ...
  router: service(),

  init() {
    this._super(...arguments);
    // ...

    
    this.refreshInterval = setInterval(() => {
      if (this.isDestroyed || this.isDestroying) return;

      this.router.refresh();
    }, 60_000);
  }

  willDestroy() {
    clearInterval(this.refreshInterval);
  }

Docs:

edited Mar 14, 2022 at 18:19

answered Mar 11, 2022 at 18:00

NullVoxPopuli

65.6k76 gold badges216 silver badges364 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user229044 Over a year ago

Comments are not for extended discussion; this conversation has been moved to chat.

user718229 Over a year ago

youre saying that the model should be updating though once the router is refreshed?

NullVoxPopuli Over a year ago

that is correct, yeah

Collectives™ on Stack Overflow

How do I refresh Data Store data in Ember.Js?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related