From 2fdb8dc9bd2016c32dcfd13f55939f3a671d4309 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=AB=98=E8=8B=B1=E5=81=A5?= Date: Mon, 24 Dec 2018 20:54:58 +0800 Subject: [PATCH] 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 --- docs/.vuepress/config.js | 1 + docs/api/ssr.md | 2 +- docs/zh-cn/README.md | 14 ++- docs/zh-cn/api/apollo-provider.md | 2 +- docs/zh-cn/api/smart-query.md | 19 ++-- docs/zh-cn/api/ssr.md | 68 +++++++++++- docs/zh-cn/guide/README.md | 33 +++++- docs/zh-cn/guide/apollo/README.md | 123 ++++++++------------- docs/zh-cn/guide/apollo/mutations.md | 6 +- docs/zh-cn/guide/apollo/pagination.md | 6 +- docs/zh-cn/guide/apollo/queries.md | 26 +++-- docs/zh-cn/guide/apollo/special-options.md | 75 +++++++++++++ docs/zh-cn/guide/apollo/subscriptions.md | 16 +-- docs/zh-cn/guide/components/README.md | 2 +- docs/zh-cn/guide/installation.md | 77 +++++++------ docs/zh-cn/guide/local-state.md | 11 +- docs/zh-cn/guide/ssr.md | 10 +- docs/zh-cn/guide/testing.md | 62 +++++------ 18 files changed, 363 insertions(+), 190 deletions(-) create mode 100644 docs/zh-cn/guide/apollo/special-options.md diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 994b020..2ebfd1f 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -160,6 +160,7 @@ module.exports = { 'apollo/mutations', 'apollo/subscriptions', 'apollo/pagination', + 'apollo/special-options', ], }, { diff --git a/docs/api/ssr.md b/docs/api/ssr.md index d7e04ec..a0471dc 100644 --- a/docs/api/ssr.md +++ b/docs/api/ssr.md @@ -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: diff --git a/docs/zh-cn/README.md b/docs/zh-cn/README.md index b55d4d9..f1f745b 100644 --- a/docs/zh-cn/README.md +++ b/docs/zh-cn/README.md @@ -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) ---

@@ -28,3 +28,15 @@ footer: LICENCE ISC - Created by Guillaume CHAU (@Akryum) VueSchool logo

+ +### 铜牌赞助商 + +

+ + + +

+ +::: tip 当前版本 +中文文档现在同步至 v3.0.0-beta.26 +::: diff --git a/docs/zh-cn/api/apollo-provider.md b/docs/zh-cn/api/apollo-provider.md index a22c9c3..af284b0 100644 --- a/docs/zh-cn/api/apollo-provider.md +++ b/docs/zh-cn/api/apollo-provider.md @@ -15,7 +15,7 @@ const apolloProvider = new VueApollo({ defaultClient: apolloClient, // 'apollo' 对象的默认定义 defaultOptions: { - // 详见 'apollo' 的定义 + // 详见 'apollo' 的定义 // 例如：默认查询选项 $query: { loadingKey: 'loading', diff --git a/docs/zh-cn/api/smart-query.md b/docs/zh-cn/api/smart-query.md index 4e1947c..730c4b8 100644 --- a/docs/zh-cn/api/smart-query.md +++ b/docs/zh-cn/api/smart-query.md @@ -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 }, diff --git a/docs/zh-cn/api/ssr.md b/docs/zh-cn/api/ssr.md index b8176a3..6c3ed04 100644 --- a/docs/zh-cn/api/ssr.md +++ b/docs/zh-cn/api/ssr.md @@ -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 + }, +}) +``` diff --git a/docs/zh-cn/guide/README.md b/docs/zh-cn/guide/README.md index b580458..b7597ac 100644 --- a/docs/zh-cn/guide/README.md +++ b/docs/zh-cn/guide/README.md @@ -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 @@

+### 铜牌赞助商 + +

+ + + +

+ ## Become a sponsor -你的公司是否使用了 vue-apollo 或 vue-cli-plugin-apollo 来构建出色的应用程序？加入资助者并成为赞助商，在此文档中添加你的 logo！在 Patreon 上支持我，将节省我用于谋生的工作时间，从而能够在如 vue-apollo 一样的免费开源软件上工作更多！谢谢！ +你的公司是否使用了 vue-apollo 或 vue-cli-plugin-apollo 来构建出色的应用程序？加入资助者并成为赞助商，在此文档中添加你的 logo！在 Patreon 上支持我，将节省我用于谋生的工作时间，从而能够在如 vue-apollo 一样的免费开源软件上工作更多！谢谢！

@@ -26,6 +36,21 @@

+## 幻灯片 + +如果你从未听说过 GraphQL 或 Apollo，在这里先睹为快： + +