Files
payload/packages/storage-gcs/src/staticHandler.ts
Paul ef90ebb395 feat(storage-*): add support for browser-based caching via etags (#10014)
This PR makes changes to every storage adapter in order to add
browser-based caching by returning etags, then checking for them into
incoming requests and responding a status code of `304` so the data
doesn't have to be returned again.

Performance improvements for cached subsequent requests:

![image](https://github.com/user-attachments/assets/e51b812c-63a0-4bdb-a396-0f172982cb07)


This respects `disableCache` in the dev tools.



Also fixes a bug with getting the latest image when using the Vercel
Blob Storage adapter.
2024-12-18 15:54:36 -05:00

66 lines
2.1 KiB
TypeScript

import type { Storage } from '@google-cloud/storage'
import type { StaticHandler } from '@payloadcms/plugin-cloud-storage/types'
import type { CollectionConfig } from 'payload'
import { getFilePrefix } from '@payloadcms/plugin-cloud-storage/utilities'
import path from 'path'
interface Args {
bucket: string
collection: CollectionConfig
getStorageClient: () => Storage
}
export const getHandler = ({ bucket, collection, getStorageClient }: Args): StaticHandler => {
return async (req, { params: { filename } }) => {
try {
const prefix = await getFilePrefix({ collection, filename, req })
const file = getStorageClient().bucket(bucket).file(path.posix.join(prefix, filename))
const [metadata] = await file.getMetadata()
const etagFromHeaders = req.headers.get('etag') || req.headers.get('if-none-match')
const objectEtag = metadata.etag
if (etagFromHeaders && etagFromHeaders === objectEtag) {
return new Response(null, {
headers: new Headers({
'Content-Length': String(metadata.size),
'Content-Type': String(metadata.contentType),
ETag: String(metadata.etag),
}),
status: 304,
})
}
// Manually create a ReadableStream for the web from a Node.js stream.
const readableStream = new ReadableStream({
start(controller) {
const nodeStream = file.createReadStream()
nodeStream.on('data', (chunk) => {
controller.enqueue(new Uint8Array(chunk))
})
nodeStream.on('end', () => {
controller.close()
})
nodeStream.on('error', (err) => {
controller.error(err)
})
},
})
return new Response(readableStream, {
headers: new Headers({
'Content-Length': String(metadata.size),
'Content-Type': String(metadata.contentType),
ETag: String(metadata.etag),
}),
status: 200,
})
} catch (err: unknown) {
req.payload.logger.error(err)
return new Response('Internal Server Error', { status: 500 })
}
}
}