如何在 Vue Vite 项目中集成 Vue Apollo？

Question

我正在尝试使用组合 API 将 Vue Apollo 集成到一个 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的setup部分写的是这样更新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，我的应用程序就会进入循环刷新。我该如何解决这个问题？

p.s。这是我的 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

如果您在未安装 prerequisite dependencies 的情况下启动开发服务器，就会发生该循环。请按照以下步骤解决问题。

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

安装先决条件以及 @vue/apollo-composable:

$ npm install --save graphql graphql-tag @apollo/client
$ npm install --save @vue/apollo-composable

在 main.js 中，添加以下样板文件以将您的 Apollo 客户端初始化为 GraphQLZero（伪造的在线 GraphQL API）：

 import { createApp } from 'vue'
 import { DefaultApolloClient } from '@vue/apollo-composable'
 import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'
 import App from './App.vue'

 const httpLink = createHttpLink({
   uri: 'https://graphqlzero.almansi.me/api',
 })
 const cache = new InMemoryCache()
 const apolloClient = new ApolloClient({
   link: httpLink,
   cache,
 })

 createApp(App)
   .provide(DefaultApolloClient, apolloClient)
   .mount('#app')

从 @vue/apollo-composable:

创建一个使用 useQuery 的组件

 <script setup>
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'

 const { result } = useQuery(gql`
   query getUser {
     user(id: 1) {
       id
       name
     }
   }
 `)
 </script>

 <template>
   <h2>Hello {{ result?.user?.name ?? 'world' }}</h2>
 </template>

启动开发服务器：
```
$ npm run dev
```

demo

如何在 Vue Vite 项目中集成 Vue Apollo？

how to integrate Vue Apollo in Vue Vite project?

javascript

vue.js

vue-apollo

vuejs3

vue-composition-api

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

如何在 Vue Vite 项目中集成 Vue Apollo？

how to integrate Vue Apollo in Vue Vite project?

javascript

vue.js

vue-apollo

vuejs3

vue-composition-api

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

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