Handling API calls to retrieve image data in large list

[Xythus]

Hello! I have recently stumbled upon a situation where I am not sure what the best/correct solution is.
I am working on an app that loads a large list of items from an API, which are then displayed as a list of rows. Each row displays a thumbnail for that item along with some information. The user can navigate into each row where the drilled down view also displays the thumbnail with the option to enlarge it if desired. So far so good.

The issue I'm having is that I do not have image URLs to use for AsyncImage and the like. Our company's API provides an endpoint where I can retrieve image data by entity ID. This API only accepts POST requests where the required token is provided in the request body, and the actual endpoint is specified in the tokenized request. Furthermore, the data this endpoint provides is not cached, so I will have to do this on the client end. My idea so far is as follows:

• Each row requires its own reducer.
• I'll need an image caching dependency along with the regular API client dependency.
• When a row appears, I'll send an action which will check if the image cache contains data for the entity ID. If so: great, set state.thumbnail to match the image data and we're done. If not:
• Fire off an API call to fetch image data, handle the response as an action, where I'll set state.thumbnail and feed the data into the image cache.
• When a row disappears, I'll clear state.thumbnail so data is not retained unnecessarily.

The downside to this approach is that I'll be storing image data in TCA state, which does not "feel" correct. Not only that: image data will be repeated in memory as both the image cache and the state will contain image data. Another approach that I've theorized is one where I share some sort of image cache between TCA and SwiftUI (as dependency and environment). The view can then wait for the image cache to contain the thumbnail, and I can use TCA to set image data in the image cache if needed.

I'd be happy with any comments on my solutions as well as any other solutions I may not have thought of. :)

EDIT: Added some additional information about the API.

[Alex293]

You can make a cache client which stores the images off the state to memory or disk and juste store the local url / cache key to the tca state. When the key switch to non nil load the image from the cache.

[Alex293]

Storing large data like image can be dangerous regarding the stack size

[Xythus]

This would be in the same vein as my theorized solution, yes? TCA and SwiftUI share an image cache (or abstraction thereof) and TCA inserts the data where SwiftUI can then fetch the image from cache using the entity ID (or whatever would be the ID in the cache)

[Alex293]

Yes, Indeed. I missed that you wanted to insert the reference to the cache in the SwiftUI env and that’s what I meant to suggest. Sorry for the noise

[Alex293]

I think that If you keep using url as cache keys you can keep using asyncimage lazyness though I wonder if it also maintain a cache