Best approach for loading data for offline use

Question

I'm setting up a react native app, and need to work out how to query data efficiently. The data is structured/related as follows:

Locations (approx 100)
-Years (4)
--Datatype A
--Datatype B
--Datatype C
--Datatype D

So to load the initial data, there's the first api call to load all the Locations, then there are about 1600 api calls to load all the data (100 locations x 4 years x 4 datatypes).

The Datatypes are queried by specifying the location's ID and the year's ID.

// Fetch all locations with their associated years
get('/api/locations/')
-> returns each location with an array of years

// Iterate through locations and years
for each location {
    for each year in location.years {
        // Fetch data for each datatype
        get('/api/datatype-1/location/{location.id}/year/{year}')
        get('/api/datatype-2/location/{location.id}/year/{year}')
        get('/api/datatype-3/location/{location.id}/year/{year}')
        get('/api/datatype-4/location/{location.id}/year/{year}')
    }
}

It needs to be available offline, so really needs an initial load of everything somehow.

How would you go about this? I am reasonably familiar with Zustand and React Query.

Answer 1

You can use the PersistQueryClient from the persister plugin to store data in a storage like localstorage so that it's also available when the user has no network connection. But I would probably re-think the architecture because 1600 api calls when the page loads doesn't sound too good.