如何在 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 中捕获和处理失败的突变?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Relay Modern 突变进行文件上传?

如何在中继服务器中使用删除突变?

突变后如何使Relay的缓存失效

如何订阅relay/graphql突变的进度事件

是否可以从 Relay 突变访问 GraphQL 验证错误?

如何在 Relay 中捕获 GraphQL 错误消息?