简介

什么是 Apollo 组件？

这些组件与其他组件一样。它们在它们的 prop 中接受一个 GraphQL 文档，并使用 作用域插槽功能 传递结果。

好处是，您可以直接在模板中使用这些组件，而不是使用组件的 apollo 选项。在某些情况下，您甚至不需要在您的 .vue 中添加任何脚本部分！这更具声明性。

以下是一个在模板中使用 ApolloQuery 的快速示例

<template>
  <!-- Apollo Query -->
  <ApolloQuery
    :query="/* some query */"
    v-slot="{ result: { data, loading } }"
  >
    <!-- The result will automatically updated -->
    <div v-if="loading">Loading...</div>
    <ul v-else>
      <li v-for="user of data.users" class="user">
        {{ user.name }}
      </li>
    </ul>
  </ApolloQuery>
</template>

<!-- No need for script -->