Append hash to bust cache on all static resources (#10411)

* append hash to bust cache on all static resources * better cache busting in the studio * bug fix for new scenes * clean URLs
EtherealEngine · Jun 20, 2024 · be3ac39 · be3ac39
1 parent 1a84f66
commit be3ac39
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 11 deletions.
diff --git a/packages/editor/src/components/Editor2Container.tsx b/packages/editor/src/components/Editor2Container.tsx
@@ -131,7 +131,7 @@ const EditorContainer = () => {
     projectName.set(scene.project!)
     sceneName.set(scene.key.split('/').pop() ?? null)
     sceneAssetID.set(sceneQuery[0].id)
-    return setCurrentEditorScene(scene.key, scene.id as EntityUUID)
+    return setCurrentEditorScene(scene.url, scene.id as EntityUUID)
   }, [sceneQuery[0]?.key])
 
   useEffect(() => {

diff --git a/packages/editor/src/components/EditorContainer.tsx b/packages/editor/src/components/EditorContainer.tsx
@@ -416,7 +416,7 @@ const EditorContainer = () => {
     projectName.set(scene.project!)
     sceneName.set(scene.key.split('/').pop() ?? null)
     sceneAssetID.set(sceneQuery[0].id)
-    return setCurrentEditorScene(scene.key, scene.id as EntityUUID)
+    return setCurrentEditorScene(scene.url, scene.id as EntityUUID)
   }, [sceneQuery[0]?.key])
 
   useEffect(() => {

diff --git a/packages/editor/src/components/properties/SceneSettingsEditor.tsx b/packages/editor/src/components/properties/SceneSettingsEditor.tsx
@@ -83,7 +83,10 @@ export const SceneSettingsEditor: EditorComponentType = (props) => {
     const currentSceneDirectory = getState(EditorState).scenePath!.split('/').slice(0, -1).join('/')
     const { promises } = uploadProjectFiles(projectName, [state.thumbnail.value], [currentSceneDirectory])
     const [[savedThumbnailURL]] = await Promise.all(promises)
-    commitProperty(SceneSettingsComponent, 'thumbnailURL')(savedThumbnailURL)
+    const cleanURL = new URL(savedThumbnailURL)
+    cleanURL.hash = ''
+    cleanURL.search = ''
+    commitProperty(SceneSettingsComponent, 'thumbnailURL')(cleanURL.href)
     state.merge({
       thumbnailURL: null,
       thumbnail: null,
@@ -129,7 +132,10 @@ export const SceneSettingsEditor: EditorComponentType = (props) => {
 
     const [[envmapURL], [loadingScreenURL]] = await Promise.all(promises.promises)
 
-    commitProperty(SceneSettingsComponent, 'loadingScreenURL')(loadingScreenURL)
+    const cleanURL = new URL(loadingScreenURL)
+    cleanURL.hash = ''
+    cleanURL.search = ''
+    commitProperty(SceneSettingsComponent, 'loadingScreenURL')(cleanURL.href)
     state.merge({
       loadingScreenURL: null,
       loadingScreenImageData: null,

diff --git a/packages/editor/src/functions/sceneFunctions.tsx b/packages/editor/src/functions/sceneFunctions.tsx
@@ -114,7 +114,10 @@ export const saveSceneGLTF = async (
 
   const [[newPath]] = await Promise.all(uploadProjectFiles(projectName, [file], [currentSceneDirectory]).promises)
 
-  const assetURL = newPath.replace(fileServer, '').slice(1) // remove leading slash
+  const newURL = new URL(newPath)
+  newURL.hash = ''
+  newURL.search = ''
+  const assetURL = newURL.href.replace(fileServer, '').slice(1) // remove leading slash
 
   if (sceneAssetID) {
     if (getState(EditorState).scenePath !== newPath) {
@@ -156,7 +159,7 @@ export const onNewScene = async (
       type: 'scene',
       body: templateURL,
       path: 'public/scenes/New-Scene.gltf',
-      thumbnailKey: templateURL.replace('.gltf', '.thumbnail.jpg'),
+      thumbnailKey: templateURL.replace(config.client.fileServer, '').replace('.gltf', '.thumbnail.jpg'),
       unique: true
     })
     if (!sceneData) return
@@ -174,7 +177,7 @@ export const onNewScene = async (
 }
 
 export const setCurrentEditorScene = (sceneURL: string, uuid: EntityUUID) => {
-  const gltfEntity = GLTFSourceState.load(fileServer + '/' + sceneURL, uuid)
+  const gltfEntity = GLTFSourceState.load(sceneURL, uuid)
   getMutableComponent(Engine.instance.viewerEntity, SceneComponent).children.merge([gltfEntity])
   getMutableState(EditorState).rootEntity.set(gltfEntity)
   return () => {

diff --git a/packages/editor/src/functions/uploadEnvMapBake.ts b/packages/editor/src/functions/uploadEnvMapBake.ts
@@ -120,7 +120,11 @@ export const uploadBPCEMBakeToServer = async (entity: Entity) => {
     await uploadProjectFiles(projectName, [new File([envmap], filename)], [currentSceneDirectory]).promises[0]
   )[0]
 
-  setComponent(entity, EnvMapBakeComponent, { envMapOrigin: url })
+  const cleanURL = new URL(url)
+  cleanURL.hash = ''
+  cleanURL.search = ''
+
+  setComponent(entity, EnvMapBakeComponent, { envMapOrigin: cleanURL.href })
 }
 
 /** @todo replace resolution with LODs */

diff --git a/packages/server-core/src/media/static-resource/static-resource.resolvers.ts b/packages/server-core/src/media/static-resource/static-resource.resolvers.ts
@@ -63,18 +63,37 @@ export const staticResourceDbToSchema = (rawData: StaticResourceDatabaseType): S
   }
 }
 
+/**
+ * the first few characters of resources hashes are appended as a version identifier to allow for cache busting
+ */
+
 export const staticResourceResolver = resolve<StaticResourceType, HookContext>(
   {
     createdAt: virtual(async (staticResource) => fromDateTimeSql(staticResource.createdAt)),
     updatedAt: virtual(async (staticResource) => fromDateTimeSql(staticResource.updatedAt)),
     url: virtual(async (staticResource, context) => {
       const storageProvider = getStorageProvider()
-      return storageProvider.getCachedURL(staticResource.key, context.params.isInternal)
+      return (
+        storageProvider.getCachedURL(staticResource.key, context.params.isInternal) +
+        '?hash=' +
+        staticResource.hash.slice(0, 6)
+      )
     }),
     thumbnailURL: virtual(async (staticResource, context) => {
       if (!staticResource.thumbnailKey) return
       const storageProvider = getStorageProvider()
-      return storageProvider.getCachedURL(staticResource.thumbnailKey, context.params.isInternal)
+      /** @todo optimize this */
+      const thumbnailStaticResource = await context.app.service('static-resource').find({
+        query: {
+          key: staticResource.thumbnailKey
+        }
+      })
+      if (!thumbnailStaticResource.data.length) return
+      return (
+        storageProvider.getCachedURL(staticResource.thumbnailKey, context.params.isInternal) +
+        '?hash=' +
+        thumbnailStaticResource.data[0].hash.slice(0, 6)
+      )
     })
   },
   {

diff --git a/packages/ui/src/components/editor/properties/scene/settings/index.tsx b/packages/ui/src/components/editor/properties/scene/settings/index.tsx
@@ -135,7 +135,10 @@ export const SceneSettingsEditor: EditorComponentType = (props) => {
 
     const [[envmapURL], [loadingScreenURL]] = await Promise.all(promises.promises)
 
-    commitProperty(SceneSettingsComponent, 'loadingScreenURL')(loadingScreenURL)
+    const cleanURL = new URL(loadingScreenURL)
+    cleanURL.hash = ''
+    cleanURL.search = ''
+    commitProperty(SceneSettingsComponent, 'loadingScreenURL')(cleanURL.href)
     state.merge({
       loadingScreenURL: null,
       loadingScreenImageData: null,