fix: i18n client caching

client/modules/localization.js

@@ -1,6 +1,7 @@
 import i18next from 'i18next'
+import Backend from 'i18next-chained-backend'
+import LocalStorageBackend from 'i18next-localstorage-backend'
 import i18nextXHR from 'i18next-xhr-backend'
-import i18nextCache from 'i18next-localstorage-cache'
 import VueI18Next from '@panter/vue-i18next'
 import _ from 'lodash'
 
@@ -12,37 +13,43 @@ export default {
   VueI18Next,
   init() {
     i18next
-      .use(i18nextXHR)
-      .use(i18nextCache)
+      .use(Backend)
       .init({
         backend: {
-          loadPath: '{{lng}}/{{ns}}',
-          parse: (data) => data,
-          ajax: (url, opts, cb, data) => {
-            let langParams = url.split('/')
-            graphQL.query({
-              query: localeQuery,
-              variables: {
-                locale: langParams[0],
-                namespace: langParams[1]
-              }
-            }).then(resp => {
-              let ns = {}
-              if (_.get(resp, 'data.localization.translations', []).length > 0) {
-                resp.data.localization.translations.forEach(entry => {
-                  _.set(ns, entry.key, entry.value)
+          backends: [
+            LocalStorageBackend,
+            i18nextXHR
+          ],
+          backendOptions: [
+            {
+              expirationTime: 1000*60*60*24 // 24h
+            },
+            {
+              loadPath: '{{lng}}/{{ns}}',
+              parse: (data) => data,
+              ajax: (url, opts, cb, data) => {
+                let langParams = url.split('/')
+                graphQL.query({
+                  query: localeQuery,
+                  variables: {
+                    locale: langParams[0],
+                    namespace: langParams[1]
+                  }
+                }).then(resp => {
+                  let ns = {}
+                  if (_.get(resp, 'data.localization.translations', []).length > 0) {
+                    resp.data.localization.translations.forEach(entry => {
+                      _.set(ns, entry.key, entry.value)
+                    })
+                  }
+                  return cb(ns, {status: '200'})
+                }).catch(err => {
+                  console.error(err)
+                  return cb(null, {status: '404'})
                 })
               }
-              return cb(ns, {status: '200'})
-            }).catch(err => {
-              console.error(err)
-              return cb(null, {status: '404'})
-            })
-          }
-        },
-        cache: {
-          enabled: true,
-          expiration: 60 * 60 * 1000
+            }
+          ]
         },
         defaultNS: 'common',
         lng: siteConfig.lang,