[Vuejs]-How to integrate Vue Apollo in Vue Vite project?

4👍

✅

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

Install 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>