[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

  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

👤tony19

Leave a comment