Я пытаюсь интегрировать Vue Apollo в проект Vite, используя API композиции. Мой файл 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, мое приложение начинает цикл обновления. Как я могу решить эту проблему?
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"
}
}
Спасибо
Валерио
Этот цикл происходит, если вы запускаете сервер разработки без установки предварительные зависимости. Выполните следующие действия, чтобы решить проблему.
@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 (поддельный онлайн-API GraphQL):
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')
Создайте компонент, который использует useQuery
из @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