# ApolloMutation 组件
本组件让你可以在模板中发送变更。
示例:
<ApolloMutation
:mutation="gql => gql`
mutation DoStuff ($name: String!) {
someWork (name: $name) {
success
timeSpent
}
}
`"
:variables="{
name
}"
@done="onDone"
>
<template v-slot="{ mutate, loading, error }">
<button :disabled="loading" @click="mutate()">Click me</button>
<p v-if="error">An error occurred: {{ error }}</p>
</template>
</ApolloMutation>
# Props
# mutation
GraphQL 查询(由 graphql-tag
转换)或一个接收 gql
标签作为参数并返回转换后的查询的函数。
<ApolloMutation
:mutation="gql => gql`
mutation DoStuff ($name: String!) {
someWork (name: $name) {
success
timeSpent
}
}
`"
/>
# variables
GraphQL 变量对象。
<ApolloMutation
:variables="{
name
}"
/>
# optimisticResponse
乐观 UI 是一种在收到服务器响应之前,就可以模拟变更的结果并更新 UI 的模式。收到服务器的响应后,乐观的结果就会被丢弃,并由实际结果代替。
乐观 UI 提供了一种简单的方法,极大的加快 UI 响应速度,同时确保数据到达时与实际响应保持一致。
<ApolloMutation
:optimisticResponse="{
__typename: 'Mutation',
someWork: {
__typename: 'SomeWorkPayload',
success: true,
timeSpent: 100
}
}"
/>
# update
当执行变更时,你将修改后端数据。如果该数据也存在于你的 Apollo 客户端缓存 (opens new window) 中,你可能需要更新缓存以反映变更的结果。
如果一个变更修改了多个实体,或者创建或删除了实体,Apollo 客户端缓存不会自动更新以反映变更的结果。你可以使用 update
函数来解决这个问题。
update 函数的目的是修改缓存的数据,以匹配变更对后端数据所做的修改。
<template>
<ApolloMutation
:update="update"
/>
</template>
<script>
export default {
methods: {
update(cache, { data: { addTodo } }) {
cache.modify({
fields: {
todos(existingTodos = []) {
const newTodoRef = cache.writeFragment({
data: addTodo,
fragment: gql`
fragment NewTodo on Todo {
id
type
}
`,
})
return [...existingTodos, newTodoRef]
},
},
})
},
},
}
</script>
# refetchQueries
在某些情况下,仅使用 dataIdFromObject
还不足以正确更新应用的 UI。例如,如果要在不重新获取整个列表的情况下向对象列表中添加某些内容,或者无法为某些对象分配对象标识符,则 Apollo Client 无法为你更新现有的查询。继续阅读以了解你可以使用的其他工具。
refetchQueries
是更新缓存的最简单方法。使用 refetchQueries
,你可以指定一个或多个要在变更完成后运行的查询,以重新获取存储中可能受到该变更影响的部分。
详见 变更后重新获取查询 (opens new window)
<template>
<ApolloMutation
:refetchQueries="refetchQueriesAfterMyMutation"
/>
</template>
<script>
import { gql } from '@apollo/client/core'
export default {
computed: {
refetchQueriesAfterMyMutation () {
return [{
query: gql`
query UpdateCache($repoName: String!) {
entry(repoFullName: $repoName) {
id
comments {
postedBy {
login
html_url
}
createdAt
content
}
}
}
`,
variables: { repoName: 'apollographql/apollo-client' },
}]
},
},
}
</script>
# clientId
查询所使用的 Apollo 客户端 id(在 ApolloProvider 的 clients
选项中定义)、
<ApolloMutation
clientId="myClient"
/>
# tag
字符串格式的 HTML 标签名(默认值:div
);如果是 undefined
,该组件将成为无渲染组件(内容不会被包装在标签中)
<ApolloMutation
tag="span"
/>
# context
向下传递 Apollo link 中的上下文对象。
详见 apollo context (opens new window)
<ApolloMutation
:context="{
answer: 42,
}"
/>
# 插槽 props
# mutate
签名:
mutate(options = null): Promise<FetchResult>
options
: 变更选项 (opens new window).
用来调用变更的函数。你可以重载变更的选项(例如:mutate({ variables: { foo: 'bar } })
)。
<ApolloMutation>
<template v-slot="{ mutate }">
<button @click="mutate({ variables: { myVar: 42 } })">Click me</button>
</template>
</ApolloMutation>
# loading
布尔值,表明请求正在进行中。
<ApolloMutation>
<template v-slot="{ loading }">
<button :disabled="loading">Click me</button>
</template>
</ApolloMutation>
# error
最后一次变更调用的最终错误。
<ApolloMutation>
<template v-slot="{ error }">
<p v-if="error">An error occurred: {{ error }}</p>
</template>
</ApolloMutation>
# gqlError
第一个 GraphQL 错误(如果有)。
<ApolloMutation>
<template v-slot="{ gqlError }">
<p v-if="gqlError">An error occurred: {{ gqlError.message }}</p>
</template>
</ApolloMutation>
# 事件
# done
收到变更结果时发出。
参数:
result
: FetchResult
<ApolloMutation
@done="result => {}"
/>
# error
发生错误时发出。
参数:
error
: Error object
<ApolloMutation
@error="error => {}"
/>
# loading
当加载状态改变时发出。
参数:
loading
: Boolean
<ApolloMutation
@loading="loading => {}"
/>