feat(asset-server-plugin): Add ability to disable caching per-request

packages/asset-server-plugin/e2e/asset-server-plugin.e2e-spec.ts

@@ -92,6 +92,7 @@ describe('AssetServerPlugin', () => {
 
     describe('caching', () => {
         const cacheDir = path.join(__dirname, TEST_ASSET_DIR, 'cache');
+        const cacheFileDir = path.join(__dirname, TEST_ASSET_DIR, 'cache', 'preview', '71');
 
         it('cache initially empty', async () => {
             const files = await fs.readdir(cacheDir);
@@ -101,8 +102,6 @@ describe('AssetServerPlugin', () => {
         it('creates cached image on first request', async () => {
             const res = await fetch(`${asset.preview}?preset=thumb`);
             const responseBuffer = await res.buffer();
-            const cacheFileDir = path.join(__dirname, TEST_ASSET_DIR, 'cache', 'preview', '71');
-
             expect(fs.existsSync(cacheFileDir)).toBe(true);
 
             const files = await fs.readdir(cacheFileDir);
@@ -117,7 +116,6 @@ describe('AssetServerPlugin', () => {
 
         it('does not create a new cached image on a second request', async () => {
             const res = await fetch(`${asset.preview}?preset=thumb`);
-            const cacheFileDir = path.join(__dirname, TEST_ASSET_DIR, 'cache', 'preview', '71');
             const files = await fs.readdir(cacheFileDir);
 
             expect(files.length).toBe(1);
@@ -125,7 +123,6 @@ describe('AssetServerPlugin', () => {
 
         it('does not create a new cached image for an untransformed image', async () => {
             const res = await fetch(`${asset.preview}`);
-            const cacheFileDir = path.join(__dirname, TEST_ASSET_DIR, 'cache', 'preview', '71');
             const files = await fs.readdir(cacheFileDir);
 
             expect(files.length).toBe(1);
@@ -133,7 +130,6 @@ describe('AssetServerPlugin', () => {
 
         it('does not create a new cached image for an invalid preset', async () => {
             const res = await fetch(`${asset.preview}?preset=invalid`);
-            const cacheFileDir = path.join(__dirname, TEST_ASSET_DIR, 'cache', 'preview', '71');
             const files = await fs.readdir(cacheFileDir);
 
             expect(files.length).toBe(1);
@@ -142,6 +138,20 @@ describe('AssetServerPlugin', () => {
             const responseBuffer = await res.buffer();
             expect(Buffer.compare(responseBuffer, previewFile)).toBe(0);
         });
+
+        it('does not create a new cached image if cache=false', async () => {
+            const res = await fetch(`${asset.preview}?preset=tiny&cache=false`);
+            const files = await fs.readdir(cacheFileDir);
+
+            expect(files.length).toBe(1);
+        });
+
+        it('creates a new cached image if cache=true', async () => {
+            const res = await fetch(`${asset.preview}?preset=tiny&cache=true`);
+            const files = await fs.readdir(cacheFileDir);
+
+            expect(files.length).toBe(2);
+        });
     });
 });
 

packages/asset-server-plugin/src/plugin.ts

@@ -112,6 +112,10 @@ import { AssetServerOptions, ImageTransformPreset } from './types';
  * medium | 500px | 500px | resize
  * large | 800px | 800px | resize
  *
+ * ### Caching
+ * By default, the AssetServerPlugin will cache every transformed image, so that the transformation only needs to be performed a single time for
+ * a given configuration. Caching can be disabled per-request by setting the `?cache=false` query parameter.
+ *
  * @docsCategory AssetServerPlugin
  */
 @VendurePlugin({
@@ -231,9 +235,14 @@ export class AssetServerPlugin implements OnVendureBootstrap, OnVendureClose {
                     const image = await transformImage(file, req.query, this.presets || []);
                     try {
                         const imageBuffer = await image.toBuffer();
-                        const cachedFileName = this.getFileNameFromRequest(req);
-                        await AssetServerPlugin.assetStorage.writeFileFromBuffer(cachedFileName, imageBuffer);
-                        Logger.debug(`Saved cached asset: ${cachedFileName}`, loggerCtx);
+                        if (!req.query.cache || req.query.cache === 'true') {
+                            const cachedFileName = this.getFileNameFromRequest(req);
+                            await AssetServerPlugin.assetStorage.writeFileFromBuffer(
+                                cachedFileName,
+                                imageBuffer,
+                            );
+                            Logger.debug(`Saved cached asset: ${cachedFileName}`, loggerCtx);
+                        }
                         res.set('Content-Type', `image/${(await image.metadata()).format}`);
                         res.send(imageBuffer);
                     } catch (e) {