# ApolloQuery 组件
示例:
<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
字符串标签的支持,请在 指南 中查看必要的设置。
# Props
query
:GraphQL 查询(由graphql-tag
转换)或一个接收gql
标签作为参数并返回转换后的查询的函数variables
:GraphQL 变量对象fetchPolicy
:详见 apollo fetchPolicy (opens new window)pollInterval
:毫秒数。通过轮询使查询以指定的间隔定期执行,来提供与服务器近乎实时的同步。notifyOnNetworkStatusChange
:详见 检查加载状态 (opens new window)context
:详见 apollo context (opens new window)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 (opens new window)
query
:与组件关联的智能查询,用于执行query.refetch()
或query.fetchMore()
之类的操作isLoading
:智能查询加载状态gqlError
:第一个 GraphQL 错误(如果有)times
:结果被更新的次数
# 事件
result(resultObject)
error(errorObject)
loading(boolean)