Introduction

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>
  <!-- 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 -->