Vue Academy · 课时

在 Vue 3 中配置 Apollo Client

ApolloClient、InMemoryCache、provideApolloClient()，以及 @vue/apollo-composable 配置

在 Vue 3 中配置 Apollo Client 是 CoddyKit 上的免费 Vue Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

使用 Vue 和 GraphQL

GraphQL 允许客户端在一次请求中准确询问所需的数据。Apollo Client 是最常用的 GraphQL 客户端，而 @vue/apollo-composable 可将其与 Vue 3 的组合式 API 集成。

安装软件包

您需要 Apollo 核心库、GraphQL 解析器以及 Vue 组合式函数层。

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

创建客户端

Apollo 客户端需要服务器 uri 和一个缓存。InMemoryCache 会存储查询结果，使重复读取能够立即完成。

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

const apolloClient = new ApolloClient({
  uri: 'https://api.example.com/graphql',
  cache: new InMemoryCache()
})

缓存的作用

InMemoryCache 会按照实体 id 对响应进行规范化。当两个查询返回同一个对象时，缓存只存储一份；更新该对象后，所有使用它的视图都会刷新。

提供客户端

在整个 app 中注册客户端，这样每个组件都能运行查询。DefaultApolloClient 注入键会将其接入组合式 API。

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

const app = createApp({
  setup() {
    provide(DefaultApolloClient, apolloClient)
    return () => h(App)
  }
})

多个客户端

对于多个 GraphQL 端点，请提供一个 ApolloClients 映射，并为每个客户端命名。组件通过 clientId 选项选择其中一个。

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

provide(ApolloClients, {
  default: apolloClient,
  analytics: analyticsClient
})

provideApolloClient

在组件的 setup 外部（例如在组合式函数内部），使用 provideApolloClient 使 useQuery 调用能够访问客户端。

import { provideApolloClient } from '@vue/apollo-composable'

provideApolloClient(apolloClient)
// now useQuery works in this composable

添加身份验证标头

实际 API 需要身份验证令牌。您可以在客户端选项中配置 headers，也可以使用 Apollo 链接将令牌附加到每个请求。

const apolloClient = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache(),
  headers: {
    Authorization: 'Bearer ' + token
  }
})

配置默认选项

defaultOptions 字段可以调整各种行为，例如默认获取策略，即始终优先从缓存读取。

const apolloClient = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache(),
  defaultOptions: {
    watchQuery: { fetchPolicy: 'cache-and-network' }
  }
})

编写您的第一个查询

使用来自 @apollo/client/core 的 gql 模板标签定义查询。它会将 GraphQL 字符串解析为 Apollo 能够理解的文档。

import { gql } from '@apollo/client/core'

const GET_POSTS = gql(
  'query { posts { id title } }'
)

验证设置

提供客户端后，任何组件都可以使用该文档调用 useQuery。如果数据能够返回，就说明您的客户端和提供者已正确连接。

快速检查

测试您对 Apollo 设置的掌握情况。

回顾

您已经在 Vue 3 中完成了 Apollo 的设置：

使用 uri 和 InMemoryCache 创建 ApolloClient。
缓存会按照实体 id 对结果进行规范化。
使用 DefaultApolloClient 提供客户端；如果有多个客户端，则使用 ApolloClients。
在组合式函数中使用 provideApolloClient；使用 gql 定义查询。

常见问题解答

「在 Vue 3 中配置 Apollo Client」课时是免费的吗？

是的 — 「在 Vue 3 中配置 Apollo Client」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「在 Vue 3 中配置 Apollo Client」这节课中我会学到什么？

ApolloClient、InMemoryCache、provideApolloClient()，以及 @vue/apollo-composable 配置你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「在 Vue 3 中配置 Apollo Client」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy