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 响应速度更快，同时确保数据在到达时与实际响应保持一致。
参见 乐观 UI
<ApolloMutation
:optimisticResponse="{
__typename: 'Mutation',
someWork: {
__typename: 'SomeWorkPayload',
success: true,
timeSpent: 100,
},
}"
/>update
当您执行变异时，您会修改后端数据。如果该数据也存在于您的 Apollo Client 缓存 中，您可能需要更新缓存以反映变异的结果。
如果变异修改了多个实体，或者创建或删除了实体，Apollo Client 缓存不会自动更新以反映变异的结果。为了解决这个问题，您可以包含一个 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，您可以指定一个或多个查询，您希望在变异完成后运行这些查询，以便重新获取可能受变异影响的存储部分。
参见 变异后重新获取查询
<template>
<ApolloMutation
:refetchQueries="refetchQueriesAfterMyMutation"
/>
</template>
<script>
import gql from 'graphql-tag'
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 Client 的 ID（在 ApolloProvider clients 选项中定义）
<ApolloMutation
clientId="myClient"
/>tag
字符串 HTML 标签名称（默认：div）；如果为 undefined，则组件将是无渲染的（内容不会包装在标签中）
<ApolloMutation
tag="span"
/>context
将上下文对象传递给 Apollo 链接链。
参见 apollo 上下文
<ApolloMutation
:context="{
answer: 42,
}"
/>插槽 props
mutate
签名
mutate(options = null): Promise<FetchResult>options: 变异选项.
用于调用变异的函数。您可以覆盖变异选项（例如：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: 错误对象
<ApolloMutation
@error="error => {}"
/>loading
当加载状态更改时，会发出 loading 事件。
参数
loading: 布尔值
<ApolloMutation
@loading="loading => {}"
/>