如何在VueVite專案中集成VueApollo？-有解無憂

我正在嘗試使用組合 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，我的應用程式就會進入回圈重繪本身。我怎么解決這個問題？

ps 這里是我的 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"
  }
}

謝謝

瓦萊里奧

uj5u.com熱心網友回復：

如果您在未安裝必備依賴項的情況下啟動開發服務器，則會發生該回圈。請按照以下步驟解決問題。

`@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')

創建一個使用useQueryfrom的組件@vue/apollo-composable：

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

演示

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/476121.html

標籤：javascript Vue.js Vuejs3 vue-composition-api vue-阿波罗

上一篇：Nuxt2.15.7的構建錯誤-無法決議CSS@font-faceURL

下一篇：更新經緯度LeafletVuejs

如何在VueVite專案中集成VueApollo？

@vue/apollo-composableVue 3入門

`@vue/apollo-composable`Vue 3入門