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>

警告

要启用 Vue 模板中 gql 字符串标签的支持，请参阅指南中的必要设置。

属性

query: GraphQL 查询（由 graphql-tag 转换）或接收 gql 标签作为参数并应返回转换后的查询的函数
variables: GraphQL 变量对象
fetchPolicy: 请参阅 apollo fetchPolicy
pollInterval: 毫秒数。轮询通过以指定的时间间隔定期执行查询，为您的服务器提供近乎实时的同步。
notifyOnNetworkStatusChange: 请参阅检查加载状态
context: 请参阅 apollo 上下文
update: 用于转换结果 data 的函数，对于选择响应的特定部分很有用。示例：:update="data => data.user.messages"
skip: 禁用查询获取的布尔值
clientId: 查询使用的 Apollo Client 的 ID（在 ApolloProvider clients 选项中定义）
deep: 使用深度 Vue 观察者的布尔值
tag: 字符串 HTML 标签名称（默认：div）；如果为假值（例如 null 或 undefined），则组件将是无渲染的（内容不会包装在标签中），在这种情况下，只会渲染第一个子节点
debounce: 用于去抖动重新获取的毫秒数（例如，当变量更改时）
throttle: 用于节流重新获取的毫秒数（例如，当变量更改时）
prefetch: 如果为 false，则会在 SSR 期间跳过预取
options: 其他 Apollo Watch Query 选项

作用域插槽

result: Apollo Query 结果
- result.data: 查询返回的数据（可以通过 update 属性进行转换）
- result.fullData: 查询返回的原始数据（未通过 update 属性进行转换）
- result.loading: 指示请求正在进行的布尔值（您可能需要设置 notifyOnNetworkStatusChange 属性才能使其更改）
- result.error: 当前结果的最终错误
- result.networkStatus: 请参阅 apollo networkStatus
query: 与组件关联的智能查询。它对于执行一些操作（如 query.refetch() 或 query.fetchMore()）很有用。
isLoading: 智能查询加载状态
gqlError: 任何 GraphQL 错误的第一个错误
times: 结果更新的次数

事件

result(resultObject)
error(errorObject)
loading(boolean)

ApolloQuery 组件 ​

属性 ​

作用域插槽 ​

事件 ​

ApolloQuery 组件

属性

作用域插槽

事件