Browse Source

apollo persist

master
Tu Nombre 2 months ago
parent
commit
25452955ff
7 changed files with 98 additions and 71 deletions
  1. 1
    0
      package.json
  2. 6
    0
      pnpm-lock.yaml
  3. 25
    16
      public/index.html
  4. 17
    9
      src/apollo.js
  5. 44
    43
      src/main.js
  6. 2
    0
      src/sw.js
  7. 3
    3
      vue.config.js

+ 1
- 0
package.json View File

@@ -10,6 +10,7 @@
10 10
   },
11 11
   "dependencies": {
12 12
     "apollo-cache-inmemory": "^1.5.1",
13
+    "apollo-cache-persist": "^0.1.1",
13 14
     "apollo-client": "^2.5.1",
14 15
     "apollo-link": "^1.2.11",
15 16
     "apollo-link-batch-http": "^1.2.11",

+ 6
- 0
pnpm-lock.yaml View File

@@ -1,5 +1,6 @@
1 1
 dependencies:
2 2
   apollo-cache-inmemory: 1.5.1
3
+  apollo-cache-persist: 0.1.1
3 4
   apollo-client: 2.5.1
4 5
   apollo-link: 1.2.11
5 6
   apollo-link-batch-http: 1.2.11
@@ -1324,6 +1325,10 @@ packages:
1324 1325
       graphql: 0.11.7 || ^0.12.0 || ^0.13.0 || ^14.0.0
1325 1326
     resolution:
1326 1327
       integrity: sha512-D3bdpPmWfaKQkWy8lfwUg+K8OBITo3sx0BHLs1B/9vIdOIZ7JNCKq3EUcAgAfInomJUdN0QG1yOfi8M8hxkN1g==
1328
+  /apollo-cache-persist/0.1.1:
1329
+    dev: false
1330
+    resolution:
1331
+      integrity: sha512-/7GAyblPR169ryW3ugbtHqiU0UGkhIt10NeaO2gn2ClxjLHF/nIkJD5mx/0OCF2vLNbbnzLZVDeIO1pf72TrEA==
1327 1332
   /apollo-cache/1.2.1:
1328 1333
     dependencies:
1329 1334
       apollo-utilities: 1.2.1
@@ -8126,6 +8131,7 @@ specifiers:
8126 8131
   '@vue/cli-plugin-babel': ^3.7.0
8127 8132
   '@vue/cli-service': ^3.7.0
8128 8133
   apollo-cache-inmemory: ^1.5.1
8134
+  apollo-cache-persist: ^0.1.1
8129 8135
   apollo-client: ^2.5.1
8130 8136
   apollo-link: ^1.2.11
8131 8137
   apollo-link-batch-http: ^1.2.11

+ 25
- 16
public/index.html View File

@@ -1,31 +1,40 @@
1 1
 <!DOCTYPE html>
2 2
 <html lang="es">
3 3
   <head>
4
-    <meta charset="utf-8">
5
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
4
+    <meta charset="utf-8" />
5
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
8 8
     <link rel="preconnect" href="<%= VUE_APP_GRAPHQL_URL %>" />
9
-    <meta name="Description" content="Una herramienta para facilitar el manejo de tareas escolares de forma grupal.">
9
+    <meta
10
+      name="Description"
11
+      content="Una herramienta para facilitar el manejo de tareas escolares de forma grupal."
12
+    />
10 13
     <title>Manejador de Tareas</title>
11 14
     <!-- lo importamos acá xq macri gato -->
12 15
     <% if (NODE_ENV === 'production') { %>
13
-      <script src="<%= BASE_URL %>lib/papas-dia.min.js"></script>
14
-      <script>
15
-        window.PapasDia('<%= VUE_APP_PAPAS_DIA_URL %>', 'ninty_web', <%= VUE_APP_DEBUG %>)
16
-      </script>
16
+    <script src="<%= BASE_URL %>lib/papas-dia.min.js"></script>
17
+    <script>
18
+      window.PapasDia('<%= VUE_APP_PAPAS_DIA_URL %>', 'ninty_web', <%= VUE_APP_DEBUG %>)
19
+    </script>
20
+    <% } %> <% if (NODE_ENV === 'development') { %>
21
+    <script src="http://192.168.86.222:8098"></script>
17 22
     <% } %>
18
-    <% if (NODE_ENV === 'development') { %>
19
-      <script src="http://192.168.86.222:8098"></script>
20
-    <% } %>
21
-    <link rel="icon" type="image/svg+xml" href="<%= BASE_URL %>img/icons/logo.optim.svg">
22
-    <link rel="manifest" href="<%= BASE_URL %>manifest.webmanifest">
23
+    <link
24
+      rel="icon"
25
+      type="image/svg+xml"
26
+      href="<%= BASE_URL %>img/icons/logo.optim.svg"
27
+    />
28
+    <link rel="manifest" href="<%= BASE_URL %>manifest.webmanifest" />
23 29
   </head>
24 30
   <body>
25 31
     <noscript>
26
-      <strong>We're sorry but web doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
32
+      <strong
33
+        >We're sorry but web doesn't work properly without JavaScript enabled.
34
+        Please enable it to continue.</strong
35
+      >
27 36
     </noscript>
28
-    <div id="app"></div>
37
+    <div id="app"><div id="loading">cargando...</div></div>
29 38
     <!-- built files will be auto injected -->
30 39
   </body>
31 40
 </html>

+ 17
- 9
src/apollo.js View File

@@ -1,16 +1,24 @@
1 1
 import { ApolloClient } from 'apollo-client'
2 2
 import { BatchHttpLink } from 'apollo-link-batch-http'
3 3
 import { InMemoryCache } from 'apollo-cache-inmemory'
4
+import { persistCache } from 'apollo-cache-persist'
4 5
 
5
-const batchHttpLink = new BatchHttpLink({
6
-  uri: process.env.VUE_APP_GRAPHQL_URL,
7
-})
6
+export default async function createClient() {
7
+  const batchHttpLink = new BatchHttpLink({
8
+    uri: process.env.VUE_APP_GRAPHQL_URL,
9
+  })
8 10
 
9
-const cache = new InMemoryCache()
11
+  const cache = new InMemoryCache()
10 12
 
11
-const apolloClient = new ApolloClient({
12
-  link: batchHttpLink,
13
-  cache,
14
-})
13
+  await persistCache({
14
+    cache,
15
+    storage: window.localStorage,
16
+  })
15 17
 
16
-export default apolloClient
18
+  const apolloClient = new ApolloClient({
19
+    link: batchHttpLink,
20
+    cache,
21
+  })
22
+
23
+  return apolloClient
24
+}

+ 44
- 43
src/main.js View File

@@ -6,7 +6,7 @@ import runtime from 'serviceworker-webpack-plugin/lib/runtime'
6 6
 
7 7
 import App from './App.vue'
8 8
 import router from './router'
9
-import apolloClient from './apollo'
9
+import createApolloClient from './apollo'
10 10
 
11 11
 import { messages, dateTimeFormats, hawt } from '@/i18n'
12 12
 
@@ -15,53 +15,54 @@ if ('serviceWorker' in navigator) {
15 15
 }
16 16
 
17 17
 window.__VUE_ROUTER = router
18
+;(async () => {
19
+  Vue.use(VueApollo)
20
+  Vue.use(Snotify, {
21
+    toast: {
22
+      position: SnotifyPosition.centerBottom,
23
+      titleMaxLength: 32,
24
+      timeout: 3000,
25
+      showProgressBar: false,
26
+      closeOnClick: true,
27
+      pauseOnHover: false,
28
+    },
29
+  })
30
+  Vue.use(VueI18n)
18 31
 
19
-Vue.use(VueApollo)
20
-Vue.use(Snotify, {
21
-  toast: {
22
-    position: SnotifyPosition.centerBottom,
23
-    titleMaxLength: 32,
24
-    timeout: 3000,
25
-    showProgressBar: false,
26
-    closeOnClick: true,
27
-    pauseOnHover: false,
28
-  },
29
-})
30
-Vue.use(VueI18n)
31
-
32
-const apolloProvider = new VueApollo({
33
-  defaultClient: apolloClient,
34
-  defaultOptions: {
35
-    $query: {
36
-      error(error) {
37
-        if (
38
-          !(
39
-            error.graphQLErrors &&
40
-            error.graphQLErrors[0] &&
41
-            error.graphQLErrors[0].name === 'GroupWrongSecret'
32
+  const apolloProvider = new VueApollo({
33
+    defaultClient: await createApolloClient(),
34
+    defaultOptions: {
35
+      $query: {
36
+        error(error) {
37
+          if (
38
+            !(
39
+              error.graphQLErrors &&
40
+              error.graphQLErrors[0] &&
41
+              error.graphQLErrors[0].name === 'GroupWrongSecret'
42
+            )
42 43
           )
43
-        )
44
-          console.error(error)
45
-        this.error = error
44
+            console.error(error)
45
+          this.error = error
46
+        },
46 47
       },
47 48
     },
48
-  },
49
-})
49
+  })
50 50
 
51
-const i18n = new VueI18n({
52
-  locale: localStorage.lang || navigator.language.match(/(.*)-.+/)[1],
53
-  fallbacklocale: 'es',
54
-  messages,
55
-  dateTimeFormats,
56
-})
51
+  const i18n = new VueI18n({
52
+    locale: localStorage.lang || navigator.language.match(/(.*)-.+/)[1],
53
+    fallbacklocale: 'es',
54
+    messages,
55
+    dateTimeFormats,
56
+  })
57 57
 
58
-Vue.config.productionTip = false
58
+  Vue.config.productionTip = false
59 59
 
60
-hawt(i18n)
60
+  hawt(i18n)
61 61
 
62
-new Vue({
63
-  router,
64
-  apolloProvider,
65
-  render: h => h(App),
66
-  i18n,
67
-}).$mount('#app')
62
+  new Vue({
63
+    router,
64
+    apolloProvider,
65
+    render: h => h(App),
66
+    i18n,
67
+  }).$mount('#app')
68
+})()

+ 2
- 0
src/sw.js View File

@@ -11,8 +11,10 @@ self.addEventListener('install', e => {
11 11
 })
12 12
 
13 13
 self.addEventListener('fetch', event => {
14
+  console.log('serving from sw:', event.request.url)
14 15
   event.respondWith(
15 16
     caches.match(event.request).then(response => {
17
+      if (response) console.log('serving from cache:', event.request.url)
16 18
       return response || fetch(event.request)
17 19
     }),
18 20
   )

+ 3
- 3
vue.config.js View File

@@ -35,6 +35,9 @@ module.exports = {
35 35
   publicPath: process.env.VUE_APP_BASE_URL || '/',
36 36
   configureWebpack: {
37 37
     plugins: [
38
+      new ServiceWorkerWebpackPlugin({
39
+        entry: path.join(__dirname, 'src/sw.js'),
40
+      }),
38 41
       ...(process.env.NODE_ENV === 'production'
39 42
         ? [
40 43
             ...(process.env.TEST_BUILD !== 'yes'
@@ -51,9 +54,6 @@ module.exports = {
51 54
                   new BrotliPlugin(),
52 55
                 ]
53 56
               : []),
54
-            new ServiceWorkerWebpackPlugin({
55
-              entry: path.join(__dirname, 'src/sw.js'),
56
-            }),
57 57
           ]
58 58
         : []),
59 59
     ],

Loading…
Cancel
Save