Gao Yingjian
f62d4fbc8d
* docs: sync Chinese doc to 3.0.0-rc.1 * docs: sync Chinese doc to 3.0.0-rc.2
70 lines
3.3 KiB
Markdown
70 lines
3.3 KiB
Markdown
# ApolloQuery 组件
|
||
|
||
示例：
|
||
|
||
```vue
|
||
<ApolloQuery
|
||
:query="gql => gql`
|
||
query MyHelloQuery ($name: String!) {
|
||
hello (name: $name)
|
||
}
|
||
`"
|
||
:variables="{ name }"
|
||
>
|
||
<template v-slot="{ result: { error, data }, isLoading }">
|
||
<!-- Loading -->
|
||
<div v-if="isLoading" class="loading apollo">Loading...</div>
|
||
|
||
<!-- Error -->
|
||
<div v-else-if="error" class="error apollo">An error occurred</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>
|
||
```
|
||
|
||
::: warning
|
||
要在 Vue 模板中启用对 `gql` 字符串标签的支持，请在 [指南](../guide/components/query.md#tag-setup) 中查看必要的设置。
|
||
:::
|
||
|
||
## Props
|
||
|
||
- `query`：GraphQL 查询（由 `graphql-tag` 转换）或一个接收 `gql` 标签作为参数并返回转换后的查询的函数
|
||
- `variables`：GraphQL 变量对象
|
||
- `fetchPolicy`：详见 [apollo fetchPolicy](https://www.apollographql.com/docs/react/basics/queries.html#graphql-config-options-fetchPolicy)
|
||
- `pollInterval`：详见 [apollo pollInterval](https://www.apollographql.com/docs/react/basics/queries.html#graphql-config-options-pollInterval)
|
||
- `notifyOnNetworkStatusChange`：详见 [apollo notifyOnNetworkStatusChange](https://www.apollographql.com/docs/react/basics/queries.html#graphql-config-options-notifyOnNetworkStatusChange)
|
||
- `context`：详见 [apollo context](https://www.apollographql.com/docs/react/basics/queries.html#graphql-config-options-context)
|
||
- `update`：用于转换结果 `data` 的函数，用于在响应中选择特定部分。示例：`:update="data => data.user.messages"`
|
||
- `skip`：布尔值，禁用查询获取
|
||
- `clientId`：查询所使用的 Apollo 客户端 id（在 ApolloProvider 的 `clients` 选项中定义）
|
||
- `deep`：布尔值，使用深度 Vue 侦听器
|
||
- `tag`：字符串，HTML 标签名（默认值：`div`）；如果是假值（如 `null` 或 `undefined`），该组件将成为无渲染组件（内容不会被包装在标签中），在这种情况下，只有第一个子元素会被渲染
|
||
- `debounce`：对重新获取查询结果的防抖毫秒数（例如当变量更改时）
|
||
- `throttle`：对重新获取查询结果的节流毫秒数（例如当变量更改时）
|
||
- `prefetch`：如为 `false`，将跳过 SSR 期间的预取
|
||
- `options`：其他可用的 Apollo 监听查询选项
|
||
|
||
## 作用域插槽
|
||
|
||
- `result`：Apollo 查询结果
|
||
- `result.data`：查询返回的数据（可使用 `update` 属性转换）
|
||
- `result.fullData`：查询返回的原始数据（未使用 `update` 属性转换）
|
||
- `result.loading`：布尔值，表明请求正在进行中（你可能需要设置 `notifyOnNetworkStatusChange` 属性来修改它）
|
||
- `result.error`：当前结果的最终错误
|
||
- `result.networkStatus`：详见 [apollo networkStatus](https://www.apollographql.com/docs/react/basics/queries.html#graphql-query-data-networkStatus)
|
||
- `query`：与组件关联的智能查询，用于执行 `query.refetch()` 或 `query.fetchMore()` 之类的操作
|
||
- `isLoading`：智能查询加载状态
|
||
- `gqlError`：第一个 GraphQL 错误（如果有）
|
||
- `times`：结果被更新的次数
|
||
|
||
## 事件
|
||
|
||
- `result(resultObject)`
|
||
- `error(errorObject)`
|
||
- `loading(boolean)`
|