Как поймать и обработать неудачную мутацию в Relay?

Question

У меня есть мутация Relay, которая создает сообщение и добавляет его в список сообщений. Оптимистичное обновление добавит заголовок и URL-адрес публикации в список до того, как мутация будет отправлена ​​на мой сервер GraphQL. Моя проблема заключается в том, что, когда мутация терпит неудачу или не может завершиться, это оптимистическое обновление автоматически удаляется из списка. Есть ли способ поймать и обработать неудачную мутацию, чтобы я мог показать пользователю какое-то сообщение о том, что сообщение не может быть сохранено?

Мои реле мутации:

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; 

Answer 1

В вашей handleSubmit функции PostForm компонента, обеспечивают функцию обратного вызова для обработки сбоя мутации при вызове 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.