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 字符串标签的支持，请在指南中查看必要的设置。

Props

query：GraphQL 查询（由 graphql-tag 转换）或一个接收 gql 标签作为参数并返回转换后的查询的函数
variables：GraphQL 变量对象
fetchPolicy：详见 apollo fetchPolicy
pollInterval：毫秒数。通过轮询使查询以指定的间隔定期执行，来提供与服务器近乎实时的同步。
notifyOnNetworkStatusChange：详见检查加载状态
context：详见 apollo 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
query：与组件关联的智能查询，用于执行 query.refetch() 或 query.fetchMore() 之类的操作
isLoading：智能查询加载状态
gqlError：第一个 GraphQL 错误（如果有）
times：结果被更新的次数

事件

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

ApolloQuery 组件 ​

Props ​

作用域插槽 ​

事件 ​

ApolloQuery 组件

Props

作用域插槽

事件