docs: sync Chinese translation 20181220 (#442)
* docs: sync Chinese translation 20181113 * docs: fix typo * docs: add current version of Chinese translation * docs: remove invisible chars * docs: sync Chinese translation 20181220 * docs: follow master * docs: unify style in docs * docs: fix http link
This commit is contained in:
高英健
@@ -160,6 +160,7 @@ module.exports = {
|
||||
'apollo/mutations',
|
||||
'apollo/subscriptions',
|
||||
'apollo/pagination',
|
||||
'apollo/special-options',
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
+1
-1
@@ -85,7 +85,7 @@ const js = ApolloSSR.exportStates(apolloProvider, options)
|
||||
|
||||
### globalPrefetch
|
||||
|
||||
Allow you to register a component to be prefetched explicitely.
|
||||
Allow you to register a component to be prefetched explicitly.
|
||||
|
||||
Simple example:
|
||||
|
||||
|
||||
+13
-1
@@ -10,7 +10,7 @@ features:
|
||||
details: 通过 Apollo 组件声明式地使用 Apollo
|
||||
- title: 支持 SSR
|
||||
details: 在渲染 HTML 页面之前在服务端运行你的查询
|
||||
footer: LICENCE ISC - Created by Guillaume CHAU (@Akryum)
|
||||
footer: LICENCE MIT - Created by Guillaume CHAU (@Akryum)
|
||||
---
|
||||
|
||||
<p style="text-align: center;">
|
||||
@@ -28,3 +28,15 @@ footer: LICENCE ISC - Created by Guillaume CHAU (@Akryum)
|
||||
<img src="https://vueschool.io/img/logo/vueschool_logo_multicolor.svg" alt="VueSchool logo" class="silver-sponsor">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
### 铜牌赞助商
|
||||
|
||||
<p align="center">
|
||||
<a href="https://vuetifyjs.com" target="_blank" title="Vuetify">
|
||||
<img src="https://cdn.vuetifyjs.com/images/logos/v-alt.svg" width="48" height="48">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
::: tip 当前版本
|
||||
中文文档现在同步至 v3.0.0-beta.26
|
||||
:::
|
||||
|
||||
@@ -15,7 +15,7 @@ const apolloProvider = new VueApollo({
|
||||
defaultClient: apolloClient,
|
||||
// 'apollo' 对象的默认定义
|
||||
defaultOptions: {
|
||||
// 详见 'apollo' 的定义
|
||||
// 详见 'apollo' 的定义
|
||||
// 例如：默认查询选项
|
||||
$query: {
|
||||
loadingKey: 'loading',
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# 智能查询
|
||||
|
||||
在组件的 `apollo` 定义中声明的每个查询（不以 `$` 字符开头）都会创建一个智能查询对象。
|
||||
在组件的 `apollo` 定义中声明的每个查询（不以 `$` 字符开头）都会创建一个智能查询对象。
|
||||
|
||||
## 选项
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
- `variables`：对象或返回对象的响应式函数。每个键将用 `'$'` 映射到 GraphQL 文档中，例如 `foo` 将变为 `$foo`。
|
||||
- `throttle`：变量更新节流时间（毫秒）。
|
||||
- `debounce`：变量更新防抖时间（毫秒）。
|
||||
- `pollInterval`：使用轮询自动更新的时间（表示每隔 `x` 毫秒重新获取一次）。
|
||||
- `update(data) {return ...}` 用来自定义设置到 vue 属性中的值，例如当字段名称不匹配时。
|
||||
- `result(ApolloQueryResult)` 是收到结果时调用的钩子（更多参见 [ApolloQueryResult](https://github.com/apollographql/apollo-client/blob/master/packages/apollo-client/src/core/types.ts) 的文档）。
|
||||
- `error(error)` 是有错误时调用的钩子。`error` 是一个具有 `graphQLErrors` 属性或 `networkError` 属性的 Apollo 错误对象。
|
||||
@@ -30,28 +31,28 @@ apollo: {
|
||||
ping(message: $message)
|
||||
}`,
|
||||
// 响应式参数
|
||||
variables() {
|
||||
variables () {
|
||||
// 在这里使用 vue 的响应式属性
|
||||
return {
|
||||
message: this.pingInput,
|
||||
message: this.pingInput,
|
||||
}
|
||||
},
|
||||
// 变量：深度对象侦听
|
||||
deep: false,
|
||||
// 我们使用自定义更新回调，因为字段名称不匹配
|
||||
// 我们使用自定义的 update 回调函数，因为字段名称不匹配
|
||||
// 默认情况下，将使用 'data' 结果对象上的 'pingMessage' 属性
|
||||
// 考虑到 apollo 服务端的工作方式，我们知道结果是在 'ping' 属性中
|
||||
update(data) {
|
||||
update (data) {
|
||||
console.log(data)
|
||||
// 返回的值将更新 vue 属性 'pingMessage'
|
||||
return data.ping
|
||||
},
|
||||
// 可选结果钩子
|
||||
result({ data, loading, networkStatus }) {
|
||||
console.log("We got some result!")
|
||||
result ({ data, loading, networkStatus }) {
|
||||
console.log('We got some result!')
|
||||
},
|
||||
// 错误处理
|
||||
error(error) {
|
||||
error (error) {
|
||||
console.error('We\'ve got an error!', error)
|
||||
},
|
||||
// 加载状态
|
||||
@@ -59,7 +60,7 @@ apollo: {
|
||||
// 在查询正在加载时将递增，不再加载时递减
|
||||
loadingKey: 'loadingQueriesCount',
|
||||
// 当加载状态发生变化时会调用 watchLoading
|
||||
watchLoading(isLoading, countModifier) {
|
||||
watchLoading (isLoading, countModifier) {
|
||||
// isLoading 是一个布尔值
|
||||
// countModifier 为 1 或 -1
|
||||
},
|
||||
|
||||
+67
-1
@@ -2,10 +2,39 @@
|
||||
|
||||
## 用法
|
||||
|
||||
详见 [SSR 指南](../guide/ssr.md).
|
||||
详见 [SSR 指南](../guide/ssr.md)。
|
||||
|
||||
## 方法
|
||||
|
||||
### install
|
||||
|
||||
仅在服务端安装 SSR 插件：
|
||||
|
||||
```js
|
||||
Vue.use(ApolloSSR)
|
||||
```
|
||||
|
||||
你可以像这样传递附加选项：
|
||||
|
||||
```js
|
||||
Vue.use(ApolloSSR, {
|
||||
fetchPolicy: 'network-only',
|
||||
suppressRenderErrors: false,
|
||||
})
|
||||
```
|
||||
|
||||
#### fetchPolicy
|
||||
|
||||
当预取一个 Apollo 查询时，建议覆盖 `fetchPolicy` 以强制查询发送。
|
||||
|
||||
默认值：`'network-only'`。
|
||||
|
||||
#### suppressRenderErrors
|
||||
|
||||
隐藏虚假渲染时的错误。
|
||||
|
||||
默认值：`false`。
|
||||
|
||||
### prefetchAll
|
||||
|
||||
预取所有队列中的组件定义，并在所有对应的 apollo 数据准备就绪时返回已解决的(resolved) promise。
|
||||
@@ -53,3 +82,40 @@ const js = ApolloSSR.exportStates(apolloProvider, options)
|
||||
exportNamespace: '',
|
||||
}
|
||||
```
|
||||
|
||||
### globalPrefetch
|
||||
|
||||
允许你注册一个需要显式预取的组件。
|
||||
|
||||
简单示例如下：
|
||||
|
||||
```js
|
||||
import MyComponent from '@/components/MyComponent.vue'
|
||||
|
||||
ApolloSSR.globalPrefetch(() => MyComponent)
|
||||
```
|
||||
|
||||
你可以根据上下文禁用预取：
|
||||
|
||||
```js
|
||||
ApolloSSR.globalPrefetch(context => {
|
||||
if (context.route.name === 'foo'){
|
||||
return MyComponent
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### mockInstance
|
||||
|
||||
在 `prefetchAll` 期间，应用程序组件树将使用虚假实例重新创建以使进程更快。如果你在模板或渲染函数中访问了像 `this.$http` 这样的辅助函数（通常为 `Undefined error`），你可以通过插件来修改虚假实例，以防止它们的渲染函数崩溃。建议 mock 这些辅助函数以提高性能。
|
||||
|
||||
```js
|
||||
const noop = () => {}
|
||||
|
||||
ApolloSSR.mockInstance({
|
||||
apply: vm => {
|
||||
// Mock $http
|
||||
vm.$http = noop
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
@@ -4,7 +4,9 @@
|
||||
本文档关联的版本仅支持 Apollo 2.x。查看支持 Apollo 1.x 的旧版本，请点击 [这里](https://github.com/Akryum/vue-apollo/tree/apollo-1).
|
||||
:::
|
||||
|
||||
这个库通过声明式查询将 [apollo](https://www.apollographql.com/) 集成到你的 [Vue](http://vuejs.org) 组件中。兼容 Vue 1.0+ 和 2.0+。[在线演示](https://jsfiddle.net/Akryum/oyejk2qL/)
|
||||
这个库通过声明式查询将 [apollo](https://www.apollographql.com/) 集成到你的 [Vue](http://vuejs.org) 组件中。兼容 Vue 1.0+ 和 2.0+。
|
||||
|
||||
[➡️ 安装](./installation.md)
|
||||
|
||||
## 赞助商
|
||||
|
||||
@@ -16,9 +18,17 @@
|
||||
</a>
|
||||
</p>
|
||||
|
||||
### 铜牌赞助商
|
||||
|
||||
<p align="center">
|
||||
<a href="https://vuetifyjs.com" target="_blank" title="Vuetify">
|
||||
<img src="https://cdn.vuetifyjs.com/images/logos/v-alt.svg" width="48" height="48">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
## Become a sponsor
|
||||
|
||||
你的公司是否使用了 vue-apollo 或 vue-cli-plugin-apollo 来构建出色的应用程序？加入资助者并成为赞助商，在此文档中添加你的 logo！在 Patreon 上支持我，将节省我用于谋生的工作时间，从而能够在如 vue-apollo 一样的免费开源软件上工作更多！谢谢！
|
||||
你的公司是否使用了 vue-apollo 或 vue-cli-plugin-apollo 来构建出色的应用程序？加入资助者并成为赞助商，在此文档中添加你的 logo！在 Patreon 上支持我，将节省我用于谋生的工作时间，从而能够在如 vue-apollo 一样的免费开源软件上工作更多！谢谢！
|
||||
|
||||
<p style="text-align: center;">
|
||||
<a href="https://www.patreon.com/akryum" target="_blank">
|
||||
@@ -26,6 +36,21 @@
|
||||
</a>
|
||||
</p>
|
||||
|
||||
## 幻灯片
|
||||
|
||||
如果你从未听说过 GraphQL 或 Apollo，在这里先睹为快：
|
||||
|
||||
<iframe
|
||||
src="//slides.com/akryum/vue-apollo-graphql/embed?style=light"
|
||||
width="100%"
|
||||
height="500"
|
||||
scrolling="no"
|
||||
frameborder="0"
|
||||
webkitallowfullscreen
|
||||
mozallowfullscreen
|
||||
allowfullscreen
|
||||
/>
|
||||
|
||||
## 什么是 GraphQL？
|
||||
|
||||
[GraphQL](https://graphql.org/) 是一个旨在简化前端和后端之间通信的规范。它主要由服务端的 schema 语言和客户端的查询语言组成。
|
||||
@@ -36,13 +61,15 @@
|
||||
|
||||
## 链接
|
||||
|
||||
[⚡ 在线演示](https://jsfiddle.net/Akryum/oyejk2qL/)
|
||||
|
||||
[<img src="https://assets-cdn.github.com/favicon.ico" alt="icon" width="16" height="16"/> Vue-cli 插件](https://github.com/Akryum/vue-cli-plugin-apollo)
|
||||
|
||||
[<img src="https://assets-cdn.github.com/favicon.ico" alt="icon" width="16" height="16"/> 更多 vue-apollo 示例](https://github.com/Akryum/vue-apollo-example)
|
||||
|
||||
[<img src="https://assets-cdn.github.com/favicon.ico" alt="icon" width="16" height="16"/> Apollo graphql server 示例](https://github.com/Akryum/apollo-server-example)
|
||||
|
||||
[<img src="http://graphql.cn/favicon.ico" alt="icon" width="16" height="16"/> GraphQL 中文文档](http://graphql.cn/)
|
||||
[<img src="https://graphql.org/favicon.ico" alt="icon" width="16" height="16"/> GraphQL 中文文档](http://graphql.cn/)
|
||||
|
||||
[<img src="https://www.howtographql.com/static/howtographql.d1a2e5b4.svg" alt="icon" width="16" height="16"/> How to GraphQL](https://www.howtographql.com/vue-apollo/0-introduction/)
|
||||
|
||||
|
||||
@@ -1,33 +1,67 @@
|
||||
# 在 Vue 组件中使用 Apollo
|
||||
# 在 Vue 组件中的用法
|
||||
|
||||
要在你的 Vue 组件中声明 apollo 查询，只需添加一个 `apollo` 对象：
|
||||
在你的应用程序中安装了 `vue-apollo` 之后，所有组件都可以通过 `apollo` 这一特殊选项来使用 Apollo。
|
||||
|
||||
## `apollo` 选项
|
||||
|
||||
要在你的 Vue 组件中声明 apollo 查询，在组件的选项中添加 `apollo` 对象：
|
||||
|
||||
```js
|
||||
new Vue({
|
||||
apollo: {
|
||||
// Apollo 的具体选项
|
||||
},
|
||||
apollo: {
|
||||
// Apollo 的具体选项
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
在一个 `.vue` 文件中：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div>My component</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
apollo: {
|
||||
// Vue-Apollo 选项放在这里
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## `$apollo`
|
||||
|
||||
在一个有着 `apolloProvider` 选项的组件之下的所有组件都可以使用一个 `$apollo` 辅助函数。这是你的组件和 Apollo 之间的胶水层，它可以为你完成所有繁重的工作（包括自动更新和销毁）。
|
||||
|
||||
在你的每个 vue 组件中，你都可以通过 `this.$apollo.provider.defaultClient` 或 `this.$apollo.provider.clients.<key>`（用于 [多客户端](../multiple-clients.md)）来访问 [apollo-client](https://www.apollographql.com/docs/react/) 实例。
|
||||
|
||||
如果你很好奇，请查看 [$apollo API](../../api/dollar-apollo.md)。
|
||||
|
||||
## 查询（Queries）
|
||||
|
||||
为每个你需要通过 Apollo 的查询结果提供数据的 Vue 属性，在 `apollo` 对象中添加一个对应属性。
|
||||
|
||||
```js
|
||||
```vue
|
||||
<template>
|
||||
<div>{{ hello }}</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import gql from 'graphql-tag'
|
||||
|
||||
export default {
|
||||
apollo: {
|
||||
// 简单的查询，将更新 'hello' 这个 vue 属性
|
||||
hello: gql`query { hello }`,
|
||||
hello: gql`query {
|
||||
hello
|
||||
}`,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
更多细节请查看 [查询](./queries.md) 一章。
|
||||
请查看 [查询](./queries.md) 一章以了解更多。
|
||||
|
||||
## 变更（Mutations）
|
||||
|
||||
@@ -54,79 +88,10 @@ methods: {
|
||||
}
|
||||
```
|
||||
|
||||
更多细节请查看 [变更](./mutations.md) 一章。
|
||||
请查看 [变更](./mutations.md) 一章以了解更多。
|
||||
|
||||
## 特殊选项
|
||||
|
||||
`apollo` 对象中的特殊选项以 `$` 开头表示。
|
||||
|
||||
- `$skip` 用于禁用所有查询和订阅（后文详述）
|
||||
- `$skipAllQueries` 用于禁用所有查询（后文详述）
|
||||
- `$skipAllSubscriptions` 用于禁用所有订阅（后文详述）
|
||||
- `$deep` 用于当为以上的属性提供函数时，通过 `deep: true` 进行监听
|
||||
- `$error` 用于捕获默认处理函数中的错误（详见智能查询的 `error` 高级选项）
|
||||
- `$query` 用于将默认选项应用于组件中的所有查询
|
||||
|
||||
示例：
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
loading: 0,
|
||||
}
|
||||
},
|
||||
apollo: {
|
||||
$query: {
|
||||
loadingKey: 'loading',
|
||||
},
|
||||
query1: { ... },
|
||||
query2: { ... },
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
你可以在 apollo provider 中为 `apollo` 定义一套默认选项。例如：
|
||||
|
||||
```js
|
||||
const apolloProvider = new VueApollo({
|
||||
defaultClient: apolloClient,
|
||||
defaultOptions: {
|
||||
// 将应用于组件中的所有查询的 apollo 选项
|
||||
$query: {
|
||||
loadingKey: 'loading',
|
||||
fetchPolicy: 'cache-and-network',
|
||||
},
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
## 全部跳过
|
||||
|
||||
你可以使用 `skipAllQueries` 禁用组件的所有查询，使用 `skipAllSubscriptions` 禁用所有订阅，或是使用 `skipAll` 将两者全部禁用：
|
||||
|
||||
```js
|
||||
this.$apollo.skipAllQueries = true
|
||||
this.$apollo.skipAllSubscriptions = true
|
||||
this.$apollo.skipAll = true
|
||||
```
|
||||
|
||||
你也可以在组件的 `apollo` 选项中声明这些属性。它们可以是布尔值：
|
||||
|
||||
```js
|
||||
apollo: {
|
||||
$skipAll: true
|
||||
}
|
||||
```
|
||||
|
||||
或是响应式函数：
|
||||
|
||||
```js
|
||||
apollo: {
|
||||
$skipAll () {
|
||||
return this.foo === 42
|
||||
}
|
||||
}
|
||||
```
|
||||
请查看 [特殊选项](./special-options.md) 一章以了解更多。
|
||||
|
||||
@@ -96,7 +96,7 @@ for (let i = 0; i < 42; i++) {
|
||||
addTag(faker.random.word())
|
||||
}
|
||||
|
||||
function addTag(label) {
|
||||
function addTag (label) {
|
||||
let t = {
|
||||
id: id++,
|
||||
label,
|
||||
@@ -107,12 +107,12 @@ function addTag(label) {
|
||||
|
||||
export const resolvers = {
|
||||
Query: {
|
||||
tags(root, args, context) {
|
||||
tags (root, args, context) {
|
||||
return tags
|
||||
},
|
||||
},
|
||||
Mutation: {
|
||||
addTag(root, { label }, context) {
|
||||
addTag (root, { label }, context) {
|
||||
console.log(`adding tag '${label}'`)
|
||||
return addTag(label)
|
||||
},
|
||||
|
||||
@@ -45,7 +45,7 @@ export default {
|
||||
tagsPage: {
|
||||
// GraphQL 查询
|
||||
query: gql`query tagsPage ($page: Int!, $pageSize: Int!) {
|
||||
tagsPage(page: $page, size: $pageSize) {
|
||||
tagsPage (page: $page, size: $pageSize) {
|
||||
tags {
|
||||
id
|
||||
label
|
||||
@@ -62,8 +62,8 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
showMore() {
|
||||
this.page ++
|
||||
showMore () {
|
||||
this.page++
|
||||
// 获取更多数据并转换原始结果
|
||||
this.$apollo.queries.tagsPage.fetchMore({
|
||||
// 新的变量
|
||||
|
||||
@@ -1,5 +1,13 @@
|
||||
# 查询
|
||||
|
||||
在 GraphQL 中，查询是发送给 API 以检索数据的请求。像这样使用 *GraphQL 文档* 来表示：
|
||||
|
||||
```graphql
|
||||
query myHelloQueryName {
|
||||
hello
|
||||
}
|
||||
```
|
||||
|
||||
为每个你需要通过 Apollo 的查询结果提供数据的 Vue 属性，在 `apollo` 对象中添加一个对应属性。每一个属性都将创建一个智能查询。
|
||||
|
||||
## 简单查询
|
||||
@@ -47,8 +55,8 @@ schema {
|
||||
|
||||
export const resolvers = {
|
||||
Query: {
|
||||
hello(root, args, context) {
|
||||
return "Hello world!"
|
||||
hello (root, args, context) {
|
||||
return 'Hello world!'
|
||||
},
|
||||
},
|
||||
}
|
||||
@@ -141,7 +149,7 @@ schema {
|
||||
|
||||
export const resolvers = {
|
||||
Query: {
|
||||
ping(root, { message }, context) {
|
||||
ping (root, { message }, context) {
|
||||
return `Answering ${message}`
|
||||
},
|
||||
},
|
||||
@@ -163,7 +171,7 @@ export const resolvers = {
|
||||
|
||||
## 加载状态
|
||||
|
||||
你可以通过 `$apollo.loading` 属性显示加载状态：
|
||||
你可以通过 `$apollo.loading` 属性显示加载状态：
|
||||
|
||||
```vue
|
||||
<div v-if="$apollo.loading">Loading...</div>
|
||||
@@ -253,7 +261,7 @@ apollo: {
|
||||
ping(message: $message)
|
||||
}`,
|
||||
// 响应式参数
|
||||
variables() {
|
||||
variables () {
|
||||
// 在这里使用 vue 响应式属性
|
||||
return {
|
||||
message: this.pingInput,
|
||||
@@ -293,13 +301,13 @@ apollo: {
|
||||
}
|
||||
}`,
|
||||
// 响应式变量
|
||||
variables() {
|
||||
variables () {
|
||||
return {
|
||||
type: this.type,
|
||||
}
|
||||
},
|
||||
// 禁用这个查询
|
||||
skip() {
|
||||
skip () {
|
||||
return this.skipQuery
|
||||
},
|
||||
},
|
||||
@@ -362,7 +370,7 @@ for (let i = 0; i < 42; i++) {
|
||||
addTag(casual.word)
|
||||
}
|
||||
|
||||
function addTag(label) {
|
||||
function addTag (label) {
|
||||
let t = {
|
||||
id: id++,
|
||||
label,
|
||||
@@ -373,7 +381,7 @@ function addTag(label) {
|
||||
|
||||
export const resolvers = {
|
||||
Query: {
|
||||
tags(root, args, context) {
|
||||
tags (root, args, context) {
|
||||
return tags
|
||||
},
|
||||
},
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
|
||||
# 特殊选项
|
||||
|
||||
`apollo` 对象中的特殊选项以 `$` 开头表示。
|
||||
|
||||
- `$skip` 用于禁用所有查询和订阅（后文详述）
|
||||
- `$skipAllQueries` 用于禁用所有查询（后文详述）
|
||||
- `$skipAllSubscriptions` 用于禁用所有订阅（后文详述）
|
||||
- `$deep` 用于当为以上的属性提供函数时，通过 `deep: true` 进行监听
|
||||
- `$error` 用于捕获默认处理函数中的错误（详见智能查询的 `error` 高级选项）
|
||||
- `$query` 用于将默认选项应用于组件中的所有查询
|
||||
|
||||
示例：
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
loading: 0,
|
||||
}
|
||||
},
|
||||
apollo: {
|
||||
$query: {
|
||||
loadingKey: 'loading',
|
||||
},
|
||||
query1: { ... },
|
||||
query2: { ... },
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
你可以在 apollo provider 中为 `apollo` 定义一套默认选项。例如：
|
||||
|
||||
```js
|
||||
const apolloProvider = new VueApollo({
|
||||
defaultClient: apolloClient,
|
||||
defaultOptions: {
|
||||
// 将应用于组件中的所有查询的 apollo 选项
|
||||
$query: {
|
||||
loadingKey: 'loading',
|
||||
fetchPolicy: 'cache-and-network',
|
||||
},
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
## 全部跳过
|
||||
|
||||
你可以使用 `skipAllQueries` 禁用组件的所有查询，使用 `skipAllSubscriptions` 禁用所有订阅，或是使用 `skipAll` 将两者全部禁用：
|
||||
|
||||
```js
|
||||
this.$apollo.skipAllQueries = true
|
||||
this.$apollo.skipAllSubscriptions = true
|
||||
this.$apollo.skipAll = true
|
||||
```
|
||||
|
||||
你也可以在组件的 `apollo` 选项中声明这些属性。它们可以是布尔值：
|
||||
|
||||
```js
|
||||
apollo: {
|
||||
$skipAll: true
|
||||
}
|
||||
```
|
||||
|
||||
或是响应式函数：
|
||||
|
||||
```js
|
||||
apollo: {
|
||||
$skipAll () {
|
||||
return this.foo === 42
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -193,7 +193,7 @@ apollo: {
|
||||
}
|
||||
}`,
|
||||
// 响应式变量
|
||||
variables() {
|
||||
variables () {
|
||||
// 像常规查询一样运作
|
||||
// 在每次改变值时都会使用正确的变量重新订阅
|
||||
return {
|
||||
@@ -201,7 +201,7 @@ apollo: {
|
||||
}
|
||||
},
|
||||
// 结果钩子
|
||||
result(data) {
|
||||
result (data) {
|
||||
console.log(data)
|
||||
},
|
||||
},
|
||||
@@ -234,18 +234,18 @@ apollo: {
|
||||
}
|
||||
}`,
|
||||
// 响应式变量
|
||||
variables() {
|
||||
variables () {
|
||||
return {
|
||||
type: this.type,
|
||||
}
|
||||
},
|
||||
// 结果钩子
|
||||
result(data) {
|
||||
result (data) {
|
||||
// 更新本地数据
|
||||
this.tags.push(data.tagAdded)
|
||||
},
|
||||
// 跳过这个订阅
|
||||
skip() {
|
||||
skip () {
|
||||
return this.skipSubscription
|
||||
}
|
||||
},
|
||||
@@ -282,7 +282,7 @@ created () {
|
||||
使用 `$apollo.subscribe()` 方法来创建一个 GraphQL 订阅，当组件被销毁时将自动终止。它**不会**创建智能订阅。
|
||||
|
||||
```js
|
||||
mounted() {
|
||||
mounted () {
|
||||
const subQuery = gql`subscription tags($type: String!) {
|
||||
tagAdded(type: $type) {
|
||||
id
|
||||
@@ -299,10 +299,10 @@ mounted() {
|
||||
})
|
||||
|
||||
observer.subscribe({
|
||||
next(data) {
|
||||
next (data) {
|
||||
console.log(data)
|
||||
},
|
||||
error(error) {
|
||||
error (error) {
|
||||
console.error(error)
|
||||
},
|
||||
})
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
这样做的好处是你可以直接在模板中使用这些组件，而不是使用组件的 `apollo` 选项。在某些情况下，你甚至不需要在 `.vue` 中添加脚本部分！这种代码会更加声明式。
|
||||
|
||||
这是一个简单的例子：
|
||||
这是一个模板中 `ApolloQuery` 的简单示例：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# 安装
|
||||
|
||||
## Vue CLI Plugin
|
||||
## Vue CLI 插件
|
||||
|
||||
我为 [vue-cli](http://cli.vuejs.org) 制作了一个插件，因此仅用两分钟你就可以添加 Apollo（附带一个可选的 GraphQL 服务器）！✨🚀
|
||||
|
||||
@@ -14,11 +14,17 @@ vue add apollo
|
||||
|
||||
[更多信息](https://github.com/Akryum/vue-cli-plugin-apollo)
|
||||
|
||||
## Apollo Boost
|
||||
## 手动安装
|
||||
|
||||
Apollo Boost 是一种零配置开始使用 Apollo Client 的方式。它包含一些实用的默认值，例如我们推荐的 `InMemoryCache` 和 `HttpLink`，它非常适合用于快速启动开发：
|
||||
### 1. Apollo Client
|
||||
|
||||
安装：
|
||||
你可以使用 [Apollo Boost](#apollo-boost) 或 [直接使用 Apollo Client](#apollo-client-full-configuration)（需要更多配置工作）。
|
||||
|
||||
#### Apollo Boost
|
||||
|
||||
Apollo Boost 是一种零配置开始使用 Apollo Client 的方式。它包含一些实用的默认值，例如我们推荐的 `InMemoryCache` 和 `HttpLink`，它非常适合用于快速启动开发。
|
||||
|
||||
将它与 `vue-apollo` 和 `graphql` 一起安装：
|
||||
|
||||
```
|
||||
npm install --save vue-apollo graphql apollo-boost
|
||||
@@ -30,29 +36,20 @@ npm install --save vue-apollo graphql apollo-boost
|
||||
yarn add vue-apollo graphql apollo-boost
|
||||
```
|
||||
|
||||
### Apollo client
|
||||
|
||||
在你的应用中创建一个 `ApolloClient` 实例并安装 `VueApollo` 插件：
|
||||
在你的应用中创建一个 `ApolloClient` 实例：
|
||||
|
||||
```js
|
||||
import Vue from 'vue'
|
||||
import ApolloClient from "apollo-boost"
|
||||
import VueApollo from "vue-apollo"
|
||||
import ApolloClient from 'apollo-boost'
|
||||
|
||||
const apolloProvider = new VueApollo({
|
||||
defaultClient: new ApolloClient({
|
||||
uri: "https://api.graphcms.com/simple/v1/awesomeTalksClone"
|
||||
})
|
||||
const apolloClient = new ApolloClient({
|
||||
// 你需要在这里使用绝对路径
|
||||
uri: 'https://api.graphcms.com/simple/v1/awesomeTalksClone'
|
||||
})
|
||||
|
||||
Vue.use(VueApollo)
|
||||
```
|
||||
|
||||
#### Apollo 客户端完整配置
|
||||
|
||||
|
||||
## 手动操作
|
||||
|
||||
如果你想要更细的粒度控制，尝试在服务器端配置之前安装这些包，并且将 apollo 添加到 meteor.js 中。
|
||||
如果你想要更细粒度的控制，安装这些包来代替 `apollo-boost`：
|
||||
|
||||
```
|
||||
npm install --save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag
|
||||
@@ -64,45 +61,57 @@ npm install --save vue-apollo graphql apollo-client apollo-link apollo-link-http
|
||||
yarn add vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag
|
||||
```
|
||||
|
||||
### Apollo 客户端
|
||||
|
||||
在你的应用中创建一个 `ApolloClient` 实例并安装 `VueApollo` 插件：
|
||||
在你的应用中创建一个 `ApolloClient` 实例：
|
||||
|
||||
```js
|
||||
import Vue from 'vue'
|
||||
import { ApolloClient } from 'apollo-client'
|
||||
import { HttpLink } from 'apollo-link-http'
|
||||
import { InMemoryCache } from 'apollo-cache-inmemory'
|
||||
import VueApollo from 'vue-apollo'
|
||||
|
||||
// 与 API 的 HTTP 连接
|
||||
const httpLink = new HttpLink({
|
||||
// 你需要在这里使用绝对路径
|
||||
uri: 'http://localhost:3020/graphql',
|
||||
})
|
||||
|
||||
// 缓存实现
|
||||
const cache = new InMemoryCache()
|
||||
|
||||
// 创建 apollo 客户端
|
||||
const apolloClient = new ApolloClient({
|
||||
link: httpLink,
|
||||
cache: new InMemoryCache(),
|
||||
connectToDevTools: true,
|
||||
cache,
|
||||
})
|
||||
```
|
||||
|
||||
const apolloProvider = new VueApollo({
|
||||
defaultClient: apolloClient,
|
||||
})
|
||||
### 2. 安装插件到 Vue
|
||||
|
||||
```js
|
||||
import Vue from 'vue'
|
||||
import VueApollo from 'vue-apollo'
|
||||
|
||||
// 安装 vue 插件
|
||||
Vue.use(VueApollo)
|
||||
```
|
||||
|
||||
## Apollo provider
|
||||
### 3. Apollo provider
|
||||
|
||||
Provider 保存了可以在接下来被所有子组件使用的 Apollo 客户端实例。通过 `apolloProvider` 选项将它注入你的组件：
|
||||
Provider 保存了可以在接下来被所有子组件使用的 Apollo 客户端实例。
|
||||
|
||||
```js
|
||||
const apolloProvider = new VueApollo({
|
||||
defaultClient: apolloClient,
|
||||
})
|
||||
```
|
||||
|
||||
使用 `apolloProvider` 选项将它添加到你的应用程序：
|
||||
|
||||
```js
|
||||
new Vue({
|
||||
el: '#app',
|
||||
// 像 vue-router 或 vuex 一样注入 apolloProvider
|
||||
apolloProvider,
|
||||
render: h => h(App),
|
||||
})
|
||||
```
|
||||
```
|
||||
|
||||
现在你已经完成了在组件中使用 Apollo 的所有准备了！
|
||||
|
||||
@@ -13,7 +13,7 @@ export default {
|
||||
}
|
||||
`
|
||||
},
|
||||
mounted() {
|
||||
mounted () {
|
||||
// 变更 hello 消息
|
||||
this.$apollo
|
||||
.mutate({
|
||||
@@ -30,8 +30,11 @@ export default {
|
||||
}
|
||||
```
|
||||
|
||||
[示例项目](https://codesandbox.io/s/zqqj82396p) (感谢 @chriswingler)
|
||||
用这种方法来管理客户端状态正变得流行起来。有些项目甚至将其用作 Vuex（或其他灵感来源于 Flux 的解决方案）的替代品。
|
||||
|
||||
[Todo App](https://codesandbox.io/s/x2jr96r8pp) (感谢 @NikkitaFTW)
|
||||
## 示例
|
||||
|
||||
---
|
||||
- [示例项目](https://codesandbox.io/s/zqqj82396p) (by @chriswingler)
|
||||
- [Todo App](https://codesandbox.io/s/x2jr96r8pp) (by @NikkitaFTW)
|
||||
|
||||
---
|
||||
|
||||
@@ -141,7 +141,11 @@ import Vue from 'vue'
|
||||
import ApolloSSR from 'vue-apollo/ssr'
|
||||
import App from './App.vue'
|
||||
|
||||
Vue.use(ApolloSSR)
|
||||
Vue.use(ApolloSSR, {
|
||||
// SSR 配置
|
||||
fetchPolicy: 'network-only',
|
||||
suppressRenderErrors: false,
|
||||
})
|
||||
|
||||
export default () => new Promise((resolve, reject) => {
|
||||
const { app, router, store, apolloProvider } = CreateApp({
|
||||
@@ -359,4 +363,6 @@ export default () => new Promise((resolve, reject) => {
|
||||
// 预取，渲染 HTML（参见上文）
|
||||
})
|
||||
})
|
||||
```
|
||||
```
|
||||
|
||||
请查看 [SSR API](../api/ssr.md) 了解更多详情和其他功能。
|
||||
|
||||
+31
-31
@@ -8,26 +8,26 @@
|
||||
|
||||
```js
|
||||
test('displayed heroes correctly with query data', () => {
|
||||
const wrapper = shallowMount(App, { localVue });
|
||||
wrapper.setData({
|
||||
allHeroes: [
|
||||
{
|
||||
id: 'some-id',
|
||||
name: 'Evan You',
|
||||
image: 'https://pbs.twimg.com/profile_images/888432310504370176/mhoGA4uj_400x400.jpg',
|
||||
twitter: 'youyuxi',
|
||||
github: 'yyx990803',
|
||||
},
|
||||
],
|
||||
});
|
||||
expect(wrapper.element).toMatchSnapshot();
|
||||
});
|
||||
const wrapper = shallowMount(App, { localVue })
|
||||
wrapper.setData({
|
||||
allHeroes: [
|
||||
{
|
||||
id: 'some-id',
|
||||
name: 'Evan You',
|
||||
image: 'https://pbs.twimg.com/profile_images/888432310504370176/mhoGA4uj_400x400.jpg',
|
||||
twitter: 'youyuxi',
|
||||
github: 'yyx990803',
|
||||
},
|
||||
],
|
||||
})
|
||||
expect(wrapper.element).toMatchSnapshot()
|
||||
})
|
||||
```
|
||||
对于简单的变更测试，你需要检查组件中是否调用了 `$apollo` 的 `mutate` 方法。接下来的示例在 `addHero` 方法中调用了变更：
|
||||
|
||||
```js
|
||||
test('called Apollo mutation in addHero() method', () => {
|
||||
const mutate = jest.fn();
|
||||
const mutate = jest.fn()
|
||||
const wrapper = mount(App, {
|
||||
localVue,
|
||||
mocks: {
|
||||
@@ -35,10 +35,10 @@ test('called Apollo mutation in addHero() method', () => {
|
||||
mutate,
|
||||
},
|
||||
},
|
||||
});
|
||||
wrapper.vm.addHero();
|
||||
expect(mutate).toBeCalled();
|
||||
});
|
||||
})
|
||||
wrapper.vm.addHero()
|
||||
expect(mutate).toBeCalled()
|
||||
})
|
||||
```
|
||||
|
||||
## 使用模拟 GraqhQL schema 进行测试
|
||||
@@ -73,25 +73,25 @@ const sourceSchema = `
|
||||
addHero(hero: HeroInput!): VueHero!
|
||||
deleteHero(name: String!): Boolean
|
||||
}
|
||||
`;
|
||||
`
|
||||
```
|
||||
下一步是使用 `graphql-tools` 方法创建可执行的 schema：
|
||||
|
||||
```js
|
||||
import { makeExecutableSchema } from 'graphql-tools';
|
||||
import { makeExecutableSchema } from 'graphql-tools'
|
||||
...
|
||||
const schema = makeExecutableSchema({
|
||||
typeDefs: sourceSchema,
|
||||
});
|
||||
})
|
||||
```
|
||||
之后你需要向 schema 添加模拟函数：
|
||||
|
||||
```js
|
||||
import { addMockFunctionsToSchema } from 'graphql-tools';
|
||||
import { addMockFunctionsToSchema } from 'graphql-tools'
|
||||
...
|
||||
addMockFunctionsToSchema({
|
||||
schema,
|
||||
});
|
||||
})
|
||||
```
|
||||
指定 GraphQL 查询字符串：
|
||||
|
||||
@@ -106,15 +106,15 @@ const query = `
|
||||
image
|
||||
}
|
||||
}
|
||||
`;
|
||||
`
|
||||
```
|
||||
在测试用例中调用 GraphQL 查询，保存响应到组件数据中，然后检查渲染完成的组件是否与快照匹配：
|
||||
|
||||
```js
|
||||
graphql(schema, query).then(result => {
|
||||
wrapper.setData(result.data);
|
||||
expect(wrapper.element).toMatchSnapshot();
|
||||
});
|
||||
wrapper.setData(result.data)
|
||||
expect(wrapper.element).toMatchSnapshot()
|
||||
})
|
||||
```
|
||||
在这个用例中，所有字符串字段将等于 `Hello World` 且所有数值都将为负数。如果你想要获得更贴近现实的响应，则应当为某些查询指定解析器：
|
||||
|
||||
@@ -132,7 +132,7 @@ const resolvers = {
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
}
|
||||
```
|
||||
然后你需要将解析器添加到可执行 schema，并在添加模拟函数时将 `preserveResolvers` 属性设置为 true：
|
||||
|
||||
@@ -140,12 +140,12 @@ const resolvers = {
|
||||
const schema = makeExecutableSchema({
|
||||
typeDefs: sourceSchema,
|
||||
resolvers,
|
||||
});
|
||||
})
|
||||
|
||||
addMockFunctionsToSchema({
|
||||
schema,
|
||||
preserveResolvers: true,
|
||||
});
|
||||
})
|
||||
```
|
||||
你可以用同样的方法来测试变更。
|
||||
|
||||
|
||||
Reference in New Issue
Block a user