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:  This respects `disableCache` in the dev tools. Also fixes a bug with getting the latest image when using the Vercel Blob Storage adapter.
66 lines
2.1 KiB
TypeScript
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 })
|
|
}
|
|
}
|
|
}
|