From f73c5777385993add80ffd43eec1fe62ce692dbf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=AB=98=E8=8B=B1=E5=81=A5?= Date: Thu, 23 May 2019 02:24:24 +0800 Subject: [PATCH] docs: sync Chinese doc to 3.0.0-beta.30 (#604) * docs: sync Chinese doc to 3.0.0-beta.29 * docs: sync Chinese doc to 3.0.0-beta.30 * main page --- docs/.vuepress/config.js | 2 +- docs/api/apollo-query.md | 2 +- docs/guide/local-state.md | 6 +- docs/zh-cn/README.md | 2 +- docs/zh-cn/api/apollo-mutation.md | 27 +- docs/zh-cn/api/apollo-query.md | 43 +- docs/zh-cn/api/apollo-subscribe-to-more.md | 50 +- docs/zh-cn/api/smart-subscription.md | 2 +- docs/zh-cn/guide/apollo/subscriptions.md | 13 +- docs/zh-cn/guide/components/README.md | 40 +- docs/zh-cn/guide/components/mutation.md | 197 +++++++- docs/zh-cn/guide/components/query.md | 440 +++++++++++++++++- .../guide/components/subscribe-to-more.md | 18 +- docs/zh-cn/guide/installation.md | 30 +- docs/zh-cn/guide/local-state.md | 301 ++++++++++-- docs/zh-cn/guide/multiple-clients.md | 54 ++- 16 files changed, 1116 insertions(+), 111 deletions(-) diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 1b6edfb..8edf146 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -207,8 +207,8 @@ module.exports = { collapsable: false, children: [ 'apollo-query', - 'apollo-subscribe-to-more', 'apollo-mutation', + 'apollo-subscribe-to-more', ], }, ], diff --git a/docs/api/apollo-query.md b/docs/api/apollo-query.md index 116adb8..ae4db64 100644 --- a/docs/api/apollo-query.md +++ b/docs/api/apollo-query.md @@ -52,7 +52,7 @@ To enable support of `gql` string tag in Vue templates, see the necessary setup - `result`: Apollo Query result - `result.data`: Data returned by the query (can be transformed by the `update` prop) - - `result.fullData`: Raw data returned by the query (not transformed by the `updated` prop) + - `result.fullData`: Raw data returned by the query (not transformed by the `update` prop) - `result.loading`: Boolean indicating that a request is in flight (you may need to set `notifyOnNetworkStatusChange` prop for it to change) - `result.error`: Eventual error for the current result - `result.networkStatus`: See [apollo networkStatus](https://www.apollographql.com/docs/react/basics/queries.html#graphql-query-data-networkStatus) diff --git a/docs/guide/local-state.md b/docs/guide/local-state.md index 0e46be2..9186b6e 100644 --- a/docs/guide/local-state.md +++ b/docs/guide/local-state.md @@ -38,7 +38,7 @@ export const typeDefs = gql` `gql` here stands for the JavaScript template literal tag that parses GraphQL query strings. -Now we need to add `typeDefs` to our Apollo client +Now we need to add `typeDefs` to our Apollo client. ```js{4-5} // main.js @@ -50,7 +50,7 @@ const apolloClient = new ApolloClient({ ``` :::warning WARNING -As you can see, we've added also an empty `resolvers` object here: if we don't assign it to the Apollo client options, it won't recognize the queries to local state and will try to send a request to remote URL instead +As you can see, we've added also an empty `resolvers` object here: if we don't assign it to the Apollo client options, it won't recognize the queries to local state and will try to send a request to remote URL instead. ::: ## Extending a remote GraphQL schema locally @@ -264,7 +264,7 @@ const apolloClient = new ApolloClient({ }); ``` -After this, we can use the mutation in our Vue component like normal [mutations](apollo/mutations.md) +After this, we can use the mutation in our Vue component like normal [mutations](apollo/mutations.md): ```js // App.vue diff --git a/docs/zh-cn/README.md b/docs/zh-cn/README.md index b1e0da0..2762352 100644 --- a/docs/zh-cn/README.md +++ b/docs/zh-cn/README.md @@ -54,5 +54,5 @@ footer: LICENCE MIT - Created by Guillaume CHAU (@Akryum)

::: tip 当前版本 -中文文档现在同步至 v3.0.0-beta.28 +中文文档现在同步至 v3.0.0-beta.30 ::: diff --git a/docs/zh-cn/api/apollo-mutation.md b/docs/zh-cn/api/apollo-mutation.md index 8b6a794..fe22b18 100644 --- a/docs/zh-cn/api/apollo-mutation.md +++ b/docs/zh-cn/api/apollo-mutation.md @@ -1,8 +1,32 @@ # ApolloMutation 组件 +示例： + +```vue + + + +``` + ## Props -- `mutation`：GraphQL 查询（由 `graphql-tag` 转换） +- `mutation`：GraphQL 查询（由 `graphql-tag` 转换）或一个接收 `gql` 标签作为参数并返回转换后的查询的函数 - `variables`：GraphQL 变量对象 - `optimisticResponse`：详见 [乐观 UI](https://www.apollographql.com/docs/react/features/optimistic-ui.html) - `update`：详见 [变更后更新缓存](https://www.apollographql.com/docs/react/api/react-apollo.html#graphql-mutation-options-update) @@ -21,3 +45,4 @@ - `done(resultObject)` - `error(errorObject)` +- `loading(boolean)` diff --git a/docs/zh-cn/api/apollo-query.md b/docs/zh-cn/api/apollo-query.md index 4b0b0e9..d45059a 100644 --- a/docs/zh-cn/api/apollo-query.md +++ b/docs/zh-cn/api/apollo-query.md @@ -1,28 +1,62 @@ # ApolloQuery 组件 +示例： + +```vue + + + +``` + +::: warning +要在 Vue 模板中启用对 `gql` 字符串标签的支持，请在 [指南](../guide/components/query.md#tag-setup) 中查看必要的设置。 +::: + ## Props -- `query`：GraphQL 查询（由 `graphql-tag` 转换） +- `query`：GraphQL 查询（由 `graphql-tag` 转换）或一个接收 `gql` 标签作为参数并返回转换后的查询的函数 - `variables`：GraphQL 变量对象 - `fetchPolicy`：详见 [apollo fetchPolicy](https://www.apollographql.com/docs/react/basics/queries.html#graphql-config-options-fetchPolicy) - `pollInterval`：详见 [apollo pollInterval](https://www.apollographql.com/docs/react/basics/queries.html#graphql-config-options-pollInterval) - `notifyOnNetworkStatusChange`：详见 [apollo notifyOnNetworkStatusChange](https://www.apollographql.com/docs/react/basics/queries.html#graphql-config-options-notifyOnNetworkStatusChange) - `context`：详见 [apollo context](https://www.apollographql.com/docs/react/basics/queries.html#graphql-config-options-context) +- `update`：用于转换结果 `data` 的函数，用于在响应中选择特定部分。示例：`:update="data => data.user.messages"` - `skip`：布尔值，禁用查询获取 - `clientId`：查询所使用的 Apollo 客户端 id（在 ApolloProvider 的 `clients` 选项中定义） - `deep`：布尔值，使用深度 Vue 侦听器 - `tag`：字符串，HTML 标签名（默认值：`div`）；如果是假值（如 `null` 或 `undefined`），该组件将成为无渲染组件（内容不会被包装在标签中），在这种情况下，只有第一个子元素会被渲染 - `debounce`：对重新获取查询结果的防抖毫秒数（例如当变量更改时） - `throttle`：对重新获取查询结果的节流毫秒数（例如当变量更改时） +- `prefetch`：如为 `false`，将跳过 SSR 期间的预取 ## 作用域插槽 - `result`：Apollo 查询结果 - - `result.data`：查询返回的数据 - - `result.loading`：布尔值，表明请求正在进行中 + - `result.data`：查询返回的数据（可使用 `update` 属性转换） + - `result.fullData`：查询返回的原始数据（未使用 `update` 属性转换） + - `result.loading`：布尔值，表明请求正在进行中（你可能需要设置 `notifyOnNetworkStatusChange` 属性来修改它） - `result.error`：当前结果的最终错误 - `result.networkStatus`：详见 [apollo networkStatus](https://www.apollographql.com/docs/react/basics/queries.html#graphql-query-data-networkStatus) -- `query`：与组件关联的智能查询 +- `query`：与组件关联的智能查询，用于执行 `query.refetch()` 或 `query.fetchMore()` 之类的操作 - `isLoading`：智能查询加载状态 - `gqlError`：第一个 GraphQL 错误（如果有） - `times`：结果被更新的次数 @@ -31,3 +65,4 @@ - `result(resultObject)` - `error(errorObject)` +- `loading(boolean)` diff --git a/docs/zh-cn/api/apollo-subscribe-to-more.md b/docs/zh-cn/api/apollo-subscribe-to-more.md index 4e1ceba..b98afe8 100644 --- a/docs/zh-cn/api/apollo-subscribe-to-more.md +++ b/docs/zh-cn/api/apollo-subscribe-to-more.md @@ -1,7 +1,55 @@ # ApolloSubscribeToMore 组件 +示例： + +```vue + + + +``` + ## Props -- `document`：包含订阅的 GraphQL 文档。 +- `document`：包含订阅的 GraphQL 文档，或一个接收 `gql` 标签作为参数并返回转换后的文档的函数。 - `variables`：将自动更新订阅变量的对象。 - `updateQuery`：可以根据需要更新查询结果的函数。 diff --git a/docs/zh-cn/api/smart-subscription.md b/docs/zh-cn/api/smart-subscription.md index def6aa5..1c82045 100644 --- a/docs/zh-cn/api/smart-subscription.md +++ b/docs/zh-cn/api/smart-subscription.md @@ -27,7 +27,7 @@ this.$apollo.subscriptions.users.skip = true 停止并重新启动查询： ```js -this.$apollo.subscriptions.users.restart() +this.$apollo.subscriptions.users.refresh() ``` ### start diff --git a/docs/zh-cn/guide/apollo/subscriptions.md b/docs/zh-cn/guide/apollo/subscriptions.md index d573f8f..38151c5 100644 --- a/docs/zh-cn/guide/apollo/subscriptions.md +++ b/docs/zh-cn/guide/apollo/subscriptions.md @@ -40,9 +40,9 @@ const wsLink = new WebSocketLink({ const link = split( // 根据操作类型分割 ({ query }) => { - const { kind, operation } = getMainDefinition(query) - return kind === 'OperationDefinition' && - operation === 'subscription' + const definition = getMainDefinition(query) + return definition.kind === 'OperationDefinition' && + definition.operation === 'subscription' }, wsLink, httpLink @@ -61,7 +61,7 @@ Vue.use(VueApollo) ## 订阅更多 -如果你需要更新一个来自订阅的查询结果，最好的方式是使用 `subscribeToMore` 查询方法。它将创建链接到查询的 [智能订阅](../../api/smart-subscription.md)。你只需要将 `subscribeToMore` 添加到查询中： +如果你需要更新一个来自订阅的智能查询结果，最好的方式是使用 `subscribeToMore` 查询方法。它将创建链接到智能查询的 [智能订阅](../../api/smart-subscription.md)。你只需要将 `subscribeToMore` 添加到智能查询中： ```js apollo: { @@ -201,8 +201,9 @@ apollo: { } }, // 结果钩子 - result (data) { - console.log(data) + // 不要忘记对 `data` 进行解构 + result ({ data }) { + console.log(data.tagAdded) }, }, }, diff --git a/docs/zh-cn/guide/components/README.md b/docs/zh-cn/guide/components/README.md index 7c66966..a6a12b2 100644 --- a/docs/zh-cn/guide/components/README.md +++ b/docs/zh-cn/guide/components/README.md @@ -4,34 +4,26 @@ 这样做的好处是你可以直接在模板中使用这些组件，而不是使用组件的 `apollo` 选项。在某些情况下，你甚至不需要在 `.vue` 中添加脚本部分！这种代码会更加声明式。 -这是一个模板中 `ApolloQuery` 的简单示例： +这是一个模板中 [ApolloQuery](./query.md) 的简单示例： ```vue - - ``` + +在 [ApolloQuery](./query.md) 查看如何在模板中编写 GraphQL 查询。 diff --git a/docs/zh-cn/guide/components/mutation.md b/docs/zh-cn/guide/components/mutation.md index d472486..c60c50a 100644 --- a/docs/zh-cn/guide/components/mutation.md +++ b/docs/zh-cn/guide/components/mutation.md @@ -6,18 +6,205 @@ ```vue -