Best way to cache a fetch from API to be used on one page to be used on another?

Ionic Framework Ionic React
1

Hey all … trying to get a handle on Ionic + React, coming from a PHP/Wordpress background.

Hoping to build a simple PWA, so app like website essentially with possibly native iOS/Android app if there is a need down the track.

Currently have a simple master/detail pattern implemented where master “page” fetches data from an API and displays the list, and the detail “page” fetches more data from the API based on which record is clicked on on the master page.

The master page gets 435kb approx from the API which sometimes takes between 3 and 6 seconds to fetch, so I’ve used Ionics Skeleton component to show a basic outline as the data loads. This works but I think the user would appreciate less waiting :wink:

So what is the best Ionic + React way to do the API call on the home page in the background, cache it for use throughout the rest of the users experience, and then call it from other “pages” when and where wanted?

The API data doesn’t really change much, and I don’t think the user needs to interact with it at this point (other than clicking), so I don’t think I need to manage state (useState/useEffect in React), but could be wrong here (advice appreciated).

By my thinking, caching using Ionics Storage would be the go on initial page load so that the data is ready when the user eventually navigates to the master page. No more watching the skeleton text loading haha.

I’m thinking using the Ionic React Hooks should help get access to Storage (among other things) but I can’t find examples on how to set this all up. Anyone implemented this?

I’m struggling to understand how to implement this in the best Ionic + React way. Would it be best to make a Component per distinct API request ie one for the master data and then one for the detail data? Or a kind of “service” Component that does the API calls and returns just the data and then other Components that can take that data via props and use that for the display … or for this simple concept should I just leave it all in each “page” as such.

My feeling is it should all be abstracted, but then there’s lots of moving bits to keep track of! Where do I stop with the abstractions?

Anyway sorry for the rambling. Advice muchly appreciated :slight_smile:

Cheers

2

Somebody else can address the React issues, but I would like to suggest that the first place I would devote resources here is to fixing the API to be more granular, allowing the app to be usable with a much smaller initial pull than 435K.

3

Hey @rapropos thanks for the reply :slight_smile:

Yeh it would make sense to have the API send smaller data for sure, however I don’t have access to change the original API (service is not owned by me). I have though of building an intermediate API on my server that pulls the full data, repurposes it with only the bare amount needed for the end use, and then create another API that the app can pull from. Just a whole bunch more time/work/complexity/cost needed unfortunately.

Have you used or have thoughts on using Ionic Storage or some sort of caching to cache that data?

Cheers :slight_smile: