# ApolloQuery
你可以使用 ApolloQuery
(或 apollo-query
)组件直接在模板中侦听 Apollo 查询。
阅读完本页后,在 API 参考 查看所有可用的选项。
# 使用 gql 标签的查询
这是使用 ApolloQuery
组件的推荐方法。它与 gql
标签使用相同的语法,就像在其他示例中一样:
<template>
<ApolloQuery
:query="gql => gql`
query MyHelloQuery ($name: String!) {
hello (name: $name)
}
`"
:variables="{ name }"
>
<!-- TODO -->
</ApolloQuery>
</template>
我们将一个函数传递给 query
属性,它将 gql
标签作为参数,因此我们可以直接编写 GraphQL 文档。
上面的例子中还包含将 variables
通过其同名属性传递给查询的功能。
在 ApolloQuery
的默认插槽中,你可以访问有关被侦听查询的各种插槽数据,比如 result
对象:
<template v-slot="{ result: { loading, error, data } }">
<!-- Loading -->
<div v-if="loading" class="loading apollo">Loading...</div>
<!-- Error -->
<div v-else-if="error" class="error apollo">An error occurred</div>
<!-- Result -->
<div v-else-if="data" class="result apollo">{{ data.hello }}</div>
<!-- No result -->
<div v-else class="no-result apollo">No result :(</div>
</template>
这是一个完整的示例组件:
<script>
export default {
data () {
return {
name: 'Anne'
}
}
}
</script>
<template>
<div>
<input v-model="name" placeholder="Enter your name">
<ApolloQuery
:query="gql => gql`
query MyHelloQuery ($name: String!) {
hello (name: $name)
}
`"
:variables="{ name }"
>
<template v-slot="{ result: { loading, error, data } }">
<!-- Loading -->
<div v-if="loading" class="loading apollo">Loading...</div>
<!-- Error -->
<div v-else-if="error" class="error apollo">An error occurred</div>
<!-- Result -->
<div v-else-if="data" class="result apollo">{{ data.hello }}</div>
<!-- No result -->
<div v-else class="no-result apollo">No result :(</div>
</template>
</ApolloQuery>
</div>
</template>
# 配置标签
如果你没有使用 vue-cli-plugin-apollo (opens new window) (v0.20.0+
),则需要配置 vue-loader (opens new window) 来转换字符串模板标签。vue-loader
在底层使用 Bublé (opens new window) 来转换组件模板中的代码。我们需要将 dangerousTaggedTemplateString
变换添加到 Bublé 以使 gql
起作用。例如,在使用 Vue CLI 时:
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.transpileOptions = {
transforms: {
dangerousTaggedTemplateString: true,
},
}
return options
})
}
}
在原始的 Webpack 配置中,它将如下所示:
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader',
options: {
transpileOptions: {
transforms: {
dangerousTaggedTemplateString: true
}
}
}
}
]
},
/* 其他规则 ... */
]
}
}
# 使用 gql 文件的查询
使用本组件的另一种方法是创建单独的 .gql
文件。这些文件需要使用 graphql-tag (opens new window) 进行预处理。
<template>
<ApolloQuery
:query="require('../graphql/HelloWorld.gql')"
:variables="{ name }"
>
<template v-slot="{ result: { loading, error, data } }">
<!-- Loading -->
<div v-if="loading" class="loading apollo">Loading...</div>
<!-- Error -->
<div v-else-if="error" class="error apollo">An error occurred</div>
<!-- Result -->
<div v-else-if="data" class="result apollo">{{ data.hello }}</div>
<!-- No result -->
<div v-else class="no-result apollo">No result :(</div>
</template>
</ApolloQuery>
</template>
# 查询操作
你可以使用 query
插槽属性来访问智能查询对象。下面是使用 fetchMore
分页数据的示例组件:
<template>
<ApolloQuery
:query="/* query */"
:variables="{
limit: $options.pageSize
}"
v-slot="{ result: { loading, error, data }, query }"
>
<!-- 在这里显示数据 -->
<button v-if="hasMore" @click="loadMore(query)">Load more</button>
</ApolloQuery>
</template>
<script>
export default {
pageSize: 10,
data: {
return {
page: 1,
hasMore: true
}
},
methods: {
async loadMore (query) {
await query.fetchMore({
variables: {
offset: this.page++ * this.$options.pageSize
},
updateQuery: (prev, { fetchMoreResult }) => {
if (!fetchMoreResult || fetchMoreResult.product.length === 0) {
this.hasMore = false
return prev
}
return Object.assign({}, prev, {
product: [...prev.product, ...fetchMoreResult.product]
})
}
})
}
}
}
</script>
在 API 参考 查看所有可用的智能查询方法。
# 使用片段
片段可用于在其他文档中共享部分 GraphQL 文档,以便一致地检索相同的数据,且无需复制粘贴代码。
假设我们有一个GetMessages
查询,带有一个类型是 Message
对象数组的 messages
字段:
query GetMessages {
messages {
id
user {
id
name
}
text
created
}
}
我们想要将 messages
中 Message
类型的所有字段提取到一个片段中,以使我们可以在其他地方重复使用它。
首先将 gql
标签导入组件:
import gql from 'graphql-tag'
然后,在组件定义中,声明一个新的 fragments
对象:
export default {
fragments: {
/** TODO */
}
}
以下是应用于 Message
类型的 message
片段,如下所示:
fragment message on Message {
id
user {
id
name
}
text
created
}
我们可以像查询一样使用 gql
标签:
export default {
fragments: {
message: gql`
fragment message on Message {
id
user {
id
name
}
text
created
}
`
}
}
我们现在可以在组件中使用 this.$options.fragments.message
访问该片段。要在我们的 GetMessages
查询中使用此片段,我们需要使用 GraphQL 的 ...
展开运算符,并将片段放在查询旁边:
gql`
query GetMessages {
messages {
...message
}
}
${$options.fragments.message}
`
这将有效地生成 GraphQL 文档(你可以在你的 GraphQL API playground 上尝试):
query GetMessages {
messages {
...message
}
}
fragment message on Message {
id
user {
id
name
}
text
created
}
那么这里发生了什么?GraphQL 将找到 ...
运算符,表明我们将在查询的 messages
字段中选择字段。...
运算符之后是片段名称 message
,然后在整个 GraphQL 文档中查找片段。由于我们已经正确定义了片段,因此它能够在查询下面被找到。最后,GraphQL 将复制所有片段内容并用它替换 ...message
。
最后,我们获得最终查询:
query GetMessages {
messages {
id
user {
id
name
}
text
created
}
}
fragment message on Message {
id
user {
id
name
}
text
created
}
这是一个完整的示例组件:
<!-- MessageList.vue -->
<script>
import gql from 'graphql-tag'
export default {
fragments: {
message: gql`
fragment message on Message {
id
user {
id
name
}
text
created
}
`
}
}
</script>
<template>
<ApolloQuery
:query="gql => gql`
query GetMessages {
messages {
...message
}
}
${$options.fragments.message}
`"
>
<!-- 内容... -->
</ApolloQuery>
</template>
# 重复使用片段
现在我们可以在另一个组件中检索 message
片段:
<!-- MessageForm.vue -->
<script>
import gql from 'graphql-tag'
import MessageList from './MessageList.vue'
export default {
methods: {
async sendMessage () {
await this.$apollo.mutate({
mutation: gql`
mutation SendMessage ($input: SendMessageInput!) {
addMessage (input: $input) {
newMessage {
...message
}
}
}
${MessageList.fragments.message}
`,
variables: {
/* 这里是变量 */
},
/* 这里是其他选项 */
})
}
}
}
</script>