@payloadcms/storage-gcs has no setting for max age

[kenneth-devedis]

Currently it is not possible to set a max age in the cache-control header for files with @payloadcms/storage-gcs. Most other storage adapters provide this feature.

This probably could be done analogous to @payloadcms/storage-vercel-blob.

[mt-hagen]

Is there any news on this?
In my scenario this would be highly useful as well!
@kenneth-devedis did you implement a workaround for this issue in the meantime?
I am hosting Payload and a nextjs site on Vercel and without the option to set cache-control headers, vercel will always set the default headers to the api endpoint as mentioned here: https://vercel.com/docs/headers/cache-control-headers#default-cache-control-value

This basically removes the advantages of using the vercel image cache... Since it will always regenerate all images.

In my opinion it would be awesome if the config option modifyResponseHeaders would be supported for the storage adapters. I think this also applies to the other official ones (eg S3 or Vercel Blob) - modifyResponseHeaders is applied for the default local adapter, but seems to be ignored by all the others. It would add great flexibility

[kenneth-devedis]

I just revisited this issue last week and wrote a small plugin, that decorates the staticHandlers. As I understand it, these are placed on collection by the storage adapter to serve the file from external storage.

Be aware:

• This decorates all handlers of all collections (you might want to add some form of positive filter).
• I have not tested this extensively.

import { CollectionConfig, Config, PayloadRequest, Plugin, TypeWithID, UploadConfig } from 'payload'

// Payload used an inline type :(
type StaticHandler = (
  req: PayloadRequest,
  args: {
    doc: TypeWithID
    params: {
      clientUploadContext?: unknown
      collection: string
      filename: string
    }
  },
) => void | Response | Promise<void> | Promise<Response>

function decorateStaticHandlers(
  collection: CollectionConfig,
  headers: Record<string, string>,
): CollectionConfig {
  if (!collection.upload || typeof collection.upload !== 'object') return collection
  const handlers = collection.upload.handlers ?? []
  const mappedHandlers = handlers.map((handler) => decorateStaticHandler(handler, headers))
  const mappedUpload: UploadConfig = {
    ...collection.upload,
    handlers: mappedHandlers,
  }
  return { ...collection, upload: mappedUpload }
}

function decorateStaticHandler(
  innerFn: StaticHandler,
  headers: Record<string, string>,
): StaticHandler {
  return (req, args) => {
    const innerResult = innerFn(req, args)
    if (innerResult instanceof Promise) {
      return innerResult.then((awaited) => {
        if (awaited instanceof Response) {
          overrideResponseHeaders(awaited, headers)
        }
        return awaited
      })
    }
    if (innerResult instanceof Response) {
      overrideResponseHeaders(innerResult, headers)
    }
    return innerResult
  }
}

function overrideResponseHeaders(response: Response, headers: Record<string, string>) {
  Object.entries(headers).forEach(([key, value]) => response.headers.set(key, value))
}

type Args = {
  headers: Record<string, string>
}

export const staticHandlersOverrideResponseHeadersPlugin =
  ({ headers }: Args): Plugin =>
  (config: Config): Config => {
    const collections = config.collections ?? []
    const mappedCollections = collections.map((collection) =>
      decorateStaticHandlers(collection, headers),
    )
    return {
      ...config,
      collections: mappedCollections,
    }
  }

Add to plugins:

export const plugins: Plugin[] = [
  // add storage adapter before this plugin, so the staticHandlers are available
  staticHandlersOverrideResponseHeadersPlugin({
    headers: {
      'Cache-Control': 'public, max-age=31536000',
    },
  }),
]

If you find any problems with this code, please let me know.

[mt-hagen]

Hi @kenneth-devedis - thanks for the update!
I decided in the meantime to use the headers configuration of next.config.js to override the http headers.

import { withPayload } from '@payloadcms/next/withPayload';

/** @type {import('next').NextConfig} */
const nextConfig = {
    headers: async () => {
        return [
            {
                source: '/api/media/file/:path*',
                headers: [
                    {
                        key: 'cache-control',
                        value: 'public, max-age=86400',
                    },
                ],
            },
        ];
    },
};

export default withPayload(nextConfig, { devBundleServerPackages: false });

After taking a closer look, I saw that for example the S3 adapter also sets the Accept-Range header, which the GCS doesn't. This is also useful for eg. video streaming...
It would be nice if all the adapters would have more or less the same scope imo, at least it would be awesome if they would all support the modifyResponseHeaders, just as the local storage adapter... This would add much flexibility.

[kenneth-devedis]

Your solution is way cleaner. Thanks for that 👍.
Defining a set of minimal viable requirements for all official storage adapters (cache headers, video streaming, etc.) would be really helpful.