如何处理Vue.JS中的Apollo Graphql查询错误？

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <p v-if="loading">Loading...</p>
    <p v-if="error">{{ error.message }}</p>
    <ul v-if="data">
      <li v-for="item in data.items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      error: null,
      data: null
    };
  },
  methods: {
    fetchData() {
      this.loading = true;
      this.error = null;
      this.data = null;

      this.$apollo
        .query({
          query: gql`
            query {
              items {
                id
                name
              }
            }
          `
        })
        .then(response => {
          this.loading = false;
          this.data = response.data;
        })
        .catch(error => {
          this.loading = false;
          this.error = error;
        });
    }
  }
};
</script>