设置

确保您已安装 Apollo Client。

1. 安装 @vue/apollo-components

npm install --save @vue/apollo-option @vue/apollo-components

或者

yarn add @vue/apollo-option @vue/apollo-components

2. 创建 Apollo 客户端

import { ApolloClient, InMemoryCache } from '@apollo/client/core'

const cache = new InMemoryCache()

const apolloClient = new ApolloClient({
  cache,
  uri: 'http://localhost:4042/graphql',
})

警告

使用 @apollo/client/core 导入路径，否则您也会导入 React。

3. 创建 Apollo 提供者

提供者保存 Apollo 客户端实例，这些实例可以被所有子组件使用。

import { createApolloProvider } from '@vue/apollo-option'

const apolloProvider = createApolloProvider({
  defaultClient: apolloClient,
})

4. 将提供者添加到您的应用程序

使用 app.use 函数将其添加到您的应用程序中

import { createApp, h } from 'vue'

const app = createApp({
  render: () => h(App),
})

app.use(apolloProvider)

5. 将组件添加到您的应用程序

import VueApolloComponents from '@vue/apollo-components'

// ...

app.use(VueApolloComponents)

您现在可以开始在您的组件中使用 Apollo 了！