I'm trying to build a website using Wordpress as my backend, WPGraphQL & Apollo-Vue, and Vue for my frontend. It's going ok so far, but Apollo is causing me a lot of grief. I opted to go for Vue3 since it seems that's the future for the library, and I want to learn the latest not the obsolete, and make use of the new features and improvements in 3.
I'm hearing that a lot of libraries and packages are still incompatible and error prone with Vue 3... Some forum posts are saying things about apollo-vue incompatibilities with Vue3, but I'm also new to the Vue system and it's entirely possible I could just be coding it wrong as well.. I'm not sure... Here is my code.. please tell me what I'm doing wrong so I can stop pulling my hair out..
browser console error
runtime-core.esm-bundler.js?5c40:217 Uncaught TypeError: Object(...) is not a function
at setup (HeaderPrimary.vue?da5e:26)
at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154)
at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:6542)
at setupComponent (runtime-core.esm-bundler.js?5c40:6503)
at mountComponent (runtime-core.esm-bundler.js?5c40:4206)
at processComponent (runtime-core.esm-bundler.js?5c40:4182)
at patch (runtime-core.esm-bundler.js?5c40:3791)
at mountChildren (runtime-core.esm-bundler.js?5c40:3975)
at mountElement (runtime-core.esm-bundler.js?5c40:3896)
at processElement (runtime-core.esm-bundler.js?5c40:3868)
setup @ HeaderPrimary.vue?da5e:26
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154
setupStatefulComponent @ runtime-core.esm-bundler.js?5c40:6542
setupComponent @ runtime-core.esm-bundler.js?5c40:6503
mountComponent @ runtime-core.esm-bundler.js?5c40:4206
processComponent @ runtime-core.esm-bundler.js?5c40:4182
patch @ runtime-core.esm-bundler.js?5c40:3791
mountChildren @ runtime-core.esm-bundler.js?5c40:3975
mountElement @ runtime-core.esm-bundler.js?5c40:3896
processElement @ runtime-core.esm-bundler.js?5c40:3868
patch @ runtime-core.esm-bundler.js?5c40:3788
componentEffect @ runtime-core.esm-bundler.js?5c40:4298
reactiveEffect @ reactivity.esm-bundler.js?a1e9:42
effect @ reactivity.esm-bundler.js?a1e9:17
setupRenderEffect @ runtime-core.esm-bundler.js?5c40:4263
mountComponent @ runtime-core.esm-bundler.js?5c40:4222
processComponent @ runtime-core.esm-bundler.js?5c40:4182
patch @ runtime-core.esm-bundler.js?5c40:3791
render @ runtime-core.esm-bundler.js?5c40:4883
mount @ runtime-core.esm-bundler.js?5c40:3077
app.mount @ runtime-dom.esm-bundler.js?830f:1259
eval @ main.js?56d7:41
./src/main.js @ app.js:1557
__webpack_require__ @ app.js:849
fn @ app.js:151
1 @ app.js:1582
__webpack_require__ @ app.js:849
checkDeferredModules @ app.js:46
(anonymous) @ app.js:925
(anonymous) @ app.js:928
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import VueCompositionAPI from 'vue'
// import { DefaultApolloClient } from 'vue'
import { ApolloClient, createHttpLink, InMemoryCache } from 'vue'
// HTTP connection to the API
const httpLink = createHttpLink({
// You should use an absolute URL here
uri: 'http://localhost/websitename/graphql',
})
// Cache implementation
const cache = new InMemoryCache()
// Create the apollo client
const apolloClient = new ApolloClient({
link: httpLink,
cache,
})
createApp(App)
.use(router)
.use(VueCompositionAPI)
.use(apolloClient)
.mount('#app')
HeaderPrimary
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import VueCompositionAPI from 'vue'
import { DefaultApolloClient } from 'vue'
createApp(App)
.use(router)
.use(VueCompositionAPI) //DO I need to do this? How do I access it in a component.. I'm not clear on how this works..
.use(DefaultApolloClient) // same question..
.mount('#app')
<template>
<header>
<nav id="nav_primary">
<Loading_Spinner v-if="loading" />
<ul>
<li v-for="item in menu_items" :key="item">
<router-link :to="{ path: '/'+item.ID } ">{{ item.title }}</router-link>
</li>
</ul>
</nav>
</header>
</template>
<script>
import Loading_Spinner from './Loading_Spinner.vue'
import { watch, useQuery, gql } from 'vue'
//const { ref, reactive } = VueCompositionAPI //I don't know what this is? I found it somewhere...
export default {
name: 'HeaderPrimary',
setup () {
const {result} = useQuery(gql`
query getMenu {
posts {
edges {
node {
id
title
}
}
}
}
`)
watch(() => {
console.log(result.value)
})
},
data() {
return {
loading: false,
menu_items: [],
}
},
components: {
Loading_Spinner
}
}
package.json
{
"name": "websitename",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --dest ./",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@apollo/client": "^3.3.19",
"@vue/apollo-composable": "^4.0.0-alpha.12",
"apollo": "^2.29.0-alpha.0",
"core-js": "^3.6.5",
"graphql": "^15.5.0",
"graphql-tag": "^2.12.4",
"vue": "^3.0.0",
"vue-apollo": "^3.0.0-alpha.3",
"vue-ionicons": "^3.0.5",
"vue-router": "^4.0.8"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"node-sass": "^6.0.0",
"sass": "^1.32.13",
"sass-loader": "^10.2.0",
"vue-cli-plugin-apollo": "~0.22.2",
"vue-loader": "^16.2.0",
"vue-template-compiler": "^2.6.12",
"webpack": "^4.42.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}