4👍
✅
Getting Started with
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>
-
Start the dev server:
$ npm run dev
Source:stackexchange.com