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

У меня есть мутация 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;

reactjs graphql relay relayjs
person danronmoon    schedule 31.07.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

В функции 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 документация по API мутации.

Обратите внимание: если вы воспользуетесь описанным выше подходом, вы получите системные ошибки (например, возникновение исключения). Вы также можете получить только одну ошибку пользователя (например, ошибку проверки), если вы выдаете ошибку из-за проблем с вводом данных пользователем. Если вы хотите получать все ошибки пользователей вместе, вы можете воспользоваться подходом, предложенным в этой замечательной статье: Проверка и ошибки пользователей в мутациях GraphQL.

person Ahmad Ferdous    schedule 31.07.2016