设置

确保您已 安装 Apollo Client。

1. 安装 @vue/apollo-composable

npm install --save @vue/apollo-composable

或者

yarn add @vue/apollo-composable

2. 将 Apollo Client 连接到 Vue

Vue 2

在您的根实例中，您需要提供一个默认的 Apollo Client 实例

import { provide } from '@vue/composition-api'
import { DefaultApolloClient } from '@vue/apollo-composable'

const app = new Vue({
  setup () {
    provide(DefaultApolloClient, apolloClient)
  },

  render: h => h(App),
})

警告

在本指南的其余部分，我们将展示使用 Vue 3 的代码示例。如果您需要 Vue 2，您可能需要从 '@vue/composition-api' 而不是 'vue' 导入组合式 API 函数。

Vue 3

import { createApp, provide, h } from 'vue'
import { DefaultApolloClient } from '@vue/apollo-composable'

const app = createApp({
  setup () {
    provide(DefaultApolloClient, apolloClient)
  },

  render: () => h(App),
})

多个客户端

您还可以提供多个 Apollo Client 实例以供您的应用程序使用。在这种情况下，建议提供一个 default 实例

import { provide } from 'vue'
import { ApolloClients } from '@vue/apollo-composable'

const app = new Vue({
  setup () {
    provide(ApolloClients, {
      default: apolloClient,
    })
  },

  render: h => h(App),
})

您可以添加其他客户端实例

provide(ApolloClients, {
  default: apolloClient,
  clientA: apolloClientA,
  clientB: apolloClientB,
})

然后，您可以使用 clientId 选项在我们将要介绍的函数（例如 useQuery、useMutation 和 useSubscription）中选择要使用哪个客户端。

在 setup 之外使用

当在 vue 上下文之外使用例如 useQuery 时，无法使用 vue 的 provide/inject 机制注入客户端。@vue/apollo-composable 可以管理自己的 apollo 客户端

对于单个默认客户端，请使用 provideApolloClient

import { provideApolloClient } from "@vue/apollo-composable";

const query = provideApolloClient(apolloClient)(() => useQuery(gql`
  query hello {
    hello
  }
`))
const hello = computed(() => query.result.value?.hello ?? '')

对于多个客户端，请使用 provideApolloClients

import { provideApolloClients } from "@vue/apollo-composable";

provideApolloClients({
  default: apolloClient,
  clientA: apolloClientA,
  clientB: apolloClientB,
})