Wie fange und handle gescheiterte Mutation in Relay?

Question

Ich habe eine Relay-Mutation, die einen Post erstellt und ihn einer Post-Liste voranstellt. Das optimistische Update wird den Titel und die URL des Beitrags der Liste voranstellen, bevor die Mutation an meinen GraphQL-Server gesendet wird. Mein Problem ist, dass, wenn die Mutation fehlschlägt oder nicht abgeschlossen werden kann, diese optimistische Aktualisierung automatisch aus der Liste entfernt wird. Gibt es eine Möglichkeit, eine fehlgeschlagene Mutation zu erfassen und zu verarbeiten, sodass ich dem Benutzer eine Nachricht anzeigen kann, die darauf hinweist, dass der Beitrag nicht gespeichert werden kann?

Meine Relay Mutation:

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; 

Meine PostForm Reagieren Komponente:

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

In Ihrer PostFormhandleSubmit Funktion der Komponente, bieten eine Rückruf Mutation Versagen zu behandeln, während commitUpdate Aufruf:

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} 
); 

Sie können ein Beispiel finden in Relay mutation API documentation.

Beachten Sie, dass wenn Sie den obigen Ansatz verwenden, Systemfehler (z. B. Ausnahmen ausgelöst) erhalten. Sie können auch nur einen Benutzerfehler (z. B. Validierungsfehler) erhalten, wenn Sie Fehler bei Problemen mit Benutzereingaben auslösen. Wenn Sie alle Benutzerfehler zusammen erhalten möchten, können Sie einen in diesem ausgezeichneten Artikel vorgeschlagenen Ansatz befolgen: Validation and User Errors in GraphQL Mutations.