I'm trying to integrate Vue Apollo in a a Vite project using the composition API. My main.js file look like this:
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')
In the vue4 setup section is written to update the main.js in this way:
import { createApp, provide, h } from 'vue'
import { DefaultApolloClient } from '@vue/apollo-composable'
const app = createApp({
setup () {
provide(DefaultApolloClient, apolloClient)
},
render: () => h(App),
})
Can anyone help me to integrate this code into my main.js? I've tryied to do that but as soon as I import DefaultApolloClient, my app goes in loop refreshing itself. How can I solve this problem?
p.s. here my packages.json content:
{
"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"
}
}
Thank you
Valerio
That loop happens if you start the dev server without having installed the prerequisite dependencies. Follow the steps below to resolve the issue.
@vue/apollo-composable and Vue 3Install the prerequisites along with @vue/apollo-composable:
$ npm install --save graphql graphql-tag @apollo/client
$ npm install --save @vue/apollo-composable
In main.js, add the following boilerplate to initialize your Apollo client to GraphQLZero (a fake online 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')
Create a component that uses useQuery from @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>
Start the dev server:
$ npm run dev