What are Apollo components?

Those are components just like any others. They take a GraphQL document in their prop and use the scoped slot feature to pass down the results.

The benefit is that you can use those components in the template directly instead of using the apollo option of your component. In some cases you don't even need to add a script part at all in your .vue! This is all even more declarative.

Here is a quick example of an ApolloQuery in a template:

<template>
  <div class="users-list">
    <!-- Apollo Query -->
    <ApolloQuery :query="require('@/graphql/users.gql')">
      <!-- The result will automatically updated -->
      <template slot-scope="{ result: { data, loading } }">
        <!-- Some content -->
        <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>

<!-- No need for script -->

<style scoped>
.user {
  list-style: none;
  padding: 12px;
  color: blue;
}
</style>
Last Updated: 11/8/2018, 5:40:45 PM