vue中使用apollo访问graphQL接口

1. 配置 Apollo 客户端： 创建一个 apollo.js 文件来配置 Apollo 客户端：

   // src/apollo.js
   import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client/core';
   import { DefaultApolloClient } from '@vue/apollo-composable';
   import { provide } from 'vue';
    
   const httpLink = createHttpLink({
     uri: 'https://your-graphql-endpoint.com/graphql',
   });
    
   const cache = new InMemoryCache();
    
   const apolloClient = new ApolloClient({
     link: httpLink,
     cache,
   });
    
   export function provideApolloClient(app) {
     app.provide(DefaultApolloClient, apolloClient);
   }

2. 在 Vue 应用中提供 Apollo 客户端： 在 main.js 中引入并提供 Apollo 客户端：

   // src/main.js
   import { createApp } from 'vue';
   import App from './App.vue';
   import { provideApolloClient } from './apollo';
    
   const app = createApp(App);
   provideApolloClient(app);
   app.mount('#app');

3. 使用 Apollo 查询数据： 在组件中使用 useQuery 来执行 GraphQL 查询：

   <!-- src/components/HelloWorld.vue -->
   <template>
     <div>
       <h1>GraphQL Query Example</h1>
       <div v-if="loading">Loading...</div>
       <div v-if="error">Error: {{ error.message }}</div>
       <div v-if="data">
         <p>{{ data.hello }}</p>
       </div>
     </div>
   </template>
    
   <script>
   import { useQuery } from '@vue/apollo-composable';
   import gql from 'graphql-tag';
    
   const HELLO_QUERY = gql`
     query Hello($name: String!) {
       hello(name: $name)
     }
   `;
    
   export default {
     setup() {
       const { result: data, loading, error } = useQuery(HELLO_QUERY, { name: 'World' });
    
       return { data, loading, error };
     },
   };
   </script>