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

CodePudding user response：

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