Vue Apollo Query error module build failed - vue.js

Question

so basically i want to do a query using Apollo Query in Vue 2 CLI. but it is not working, i dont know what is the problem. maybe someone can help me? i have stuck for 3 hours withour any progress
here is the code
<ApolloQuery
:query="
(gql) => gql`
query MyQuery {
fasilitas {
judul
judul_second
deskripsi
foto
}
}
`
"
>
<template v-slot="{ result: { loading, error, data } }">
<div v-if="loading" class="loading apollo">Loading...</div>
<div v-else-if="error" class="error apollo">An error occurred</div>
<div v-else-if="data" class="result apollo">{{ data.fasilitas }}</div>
<div v-else class="no-result apollo">No result :(</div>
</template>
</ApolloQuery>
and here is the error
ERROR Failed to compile with 1 error 01:44:40
error in ./src/views/IndexView.vue?vue&type=template&id=78027b66&
Syntax Error: Error
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
ERROR in ./src/views/IndexView.vue?vue&type=template&id=78027b66& (./node_modules/#vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/#vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/IndexView.vue?vue&type=template&id=78027b66&)
Module build failed (from ./node_modules/#vue/vue-loader-v15/lib/loaders/templateLoader.js):
Error
at Node.initialise (D:\PNJ\Kampus Merdeka\Alterra Academy\vue_mini-project_roland-brilianto\node_modules\vue-template-es2015-compiler\buble.js:16016:10)
at D:\PNJ\Kampus Merdeka\Alterra Academy\vue_mini-project_roland-brilianto\node_modules\vue-template-es2015-compiler\buble.js:7993:51
at Array.forEach (<anonymous>)
webpack compiled with 1 error

Answer 1

i struggled with the same issue. you have to add the tag setup to your vue.config.js.
https://apollo.vuejs.org/guide/components/query.html#tag-setup