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.
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.