如何捕捉並處理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中失敗的突變？

回答

相關問題