Cache JSON data
Related to gitlab-org/gitlab#349613 (closed)
This is a second try after reverting https://gitlab.com/gitlab-org/growth/product-intelligence/metric-dictionary/-/merge_requests/21.
The original MR loaded the data/manifest.json
file using:
import dataManifest from '@/static/data/manifest.json'
This import was being cached, and after reloading the data files, the manifest was not getting updated. So the data URLs were malformed. To fix this, I'm explicitly busting the cache for this file (changes at https://gitlab.com/gitlab-org/growth/product-intelligence/metric-dictionary/-/merge_requests/22/diffs?commit_id=ab31b89ac354cf7257002507a4bf36a77aae4455).
How to set up and validate locally
- Comment items in the
SERVICE_PING_METRIC_FOLDERS
array atlib/loader.rb
and runbin/seed
to simulate changes in the data that would generate a different hash. - Build the JSON data and print the current hash:
bin/build && cat web/static/data/manifest.json
- Restart the built-in server in production mode. On
/web
. This replicates ourdeploy
job.yarn build && yarn generate && yarn start
- In the browser, verify that the request for
/data/manifest.json
returns the same hashes as seen on step #2. - In the browser, verify that the data files are properly cached, until the data changes.
- Repeat the steps generating different hashes, and the manifest should be up-to-date every time.
How to replicate the former error
Follow the same steps above after making the following changes to the code (going back to the former method of loading the manifest):
--- a/web/pages/index.vue
+++ b/web/pages/index.vue
@@ -3,6 +3,7 @@ import { GlLabel, GlButton } from '@gitlab/ui'
import DataTable from '@/mixins/data-table'
import LocalStorage from '@/mixins/local-storage'
import getDataManifest from '@/assets/get-data-manifest'
+import dataManifest from '@/static/data/manifest.json'
export default {
name: 'ServicePingPage',
@@ -219,7 +220,7 @@ export default {
created() {
this.dataUrl = new URL(
- `data/service_ping.${this.dataManifest.service_ping}.json`,
+ `data/service_ping.${dataManifest.service_ping}.json`,
location.origin
).toString()
},
Edited by Axel García