如何捕捉并处理Relay中失败的突变？

我有一个中继突变，它会创建一个帖子并将其前置到帖子列表中。乐观的更新会在将突变发送到我的GraphQL服务器之前将帖子的标题和url预先加入列表。我的问题是，当突变失败或无法完成时，乐观的更新会在列表后自动从列表中删除。有没有办法捕捉并处理失败的突变，以便我可以向用户显示某种消息，指出帖子无法保存？如何捕捉并处理Relay中失败的突变？

我的继电器突变：

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阵营组成：

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;

来源

2016-07-31 danronmoon

在你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。

来源

2016-07-31 18:09:26

如何捕捉并处理Relay中失败的突变？

回答

相关问题