repare apollo query

pages/appolo.vue

 <template>
-<main class="container-fluid">
+<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">
       <p>Cette page uilise la bibliothèque <a href="https://apollo.vuejs.org/" target="_blank">Apollo</a> pour requêter graphQL</p>
       <p>Le endpoint se configure dans le fichier <code>./nuxt.config.js</code></p>
       <p>Il est possible de <a href="https://apollo.vuejs.org/guide/components/query.html#query-with-gql-files" target="_blank">mettre les requêtes dans des fichiers séparés</a> et de faire <a href="https://apollo.vuejs.org/guide/apollo/pagination.html" target="_blank">de la pagination</a></p>
-      <input type="text" v-model="param">
-      <div>
-        {{ marequete }}
+      <input type="text" v-model="param" class="mb-4">
+    </div>
+  </div>
+  <div class="spinner-border text-primary mx-auto d-block mb-3" role="status" v-if="$apollo.queries.idSearch.loading">
+    <span class="sr-only">Loading...</span>
+  </div>
+  <div class="row" v-if="idSearch && !$apollo.queries.idSearch.loading && param.length > 2">
+    <div class="col-8 m-auto">
+      <div class="table-responsive">
+        <table class="table striped">
+          <thead class="thead-light">
+            <tr>
+              <th scope="col">UID</th>
+              <th scope="col" class="d-none d-xl-table-cell">PUBKEY</th>
+              <th scope="col" class="d-none d-sm-table-cell">STATUS</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="member in idSearch.ids" :key="member.uid"
+              :class="{
+                'table-danger' : member.status == 'REVOKED',
+                'table-success' : member.status == 'MEMBER',
+                'table-info' : member.status == 'NEWCOMER',
+                'table-warning' : member.status == 'MISSING',
+            }">
+              <th scope="row">{{ member.uid }}</th>
+              <td class="d-none d-xl-table-cell">{{ member.pubkey }}</td>
+              <td class="d-none d-sm-table-cell">{{ member.status }}</td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     </div>
   </div>
@@ -42,17 +70,19 @@ export default {
   methods: {
   },
   apollo: {
-    marequete : {
-      query: gql`query Search($hint: String) {
-            idSearch(with: {hint: $hint}) {
-              ids {
-                pubkey
-                uid
-                status
-              }
-            }
-          } `,
-      variables(){return {hint:this.param}}
+    idSearch : {
+      query: gql`
+      query Search($hint: String) {
+        idSearch(with: {hint: $hint}) {
+          ids {
+            pubkey
+            uid
+            status
+          }
+        }
+      } `,
+      variables(){return {hint:this.param}},
+      skip() {return this.param.length < 3}
     } 
   },
   mounted () {