# Refreshing Application Data when switching routes

**URL:** <https://discuss.emberjs.com/t/refreshing-application-data-when-switching-routes/16386>\
**Category:** Ember Data\
**Created:** [April 1, 2019, 11:57am UTC](https://discuss.emberjs.com/t/refreshing-application-data-when-switching-routes/16386 "2019-04-01T11:57:59Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![toinecl](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/toinecl/32/13716_2.png) [@toinecl](https://discuss.emberjs.com/u/toinecl)\
**Post date:** [April 1, 2019, 11:57am UTC](https://discuss.emberjs.com/t/refreshing-application-data-when-switching-routes/16386/1 "2019-04-01T11:57:59Z")

</div>

I have a multi-user ember application where the back-end (REST API) keeps track of progress of the entire team. So, I have done the following:

**adapters/application.js**

```
import DS from 'ember-data';

export default DS.RESTAdapter.extend({
  namespace: 'cws/api',
  host: '..',
});

```

**routes/application.js**

```
import Route from '@ember/routing/route';

export default Route.extend({
  model() {
    return Ember.RSVP.hash({
      currentProgress: this.store.findRecord('progress', 1, {reload: true})
    });
  }
});

```

**templates/application.hbs**

`<div>{{model.currentProgress.percentage}}%</div>`

Whenever someone switches routes, I’d like to refresh the model.currentProgress value. I tried doing that by adding a refresh() or reload() to all the other routes’ js files, but that causes an infinite loop.

How would you do this?

---

<div class="post-metadata">

**Author:** ![James-Byrne](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/james-byrne/32/17391_2.png) [@James-Byrne](https://discuss.emberjs.com/u/James-Byrne)\
**Post date:** [April 1, 2019, 2:06pm UTC](https://discuss.emberjs.com/t/refreshing-application-data-when-switching-routes/16386/2 "2019-04-01T14:06:10Z")

</div>

You should be able to use `willTransition` in the route to do this. [Here’s an example twiddle](https://ember-twiddle.com/0ebc63130064354bfe375fb624d2872c?openFiles=services.mock-progress.js%2Ctemplates.components.progress-provider.hbs&route=%2Ftwo) which uses the `willTransition` hook on the application route and a provider-component to emulate the behaviour you’re after.

---

<div class="post-metadata">

**Author:** ![toinecl](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/toinecl/32/13716_2.png) [@toinecl](https://discuss.emberjs.com/u/toinecl)\
**Post date:** [April 1, 2019, 2:40pm UTC](https://discuss.emberjs.com/t/refreshing-application-data-when-switching-routes/16386/3 "2019-04-01T14:40:30Z")

</div>

Wow - this was unbelievably easy!

Thank you so much!

---

<div class="post-metadata">

**Author:** ![toinecl](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/toinecl/32/13716_2.png) [@toinecl](https://discuss.emberjs.com/u/toinecl)\
**Post date:** [April 1, 2019, 4:27pm UTC](https://discuss.emberjs.com/t/refreshing-application-data-when-switching-routes/16386/4 "2019-04-01T16:27:27Z")

</div>

Actually, I now see the REST call made twice per route.

**application.js**

```
import Route from '@ember/routing/route';

export default Route.extend({
  model() {
    return Ember.RSVP.hash({
      currentProgress: this.store.findRecord('progress', 1, {reload: true})
    });
  },
  actions: {
    willTransition() {
      this.refresh();
    }
  }
});

```

---

<div class="post-metadata">

**Author:** ![James-Byrne](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/james-byrne/32/17391_2.png) [@James-Byrne](https://discuss.emberjs.com/u/James-Byrne)\
**Post date:** [April 1, 2019, 7:22pm UTC](https://discuss.emberjs.com/t/refreshing-application-data-when-switching-routes/16386/5 "2019-04-01T19:22:35Z")

</div>

Are you just using the `willTransition` hook on the `application` route?

These events will bubble from the closest route all the way up. For instance if your route is `foo.bar.something` then the `willTranstion` of `something` will be called first, then `bar`, then `foo`. So if you want all routes under `foo.bar.*` to retrieve the progress then you should put the function in `routes/foo/bar.js` and only there.