设置

确保你已经安装了 Apollo Client。

1. 安装 @vue/apollo-option

npm install --save @vue/apollo-option

或者

yarn add @vue/apollo-option

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)

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