如何在 Relay 中捕获和处理失败的突变?
Posted
技术标签:
【中文标题】如何在 Relay 中捕获和处理失败的突变?【英文标题】:How to catch and handle failed mutation in Relay? 【发布时间】:2016-12-05 17:06:06 【问题描述】:我有一个 Relay 突变,它创建一个帖子并将其添加到帖子列表中。乐观更新将在将突变发送到我的 GraphQL 服务器之前将帖子的标题和 url 添加到列表中。我的问题是,当突变失败或无法完成时,乐观更新会自动从列表中删除。有没有办法捕捉和处理失败的突变,以便我可以向用户显示某种消息,表明帖子无法保存?
我的中继突变:
import Relay from 'react-relay';
class CreatePostMutation extends Relay.Mutation
getMutation ()
return Relay.QL`
mutation
createPost
`
getVariables()
return
title: this.props.title,
url: this.props.url
getFatQuery()
return Relay.QL`
fragment on CreatePostPayload
postEdge,
store
id
`;
getConfigs()
return [
type: 'RANGE_ADD',
parentName: 'store',
parentID: this.props.store.id,
connectionName: 'allPosts',
edgeName: 'postEdge',
rangeBehaviors:
'': 'prepend'
]
getOptimisticResponse()
return
postEdge:
node:
title: this.props.title,
url: this.props.url
export default CreatePostMutation;
我的 PostForm React 组件:
import React from 'react';
import Relay from 'react-relay';
import CreatePostMutation from '../../mutations/create_post';
class PostForm extends React.Component
handleSubmit = (e) =>
e.preventDefault();
let relay, store = this.props;
let title, url = this.refs;
relay.commitUpdate(
new CreatePostMutation(
title: title.value,
url: url.value,
store
)
);
// clear values
title.value = '';
url.value = '';
render ()
return (
<div>
<form onSubmit=this.handleSubmit>
<input name="title" placeholder="Title" ref="title" />
<input name="url" placeholder="URL" ref="url" />
<input type="submit" />
</form>
</div>
)
export default PostForm;
【问题讨论】:
【参考方案1】:在您的PostForm
组件的handleSubmit
函数中,在调用commitUpdate
时提供一个回调来处理突变失败:
const onFailure = (transaction) =>
// Notify user that the post could not be added.
;
const onSuccess = () =>
console.log('Post added.')
;
relay.commitUpdate(
new CreatePostMutation(
title: title.value,
url: url.value,
store
),
onFailure, onSuccess
);
你可以在Relay mutation API documentation找到一个例子。
请注意,如果您使用上述方法,您将收到系统错误(例如,抛出异常)。如果您因用户输入问题而引发错误,您也可能只收到一个用户错误(例如,验证错误)。如果您想同时接收所有用户错误,可以考虑采用这篇优秀文章中建议的方法:Validation and User Errors in GraphQL Mutations。
【讨论】:
以上是关于如何在 Relay 中捕获和处理失败的突变?的主要内容,如果未能解决你的问题,请参考以下文章