Back to overview after saving - Refetch data

#1

So this must be very trivial. I have a simple CRUD application. After the user has created a new record, he gets redirected to the record overview list page. I want to refetch the data now, so the list gets updated.

But how do you such things? Is there a special hook for that or something?

#2

Please, anyone? I’m still struggling with this.

#3

This depends on many things. If you are loading the data from the component the data will be refreshed every time the component loads. If you’re loading the data elsewhere you will need to call some method to refresh the data when the component is loading, either in the constructor or in ngOnInit. None of this has anything to do with Ionic, though.

Here’s some information on lifecycle hooks in Angular - I hope this gets you on the way:
https://angular.io/guide/lifecycle-hooks

#4

I agree with you that it has not to do with Ionic. But since this is such a trivial thing to do in apps, I thought someone would come up with a solution. I admit, I’m also not very familiar with Angular. But I thought of the lifecycle hooks and tried all of them. The ngOnInit method does only call on the first request, but not when I “switch back” to the component with a route navigation.

Thanks anyway, I will do some research on Angular…

#5

Ok, for who wants to know, this is what worked perfectly for me :slight_smile:

#6

It really just depends. Are you doing something like opening a popover or modal, and then going back to the component that launched it?

Here’s what I do in that situation. In this specific case the data is loaded in a service (auxData, stored in ReplaySubjects) when the application starts, Many components share this data so having a central source to reduce http calls is great. modal.present is what brings up my CRUD component. In order to refresh my data I make a call to the service to do just that when the modal is closed.

async onEditItem(item: T) {
		const modal = await this.modalController.create({
			component: GenericTypeDescCrudModalComponent,
			componentProps: {
				itemToEdit: item,
				httpService: this.httpService,
				itemName: this.itemName
			}
		});
		await modal.present();
		return await modal.onDidDismiss().then(() => {
			this.refreshData();
		});
	}

	async onNewItem() {
		const modal = await this.modalController.create({
			component: GenericTypeDescCrudModalComponent,
			componentProps: { 
				httpService: this.httpService,
				itemName: this.itemName
			}
		});
		await modal.present();
		return await modal.onDidDismiss().then(() => {
			this.refreshData();
		});
	}

	private refreshData() {
		// Refresh data
		switch (this.itemName) {
			case 'Section':
				this.auxService.loadSections();
				break;

			case 'Type':
				this.auxService.loadTypes();
				break;

			case 'Category':
				this.auxService.loadCategories();
				break;
		}
	}

I store all of my data in the client in Observables like ReplaySubjects. In most of the rest of my application the httpClient.updates return the data to the observable and my application data refreshes automatically without navigation.