2

我正在尝试使用 Wordpress 作为我的后端、WPGraphQL 和 Apollo-Vue 以及 Vue 作为我的前端来构建一个网站。到目前为止一切顺利，但阿波罗让我很伤心。我选择了 Vue3，因为它似乎是图书馆的未来，我想学习最新的而不是过时的，并利用 3 中的新功能和改进。

我听说很多库和包仍然与 Vue 3 不兼容且容易出错......一些论坛帖子说 apollo-vue 与 Vue3 不兼容，但我也是 Vue 系统的新手，它完全可能我也可能编码错误..我不确定...这是我的代码..请告诉我我做错了什么，这样我就可以停止拔头发了..

浏览器控制台错误

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

包.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"
  ]
}
4

0 回答 0