how to integrate Vue Apollo in Vue Vite project?

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.

Getting Started with @vue/apollo-composable and Vue 3

1. Install the prerequisites along with @vue/apollo-composable:

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

2. 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')
   

3. 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>
   

4. Start the dev server:

   $ npm run dev
   

demo