Basically, I would like to create some optimistic response loader for the images while they are uploading to render the optimistic images and the loader.

So I have this idea: I use Apollo optimistic response to add a base64 image into the cache to render it while the image is uploading but I also want to add a field for this image type like: imageLoading and I could use it in my UI to show some loader, etc. and remove this loader after the real image will be uploaded.

I know the only way to create a custom field in apollo cache: Field policy -> read functin
But the main problem is: how to let the apollo cache know when I should set the imageLoading field as true or false? Probably it's possible to use the reactiveVar for this imageLoading marker and later in the Field Policy -> read function I should somehow get this value and based on its return true/false for this cache field.

So far I know I could get this value directly from the reactive var in the read function of the field policy by this way:

const cache = new InMemoryCache({
  typePolicies: {
    Image: {
      fields: {
        name: {
          imageLoading (name) {
            const loading = reactiveVarIsLoading();
            return loading;
          }
        }
      },
    },
  },
});

But I'm not sure if it's the correct way to get the reactive var value directly in the cache.

So I'm wondering what is the best way to achieve that or if I'm moving in the totally wrong direction to achieve my goal?

Thanks for any help!