Vue Apollo Component

與一般的 Component 一樣，在 prop 中使用 GraphQL document 並使用 scoped slot 來傳遞結果
我們可以直接在tamplate 中使用 component ，而不是使用 apollo
在簡單的案例中，還能直接在 component 上添加 Schema 就可以取得資料

Apollo Query

我們利用之前的 authors 直接改寫
使用 Component，他提供 query, variables 的屬性
我們將 gql 寫入到 query ，如果 API 需要參數就給 :variables= {}
最後在 ApolloQuery 的 slot 中可以取得 result 查詢結果

<template>
  <ApolloQuery :query="gql => gql`
    query authors {
        authors {
            id
            firstName
            lastName
        }
    }`">
    <!-- update -->
    <template slot-scope="{ result: { data, loading } }">
      <div v-if="loading">Loading...</div>
      <div v-else>
          <div v-for="author in data.authors" :key="author.id">
              {{author.firstName}}, {{author.lastName}}
          </div>
      </div>
    </template>
  </ApolloQuery>
</template>

Apollo Mutation

在這個範例中，我使用 ApolloMutation ，並將他打包成 component ，由 Author.vue 呼叫以及將參數傳入，所以我們的參數會直接拿 props 的 newAuthor
使用 slot 提供的 mutate ，並綁定在 v-btn @click 中，當事件被出發時，也就會執行 mutate()
最後，成功發送 API 後，我們能使用 ApolloMutation 提供的事件 @done ，取得回傳的結果
以下便是 Create Author 的程式碼以及成功回傳結果

<template>
    <ApolloMutation
        :mutation="createAuthorMutation"
        :variables="newAuthor"
        @done="onDone"
        >
        <template v-slot="{ mutate, loading, error }"> 
            <v-btn :disabled="loading" @click="mutate()">Click me</v-btn>
            <p v-if="error">An error occurred: {{ error }}</p>
        </template>
    </ApolloMutation>
</template>

import { CREATE_AUTHOR } from '../schemas/Author';

export default {
    props: ['newAuthor'],
    data() {
        return {
            createAuthorMutation: CREATE_AUTHOR
        }
    },
    methods: {
        onDone(data) {
            console.log(data)
        }
    }
}

如果想更新暫存可以使用 ApolloMutation 的 :update，回傳參數中能取得 store 以及 data(mutation 的回傳結果)，再將 data 更新回 store 即可