Estoy tratando de integrar Vue Apollo en un proyecto de Vite usando la API de composición. Mi archivo main.js se ve así:
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')En la sección de configuración de vue4 está escrito para actualizar main.js de esta manera:
import { createApp, provide, h } from 'vue' import { DefaultApolloClient } from '@vue/apollo-composable' const app = createApp({ setup () { provide(DefaultApolloClient, apolloClient) }, render: () => h(App), })¿Alguien puede ayudarme a integrar este código en mi main.js? He intentado hacer eso, pero tan pronto como importo DefaultApolloClient , mi aplicación entra en bucle y se actualiza. ¿Como puedó resolver esté problema?
pd aquí mi contenido de 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" } }Gracias
Valerio
Ese bucle ocurre si inicia el servidor de desarrollo sin haber instalado las dependencias de requisitos previos . Siga los pasos a continuación para resolver el problema.
@vue/apollo-composable y Vue 3 Instale los requisitos previos junto con @vue/apollo-composable :
$ npm install --save graphql graphql-tag @apollo/client $ npm install --save @vue/apollo-composable En main.js , agregue el siguiente modelo para inicializar su cliente Apollo en GraphQLZero (una API de GraphQL en línea falsa):
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') Cree un componente que use useQuery de @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>Inicie el servidor de desarrollo:
$ npm run dev