如何在Vue Vite项目中整合Vue阿波罗？

Question

我正在尝试使用复合API将Vue阿波罗集成到一个Vite项目中。我的main.js文件如下所示：

import { createApp } from 'vue'
import App from './App.vue'
import * as apolloProvider from '../apollo.provider'
import router from './router'


const app = createApp(App)

app
.use(router)
.use(apolloProvider.provider)
.mount('#app')

在vue4安装部分中，以这种方式编写以更新main.js：

import { createApp, provide, h } from 'vue'
import { DefaultApolloClient } from '@vue/apollo-composable'

const app = createApp({
  setup () {
    provide(DefaultApolloClient, apolloClient)
  },

  render: () => h(App),
})

有人能帮我把这些代码集成到我的main.js中吗？我尝试过这样做，但是一旦我导入DefaultApolloClient，，我的应用程序就会循环起来，刷新自己。我该如何解决这个问题？

附注：在这里，我的packages.json内容：

{
  "name": "kiddo-vite-frontend",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@vue/apollo-composable": "^4.0.0-alpha.17",
    "apollo-boost": "^0.4.9",
    "apollo-cache-inmemory": "^1.6.6",
    "apollo-client": "^2.6.10",
    "apollo-link": "^1.2.14",
    "apollo-link-context": "^1.0.20",
    "apollo-link-http": "^1.5.17",
    "graphql": "^16.5.0",
    "graphql-tag": "^2.12.6",
    "vue": "^3.2.30",
    "vue-apollo": "^3.1.0",
    "vue-router": "^4.0.15"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.3",
    "vite": "^2.9.9"
  }
}

谢谢

瓦莱里奥

Answer 1

如果您在没有安装先决条件依赖的情况下启动开发服务器，则会发生该循环。按照下面的步骤解决问题。

开始使用@vue/apollo-composable和Vue 3

1. 与@vue/apollo-composable一起安装先决条件： $ npm安装-保存graphql graphql-标记@阿波罗/客户端$ npm安装-保存@vue/阿波罗-可组合
2. 在main.js中，添加以下样板以将您的阿波罗客户端初始化为GraphQLZero (一个假的在线GraphQL API)： 从“vue”导入{ createApp }，从“@vue/ DefaultApolloClient”导入可组合的{ apolloClient、createHttpLink、InMemoryCache }，从“@阿波罗/客户端/核心”导入应用程序。/App.vue‘const httpLink = createHttpLink({ uri：'https://graphqlzero.almansi.me/api'，} const cache = new InMemoryCache() const apolloClient= new ApolloClient({ link: cache，}) createApp( App ) .provide(DefaultApolloClient，apolloClient) .mount('#app')
3. 创建一个从useQuery使用@vue/apollo-composable的组件
4. 启动dev服务器： $ npm run dev

演示