Prefetching with URL then loading in SwiftUI by custom key

[davidkessler-ch]

In our rather complex app we want to load images stored on S3, where we only store the associated keys in our database. So the flow to get an image onto the device is:

1. Authenticated user loads key for image stored in S3
2. user obtains (temporary - because authenticated) URL to image through AWS API call
3. image is prefetched and cached locally using the same custom key as S3 uses to identify image
4. now anytime this device wants to see the image it should load it from the cache using the key

In theory this should work, however I cannot figure out how to load an image in SwiftUI purely by custom cacheKey. I cannot use
KFImage.url(url: URL( ... ), cacheKey: " ... ")
because the URL should not be stored anywhere, it should only be used to prefetch the image and then in SwiftUI I want to only display the image if already prefetched.

[davidkessler-ch]

I have tried using this

@State private var loadedImage: UIImage?

// and when initialising filling this state variable using this:
ImageCache.default.retrieveImage(forKey: "123") { result in
            switch result {
            case .success(let value):
                print(value)
                loadedImage = value.image
            case .failure(let error):
                print(error)
            }
            print(loadedImage) // this is still nil for some really odd reason
        }

however somehow the UIImage is always nil

[onevcat]

Ummm,

I believe this should also work if the image was prefetched correctly. What is the value in the result handler? And can you make sure that this retrieveImage is called AFTER the image prefetching has already finished?

[onevcat]

Hi,

I guess this should do the trick. Instead of using the URL-based loading, try to define an ImageDataProvider:

struct CacheProvider: ImageDataProvider {

    enum E: Error {
        case malformedData
        case notInCache
    }

    let cacheKey: String
    let options: KingfisherOptionsInfo?

    func data(handler: @escaping (Result<Data, Error>) -> Void) {
        ImageCache.default.retrieveImage(forKey: cacheKey, options: .init(options)) { result in
            switch result {
            case .success(let r):
                if let image = r.image {
                    if let data = image.pngData() {
                        handler(.success(data))
                    } else {
                        handler(.failure(E.malformedData))
                    }
                } else {
                    handler(.failure(E.notInCache))
                }
            case .failure(let error):
                handler(.failure(error))
            }
        }
    }
}

Then on the SwiftUI.View side, load it as:

KFImage(
  source: .provider(
    CacheProvider(cacheKey: "my-cache-key", options: nil)
  )
)

And sure, you need to have a way to download it first before showing it. Say, using an ImagePrefetcher:

ImagePrefetcher(
  resources: [
      ImageResource(downloadURL: .init(string: "https://onevcat.com/assets/images/avatar.jpg")!, cacheKey: "my-cache-key")
  ], 
  completionHandler: { skippedResources, failedResources, completedResources in
      print("Prefetch skipped: \(skippedResources)")
      print("Prefetch completed: \(completedResources)")
  }
).start()

Then, once the prefetching is done, you should be able to load the KFImage from the cache and see the result.

Some points:

1. The cache might fail due to limitations of disk space and/or memory warning. So try to configure a looser limit to the cache.
2. If you are using any non-default processor, the processor's identifier is also considered as a part of the cache key. Kingfisher's cache considers that internally, but you still need to pass the same option if you are using a processor. Otherwise, the cache won't hit the result. Say, if you are using such a processor in the ImagePrefetcher:

ImagePrefetcher(
  resources: [
      ImageResource(downloadURL: .init(string: "https://onevcat.com/assets/images/avatar.jpg")!, cacheKey: "my-cache-key")
  ],
+ options: [.processor(RoundCornerImageProcessor(cornerRadius: 5.0))],
  completionHandler: { skippedResources, failedResources, completedResources in
      print("Prefetch skipped: \(skippedResources)")
      print("Prefetch completed: \(completedResources)")
  }
).start()

You also need to pass the same options to CacheProvider's initializer, then the ImageCache can find the it:

KFImage(
  source: .provider(
-   CacheProvider(cacheKey: "my-cache-key", options: nil)
+  CacheProvider(cacheKey: "my-cache-key", options: [.processor(RoundCornerImageProcessor(cornerRadius: 5.0))])
  )
)

[davidkessler-ch]

this is actually a way cleaner solution to my problem, thanks a ton!! problem solved🎉