docs(useQuery): improvements

This commit is contained in:
Guillaume Chau
2019-11-29 16:51:40 +01:00
parent e77518adba
commit 8b4aa7d0d2
+10 -4
View File
@@ -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 }}