高英健
906975e45b
* docs: structure of Chinese doc * docs: translate root page to Chinese * docs: translate pages in `/guide` and `/guid/apollo` to Chinese * docs: translate pages in `/api` and `/migration` to Chinese - fix some words in completed pages * docs: translate pages in `/guide/components` to Chinese * docs: fix some words * docs: keep Chinese version up to date * docs: Chinese version up to date * docs: fix some words * docs: fix some words
29 lines
746 B
Markdown
29 lines
746 B
Markdown
# ApolloQuery
|
|
|
|
你可以使用 `ApolloQuery`（或 `apollo-query`）组件直接在模板中侦听 Apollo 查询。
|
|
|
|
这是一个简单的例子：
|
|
|
|
```vue
|
|
<ApolloQuery
|
|
:query="require('../graphql/HelloWorld.gql')"
|
|
:variables="{ name }"
|
|
>
|
|
<template slot-scope="{ result: { loading, error, data } }">
|
|
<!-- Loading -->
|
|
<div v-if="loading" class="loading apollo">Loading...</div>
|
|
|
|
<!-- Error -->
|
|
<div v-else-if="error" class="error apollo">An error occured</div>
|
|
|
|
<!-- Result -->
|
|
<div v-else-if="data" class="result apollo">{{ data.hello }}</div>
|
|
|
|
<!-- No result -->
|
|
<div v-else class="no-result apollo">No result :(</div>
|
|
</template>
|
|
</ApolloQuery>
|
|
```
|
|
|
|
更多参见 [API 参考](../../api/apollo-query.md).
|