Gestion des erreurs et intégration d'Appolo

components/btnloading.vue

 <template>
-    <button type="submit" class="btn btn-primary">
+    <button type="submit" class="btn btn-primary" :disabled="isWaiting">
         <span v-if="isWaiting">
             <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
             Chargement...

components/navmenu.vue

@@ -19,13 +19,12 @@ export default {
     data() {
         return {
             menus : [
-                {title: 'Un menu',
+                {title: 'Développement',
                 items : [
                     {path: '/explore',title: 'Explorer la toile de confiance'},
-                    {path: '/test',title: 'Test'},
-                    {path: '/coucou',title: 'Coucou'}
+                    {path: '/appolo',title: 'Appolo'}
                 ]},
-                {title: 'Un autre menu',
+                {title: 'Pages',
                 items : [
                     {path: '/hoho',title: 'Hoho'},
                     {path: '/hihi',title: 'Hihi'},

mixins/wotwizard.js

@@ -13,6 +13,8 @@ export default {
         WWZ_REQUEST_DETAILS(hint) { return `{idSearch(with:{hint:\\"${hint}\\"}){ids{pubkey,uid,status}}}` },
     },
     async fetch() {
+        this.isWaiting = true
+
         this.retour = await fetch(this.WWZ_URL, {
             method: 'POST',
             headers: {
@@ -20,17 +22,16 @@ export default {
             },
             body: '{"query":"' + this.query + '"}'
         }).then((res) => {
-            // console.log(this.query)
+            this.isWaiting = false
             return res.json()
+        }).catch((error) => {
+            this.isWaiting = false
+            return {errors: error}
         })
     },
     watch: {
       query : function() {
-        this.isWaiting = true
         this.$fetch()
-      },
-      retour : function() {
-        this.isWaiting = false
       }
     }
 }
\ No newline at end of file

nuxt.config.js

@@ -39,15 +39,24 @@ export default {
   modules: [
     // https://go.nuxtjs.dev/pwa
     '@nuxtjs/pwa',
+    '@nuxtjs/apollo',
   ],
 
   // PWA module configuration: https://go.nuxtjs.dev/pwa
   pwa: {
     manifest: {
-      lang: 'en'
+      lang: 'fr'
     }
   },
 
+  apollo: {
+    clientConfigs: {
+      default: {
+        httpEndpoint: 'https://wwgql.coinduf.eu',
+      },
+    },
+  },
+
   // Build Configuration: https://go.nuxtjs.dev/config-build
   build: {
   }

package.json

@@ -9,9 +9,11 @@
     "generate": "nuxt generate"
   },
   "dependencies": {
+    "@nuxtjs/apollo": "^4.0.1-rc.5",
     "@nuxtjs/pwa": "^3.3.5",
     "bootstrap": "^4.6.0",
     "core-js": "^3.15.1",
+    "graphql-tag": "^2.12.6",
     "nuxt": "^2.15.7"
   },
   "devDependencies": {

pages/appolo.vue

+<template>
+<main class="content">
+  <h2 class="display-2 text-center mb-5">Test Appolo</h2>
+  <div class="row">
+    <div class="col-6 m-auto text-center">
+      Hello Appolo
+      <ApolloQuery :query="query">
+        <!-- The result will automatically updated -->
+        <template slot-scope="{ result: { data, loading } }">
+          <!-- Some content -->
+          <div v-if="loading">Loading...</div>
+          <p v-else>
+            {{ data }}
+          </p>
+        </template>
+      </ApolloQuery>
+    </div>
+  </div>
+</main>
+</template>
+
+<script>
+import gql from 'graphql-tag'
+
+
+export default {
+  data() {
+    return {
+      // Fil d'ariane
+      breadcrumb: [
+        {
+          text: 'Accueil',
+          to: '/'
+        },
+        {
+          text: 'Appolo',
+          active: true
+        }
+      ],
+      query: gql`{version}`
+    }
+  },
+  methods: {
+    // Fonctions locales
+  },
+  mounted () {
+    // Mise à jour du fil d'ariane au chargement
+    $nuxt.$emit('changeRoute',this.breadcrumb)
+  }
+}
+</script>
+
+<style lang="sass" scoped>
+
+
+</style>
\ No newline at end of file

pages/explore.vue

@@ -6,7 +6,7 @@
       <form @submit.prevent="refresh" class="mb-5">
         <div class="mb-3">
           <label for="rech" class="form-label">Votre recherche</label>
-          <input type="text" class="form-control" id="rech" aria-describedby="rechHelp">
+          <input type="text" class="form-control" id="rech" aria-describedby="rechHelp" v-model="search">
           <small id="rechHelp" class="form-text text-muted">Saisissez le début d'un pseudo ou d'une clé publique</small>
         </div>
         <btnloading :isWaiting="isWaiting"/>
@@ -62,14 +62,13 @@ export default {
           text: 'Explorer la wot',
           active: true
         }
-      ]
+      ],
+      search : ""
     }
   },
   methods: {
     refresh() {
-      let rech = document.querySelector('#rech').value
-      rech = this.WWZ_REQUEST_DETAILS(rech)
-      this.query = rech
+      this.query = this.WWZ_REQUEST_DETAILS(this.search)
     }
   },
   mounted () {