如何使用@vue/composition api和nuxt.js获取vue-apollo实例

在使用 Nuxt.js 和 Vue Composition API 时，你可以通过 @vue/apollo-composable 库来获取和使用 Apollo 客户端实例。@vue/apollo-composable 提供了一些方便的钩子函数，可以让你在组合式 API 中使用 Apollo 客户端。

以下是一个示例，展示了如何在 Nuxt.js 项目中使用 Vue Composition API 和 Apollo 客户端。

安装依赖

首先，确保你已经安装了必要的依赖：

npm install @nuxtjs/apollo @vue/apollo-composable graphql

配置 Nuxt.js

在 nuxt.config.js 中配置 Apollo 模块：

export default {
  modules: [
    '@nuxtjs/apollo'
  ],
  apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: 'https://your-graphql-endpoint.com/graphql'
      }
    }
  }
}

使用 Vue Composition API 和 Apollo 客户端

接下来，你可以在组件中使用 @vue/apollo-composable 提供的钩子函数来进行 GraphQL 查询和变更。

创建一个示例组件

在 pages 目录下创建一个示例页面，比如 pages/index.vue：

<template>
  <div>
    <h1>GraphQL Data</h1>
    <div v-if="loading">Loading...</div>
    <div v-else-if="error">Error: {{ error.message }}</div>
    <div v-else>
      <pre>{{ data }}</pre>
    </div>
  </div>
</template>

<script setup>
import { useQuery } from '@vue/apollo-composable';
import gql from 'graphql-tag';

const GET_DATA = gql`
  query {
    yourQuery {
      field1
      field2
    }
  }
`;

const { result, loading, error } = useQuery(GET_DATA);

const data = result;
</script>

在这个示例中，我们使用了 useQuery 钩子来执行一个 GraphQL 查询。useQuery 返回一个对象，其中包含 result、loading 和 error 等属性。我们可以使用这些属性来处理查询的结果、加载状态和错误。

使用 Apollo 客户端实例

如果你需要直接访问 Apollo 客户端实例，可以使用 useApolloClient 钩子：

<template>
  <div>
    <h1>GraphQL Data</h1>
    <div v-if="loading">Loading...</div>
    <div v-else-if="error">Error: {{ error.message }}</div>
    <div v-else>
      <pre>{{ data }}</pre>
    </div>
  </div>
</template>

<script setup>
import { useQuery, useApolloClient } from '@vue/apollo-composable';
import gql from 'graphql-tag';

const GET_DATA = gql`
  query {
    yourQuery {
      field1
      field2
    }
  }
`;

const { result, loading, error } = useQuery(GET_DATA);

const data = result;

// 获取 Apollo 客户端实例
const { client } = useApolloClient();

// 你可以使用 client 实例进行更多操作
// client.query({ query: YOUR_QUERY }).then(response => { ... });
</script>

通过 useApolloClient 钩子，你可以获取到 Apollo 客户端实例，并使用它进行更多的操作，比如手动执行查询或变更。