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)