什么是 Apollo 组件?

这些组件就像其他组件一样。它们在 prop 中使用 GraphQL 文档,并使用 作用域插槽功能 来传递结果。

这样做的好处是你可以直接在模板中使用这些组件,而不是使用组件的 apollo 选项。在某些情况下,你甚至不需要在 .vue 中添加脚本部分!这种代码会更加声明式。

这是一个简单的例子:

<template>
  <div class="users-list">
    <!-- Apollo 查询 -->
    <ApolloQuery :query="require('@/graphql/users.gql')">
      <!-- 结果将自动更新 -->
      <template slot-scope="{ result: { data, loading } }">
        <!-- 一些内容 -->
        <div v-if="loading">Loading...</div>
        <ul v-else>
          <li v-for="user of data.users" class="user">
            {{ user.name }}
          </li>
        </ul>
      </template>
    </ApolloQuery>
  </div>
</template>

<!-- 不需要脚本 -->

<style scoped>
.user {
  list-style: none;
  padding: 12px;
  color: blue;
}
</style>
上次更新时间: 9/8/2018, 3:53:04 PM