vue-cli-plugin-apollo

import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client/core'; import { provideApolloClient } from '@vue/apollo-composable'; // This setup is typically handled by the plugin's generator, // but here's a conceptual example for main.ts/js. // The plugin usually sets up an httpLink and InMemoryCache for you. const httpLink = new HttpLink({ uri: process.env.VUE_APP_GRAPHQL_HTTP || 'http://localhost:4000/graphql', headers: { // Ensure Authorization header is capitalized for v0.22.2+ Authorization: process.env.VUE_APP_GRAPHQL_TOKEN ? `Bearer ${process.env.VUE_APP_GRAPHQL_TOKEN}` : '', }, }); const apolloClient = new ApolloClient({ link: httpLink, cache: new InMemoryCache(), }); const app = createApp(App); // Provide the Apollo Client to the entire app app.setup = () => { provideApolloClient(apolloClient); }; app.use(router); app.mount('#app'); /* Example Vue Component using the plugin-provided Apollo setup */ /* <template> <div> <h1>Characters</h1> <p v-if="loading">Loading...</p> <p v-if="error">Error: {{ error.message }}</p> <ul v-if="characters"> <li v-for="char in characters" :key="char.id">{{ char.name }}</li> </ul> </div> </template> <script setup lang="ts"> import { useQuery } from '@vue/apollo-composable'; import gql from 'graphql-tag'; import { computed } from 'vue'; interface Character { id: string; name: string; } interface AllCharactersResponse { characters: Character[]; } const ALL_CHARACTERS_QUERY = gql` query AllCharacters { characters { id name } } `; const { result, loading, error } = useQuery<AllCharactersResponse>(ALL_CHARACTERS_QUERY); const characters = computed(() => result.value?.characters ?? []); </script> */