From 8b4aa7d0d2649ed167f852685cc38d7d137cd8fd Mon Sep 17 00:00:00 2001
From: Guillaume Chau <alphadelta.fg@gmail.com>
Date: Fri, 29 Nov 2019 16:51:40 +0100
Subject: [PATCH] docs(useQuery): improvements

---
 packages/docs/src/guide-composable/query.md | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/docs/src/guide-composable/query.md b/packages/docs/src/guide-composable/query.md
index bcc6267..e434972 100644
--- a/packages/docs/src/guide-composable/query.md
+++ b/packages/docs/src/guide-composable/query.md
@@ -167,7 +167,9 @@ Beware that `result` may not contain your data! At the beginning, it will be `un
 </template>
 ```
 
-## Loading & Error state
+## Query status
+
+### Loading state
 
 Alongside `result`, `useQuery` returns `loading` which is a boolean `Ref`, so you can track the loading state of the query:
 
@@ -208,6 +210,8 @@ export default {
 </template>
 ```
 
+### Error
+
 There is also an `error` `Ref` that stores any error that may occur:
 
 ```vue{7,21,30}
@@ -258,15 +262,14 @@ A sister composition function `useResult` is available alongside `userQuery` to
 
 The first useful feature of `useResult` is picking one object from the result data. To do so, pass the `result` data as the first parameter, and a picking function as the third parameter:
 
-```vue{3,19,22,32,33}
+```vue{2,18,21,34,35}
 <script>
-import { computed } from '@vue/composition-api'
 import { useQuery, useResult } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 
 export default {
   setup () {
-    const { result, loading } = useQuery(gql`
+    const { result, loading, error } = useQuery(gql`
       query getUsers {
         users {
           id
@@ -282,6 +285,7 @@ export default {
     return {
       users,
       loading,
+      error,
     }
   },
 }
@@ -290,6 +294,8 @@ export default {
 <template>
   <div v-if="loading">Loading...</div>
 
+  <div v-else-if="error">Error: {{ error.message }}</div>
+
   <ul v-else-if="users">
     <li v-for="user of users" :key="user.id">
       {{ user.firstname }} {{ user.lastname }}